1import { 2 createLegacyFormController 3} from "./chunk-RSCM4DCK.js"; 4import { 5 disableContentScrollY, 6 findClosestIonContent, 7 resetContentScrollY 8} from "./chunk-2V4QKHY3.js"; 9import { 10 isRTL 11} from "./chunk-6LTS2OT5.js"; 12import { 13 createColorClasses, 14 hostContext 15} from "./chunk-6RS6TFOT.js"; 16import { 17 getIonMode 18} from "./chunk-PP7P2UY3.js"; 19import { 20 Host, 21 createEvent, 22 getElement, 23 h, 24 registerInstance 25} from "./chunk-LPF5FBSP.js"; 26import { 27 printIonWarning 28} from "./chunk-36T2BHYJ.js"; 29import { 30 clamp, 31 debounceEvent, 32 getAriaLabel, 33 inheritAriaAttributes, 34 renderHiddenInput 35} from "./chunk-3MMB2GIP.js"; 36import { 37 __async 38} from "./chunk-KLIBT2SQ.js"; 39 40// node_modules/@ionic/core/dist/esm/ion-range.entry.js 41function getDecimalPlaces(n) { 42 if (n % 1 === 0) 43 return 0; 44 return n.toString().split(".")[1].length; 45} 46function roundToMaxDecimalPlaces(n, ...references) { 47 const maxPlaces = Math.max(...references.map((r) => getDecimalPlaces(r))); 48 return Number(n.toFixed(maxPlaces)); 49} 50var rangeIosCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}@supports (inset-inline-start: 0){.range-knob-handle{inset-inline-start:0}}@supports not (inset-inline-start: 0){.range-knob-handle{left:0}:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}[dir=rtl] .range-knob-handle{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset;right:unset;right:0}}}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}@supports (inset-inline-start: 0){.range-bar-container{inset-inline-start:0}}@supports not (inset-inline-start: 0){.range-bar-container{left:0}:host-context([dir=rtl]) .range-bar-container{left:unset;right:unset;right:0}[dir=rtl] .range-bar-container{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset;right:unset;right:0}}}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}@supports (inset-inline-start: 0){.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}}@supports not (inset-inline-start: 0){.range-knob{left:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}}}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}
50::slotted([slot=label]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:0px}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);--knob-size:26px;--bar-height:4px;--bar-background:var(--ion-color-step-900, #e6e6e6);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:2px;--height:42px}:host(.legacy-range){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host(.range-item-start-adjustment){-webkit-padding-start:24px;padding-inline-start:24px}:host(.range-item-end-adjustment){-webkit-padding-end:24px;padding-inline-end:24px}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:calc(8px + 0.75rem)}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:calc(8px + 0.75rem)}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}
50.range-bar-active.has-ticks{border-radius:0;-webkit-margin-start:-2px;margin-inline-start:-2px;-webkit-margin-end:-2px;margin-inline-end:-2px}.range-tick{-webkit-margin-start:-2px;margin-inline-start:-2px;border-radius:0;position:absolute;top:17px;width:4px;height:8px;background:var(--ion-color-step-900, #e6e6e6);pointer-events:none}.range-tick-active{background:var(--bar-background-active)}.range-pin{-webkit-transform:translate3d(0, 100%, 0) scale(0.01);transform:translate3d(0, 100%, 0) scale(0.01);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;min-width:28px;-webkit-transition:-webkit-transform 120ms ease;transition:-webkit-transform 120ms ease;transition:transform 120ms ease;transition:transform 120ms ease, -webkit-transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:0.75rem;text-align:center}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, calc(-100% + 11px), 0) scale(1);transform:translate3d(0, calc(-100% + 11px), 0) scale(1)}:host(.range-disabled){opacity:0.3}"; 51var rangeMdCss = ':host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}@supports (inset-inline-start: 0){.range-knob-handle{inset-inline-start:0}}@supports not (inset-inline-start: 0){.range-knob-handle{left:0}:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}[dir=rtl] .range-knob-handle{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset;right:unset;right:0}}}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}@supports (inset-inline-start: 0){.range-bar-container{inset-inline-start:0}}@supports not (inset-inline-start: 0){.range-bar-container{left:0}:host-context([dir=rtl]) .range-bar-container{left:unset;right:unset;right:0}[dir=rtl] .range-bar-container{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset;right:unset;right:0}}}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}@supports (inset-inline-start: 0){.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}}@supports not (inset-inline-start: 0){.range-knob{left:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}}}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}
51::slotted([slot=label]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:0px}:host{--knob-border-radius:50%;--knob-background:var(--bar-background-active);--knob-box-shadow:none;--knob-size:18px;--bar-height:2px;--bar-background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.26);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #3880ff);--pin-color:var(--ion-color-primary-contrast, #fff)}:host(.legacy-range) ::slotted([slot=label]){font-size:initial}:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=start]),:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=end]),:host(:not(.legacy-range)) .native-wrapper{font-size:0.75rem}:host(.legacy-range){-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px;padding-top:8px;padding-bottom:8px;font-size:0.75rem}:host(.range-item-start-adjustment){-webkit-padding-start:18px;padding-inline-start:18px}:host(.range-item-end-adjustment){-webkit-padding-end:18px;padding-inline-end:18px}:host(.ion-color) .range-bar{background:rgba(var(--ion-color-base-rgb), 0.26)}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-knob,:host(.ion-color) .range-knob::before,:host(.ion-color) .range-pin,:host(.ion-color) .range-pin::before,:host(.ion-color) .range-tick{background:var(--ion-color-base);color:var(--ion-color-contrast)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:1.75rem}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:1.75rem}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}
51.range-knob{-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease;z-index:2}.range-knob::before{border-radius:50%;position:absolute;width:var(--knob-size);height:var(--knob-size);-webkit-transform:scale(1);transform:scale(1);-webkit-transition:0.267s cubic-bezier(0, 0, 0.58, 1);transition:0.267s cubic-bezier(0, 0, 0.58, 1);background:var(--knob-background);content:"";opacity:0.13;pointer-events:none}@supports (inset-inline-start: 0){.range-knob::before{inset-inline-start:0}}@supports not (inset-inline-start: 0){.range-knob::before{left:0}:host-context([dir=rtl]) .range-knob::before{left:unset;right:unset;right:0}[dir=rtl] .range-knob::before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.range-knob::before:dir(rtl){left:unset;right:unset;right:0}}}.range-tick{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick-active{background:transparent}.range-pin{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;border-radius:50%;-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.75rem;height:1.75rem;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color)}.range-pin::before{bottom:-1px;-webkit-margin-start:-13px;margin-inline-start:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}@supports (inset-inline-start: 0){.range-pin::before{inset-inline-start:50%}}@supports not (inset-inline-start: 0){.range-pin::before{left:50%}:host-context([dir=rtl]) .range-pin::before{left:unset;right:unset;right:50%}[dir=rtl] .range-pin::before{left:unset;right:unset;right:50%}@supports selector(:dir(rtl)){.range-pin::before:dir(rtl){left:unset;right:unset;right:50%}}}:host-context([dir=rtl]) .range-pin::before{left:unset}[dir=rtl] .range-pin::before{left:unset}@supports selector(:dir(rtl)){.range-pin::before:dir(rtl){left:unset}}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, calc(-100% + 4px), 0) scale(1);transform:translate3d(0, calc(-100% + 4px), 0) scale(1)}@media (any-hover: hover){.range-knob-handle:hover .range-knob:before{-webkit-transform:scale(2);transform:scale(2);opacity:0.13}}.range-knob-handle.ion-activated .range-knob:before,.range-knob-handle.ion-focused .range-knob:before,.range-knob-handle.range-knob-pressed .range-knob:before{-webkit-transform:scale(2);transform:scale(2)}.range-knob-handle.ion-focused .range-knob::before{opacity:0.13}.range-knob-handle.ion-activated .range-knob::before,.range-knob-handle.range-knob-pressed .range-knob::before{opacity:0.25}:host(:not(.range-has-pin)) .range-knob-pressed .range-knob,:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob{-webkit-transform:scale(1);transform:scale(1)}:host(.range-disabled) .range-bar-active,:host(.range-disabled) .range-bar,:host(.range-disabled) .range-tick{background-color:var(--ion-color-step-250, #bfbfbf)}:host(.range-disabled) .range-knob{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, #bfbfbf)}:host(.range-disabled) .label-text-wrapper,:host(.range-disabled) ::slotted([slot=start]),:host(.range-disabled) ::slotted([slot=end]){opacity:0.38}'; 52var Range = class { 53 constructor(hostRef) { 54 registerInstance(this, hostRef); 55 this.ionChange = createEvent(this, "ionChange", 7); 56 this.ionInput = createEvent(this, "ionInput", 7); 57 this.ionStyle = createEvent(this, "ionStyle", 7); 58 this.ionFocus = createEvent(this, "ionFocus", 7); 59 this.ionBlur = createEvent(this, "ionBlur", 7); 60 this.ionKnobMoveStart = createEvent(this, "ionKnobMoveStart", 7); 61 this.ionKnobMoveEnd = createEvent(this, "ionKnobMoveEnd", 7); 62 this.rangeId = `ion-r-${rangeIds++}`; 63 this.didLoad = false;
64 this.noUpdate = false; 65 this.hasFocus = false; 66 this.inheritedAttributes = {}; 67 this.contentEl = null; 68 this.initialContentScrollY = true; 69 this.hasLoggedDeprecationWarning = false; 70 this.clampBounds = (value) => { 71 return clamp(this.min, value, this.max); 72 }; 73 this.ensureValueInBounds = (value) => { 74 if (this.dualKnobs) { 75 return { 76 lower: this.clampBounds(value.lower), 77 upper: this.clampBounds(value.upper) 78 }; 79 } else { 80 return this.clampBounds(value); 81 } 82 }; 83 this.setupGesture = () => __async(this, null, function* () { 84 const rangeSlider = this.rangeSlider; 85 if (rangeSlider) { 86 this.gesture = (yield import("./chunk-F4QZ45SM.js")).createGesture({ 87 el: rangeSlider, 88 gestureName: "range", 89 gesturePriority: 100, 90 threshold: 0, 91 onStart: (ev) => this.onStart(ev), 92 onMove: (ev) => this.onMove(ev), 93 onEnd: (ev) => this.onEnd(ev) 94 }); 95 this.gesture.enable(!this.disabled); 96 } 97 }); 98 this.handleKeyboard = (knob, isIncrease) => { 99 const { ensureValueInBounds } = this; 100 let step = this.step; 101 step = step > 0 ? step : 1; 102 step = step / (this.max - this.min); 103 if (!isIncrease) { 104 step *= -1; 105 } 106 if (knob === "A") { 107 this.ratioA = clamp(0, this.ratioA + step, 1); 108 } else { 109 this.ratioB = clamp(0, this.ratioB + step, 1); 110 } 111 this.ionKnobMoveStart.emit({ value: ensureValueInBounds(this.value) }); 112 this.updateValue(); 113 this.emitValueChange(); 114 this.ionKnobMoveEnd.emit({ value: ensureValueInBounds(this.value) }); 115 }; 116 this.onBlur = () => { 117 if (this.hasFocus) { 118 this.hasFocus = false; 119 this.ionBlur.emit(); 120 this.emitStyle(); 121 } 122 }; 123 this.onFocus = () => { 124 if (!this.hasFocus) { 125 this.hasFocus = true; 126 this.ionFocus.emit(); 127 this.emitStyle(); 128 } 129 }; 130 this.ratioA = 0; 131 this.ratioB = 0; 132 this.pressedKnob = void 0; 133 this.color = void 0; 134 this.debounce = void 0; 135 this.name = this.rangeId; 136 this.label = void 0; 137 this.dualKnobs = false; 138 this.min = 0; 139 this.max = 100; 140 this.pin = false; 141 this.pinFormatter = (value) => Math.round(value); 142 this.snaps = false; 143 this.step = 1; 144 this.ticks = true; 145 this.activeBarStart = void 0; 146 this.disabled = false; 147 this.value = 0; 148 this.labelPlacement = "start"; 149 this.legacy = void 0; 150 } 151 debounceChanged() { 152 const { ionInput, debounce, originalIonInput } = this; 153 this.ionInput = debounce === void 0 ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce); 154 } 155 minChanged() { 156 if (!this.noUpdate) { 157 this.updateRatio(); 158 } 159 } 160 maxChanged() { 161 if (!this.noUpdate) { 162 this.updateRatio(); 163 } 164 } 165 activeBarStartChanged() { 166 const { activeBarStart } = this; 167 if (activeBarStart !== void 0) { 168 if (activeBarStart > this.max) { 169 printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el); 170 this.activeBarStart = this.max; 171 } else if (activeBarStart < this.min) { 172 printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el); 173 this.activeBarStart = this.min; 174 } 175 } 176 } 177 disabledChanged() { 178 if (this.gesture) { 179 this.gesture.enable(!this.disabled); 180 } 181 this.emitStyle(); 182 } 183 valueChanged() { 184 if (!this.noUpdate) { 185 this.updateRatio(); 186 } 187 } 188 componentWillLoad() { 189 if (this.el.hasAttribute("id")) { 190 this.rangeId = this.el.getAttribute("id"); 191 } 192 this.inheritedAttributes = inheritAriaAttributes(this.el); 193 } 194 componentDidLoad() { 195 this.originalIonInput = this.ionInput; 196 this.setupGesture(); 197 this.updateRatio(); 198 this.didLoad = true; 199 } 200 connectedCallback() { 201 const { el } = this; 202 this.legacyFormController = createLegacyFormController(el); 203 this.updateRatio(); 204 this.debounceChanged(); 205 this.disabledChanged(); 206 this.activeBarStartChanged(); 207 if (this.didLoad) { 208 this.setupGesture(); 209 } 210 this.contentEl = findClosestIonContent(this.el); 211 } 212 disconnectedCallback() { 213 if (this.gesture) { 214 this.gesture.destroy(); 215 this.gesture = void 0; 216 } 217 } 218 getValue() { 219 var _a; 220 const value = (_a = this.value) !== null && _a !== void 0 ? _a : 0; 221 if (this.dualKnobs) { 222 if (typeof value === "object") { 223 return value; 224 } 225 return { 226 lower: 0, 227 upper: value 228 }; 229 } else { 230 if (typeof value === "object") { 231 return value.upper; 232 } 233 return value; 234 } 235 } 236 // TODO FW-2997 remove this 237 emitStyle() { 238 if (this.legacyFormController.hasLegacyControl()) { 239 this.ionStyle.emit({ 240 interactive: true, 241 "interactive-disabled": this.disabled, 242 // TODO(FW-2997): remove this 243 legacy: !!this.legacy 244 }); 245 } 246 } 247 /** 248 * Emits an `ionChange` event. 249 * 250 * This API should be called for user committed changes. 251 * This API should not be used for external value changes. 252 */ 253 emitValueChange() { 254 this.value = this.ensureValueInBounds(this.value); 255 this.ionChange.emit({ value: this.value }); 256 } 257 onStart(detail) { 258 const { contentEl }
258 = this; 259 if (contentEl) { 260 this.initialContentScrollY = disableContentScrollY(contentEl); 261 } 262 const rect = this.rect = this.rangeSlider.getBoundingClientRect(); 263 const currentX = detail.currentX; 264 let ratio = clamp(0, (currentX - rect.left) / rect.width, 1); 265 if (isRTL(this.el)) { 266 ratio = 1 - ratio; 267 } 268 this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? "A" : "B"; 269 this.setFocus(this.pressedKnob); 270 this.update(currentX); 271 this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) }); 272 } 273 onMove(detail) { 274 this.update(detail.currentX); 275 } 276 onEnd(detail) { 277 const { contentEl, initialContentScrollY } = this; 278 if (contentEl) { 279 resetContentScrollY(contentEl, initialContentScrollY); 280 } 281 this.update(detail.currentX); 282 this.pressedKnob = void 0; 283 this.emitValueChange(); 284 this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) }); 285 } 286 update(currentX) { 287 const rect = this.rect; 288 let ratio = clamp(0, (currentX - rect.left) / rect.width, 1); 289 if (isRTL(this.el)) { 290 ratio = 1 - ratio; 291 } 292 if (this.snaps) { 293 ratio = valueToRatio(ratioToValue(ratio, this.min, this.max, this.step), this.min, this.max); 294 } 295 if (this.pressedKnob === "A") { 296 this.ratioA = ratio; 297 } else { 298 this.ratioB = ratio; 299 } 300 this.updateValue(); 301 } 302 get valA() { 303 return ratioToValue(this.ratioA, this.min, this.max, this.step); 304 } 305 get valB() { 306 return ratioToValue(this.ratioB, this.min, this.max, this.step); 307 } 308 get ratioLower() { 309 if (this.dualKnobs) { 310 return Math.min(this.ratioA, this.ratioB); 311 } 312 const { activeBarStart } = this; 313 if (activeBarStart == null) { 314 return 0; 315 } 316 return valueToRatio(activeBarStart, this.min, this.max); 317 } 318 get ratioUpper() { 319 if (this.dualKnobs) { 320 return Math.max(this.ratioA, this.ratioB); 321 } 322 return this.ratioA; 323 } 324 updateRatio() { 325 const value = this.getValue(); 326 const { min, max } = this; 327 if (this.dualKnobs) { 328 this.ratioA = valueToRatio(value.lower, min, max); 329 this.ratioB = valueToRatio(value.upper, min, max); 330 } else { 331 this.ratioA = valueToRatio(value, min, max); 332 } 333 } 334 updateValue() { 335 this.noUpdate = true; 336 const { valA, valB } = this; 337 this.value = !this.dualKnobs ? valA : { 338 lower: Math.min(valA, valB), 339 upper: Math.max(valA, valB) 340 }; 341 this.ionInput.emit({ value: this.value }); 342 this.noUpdate = false; 343 } 344 setFocus(knob) { 345 if (this.el.shadowRoot) { 346 const knobEl = this.el.shadowRoot.querySelector(knob === "A" ? ".range-knob-a" : ".range-knob-b"); 347 if (knobEl) { 348 knobEl.focus(); 349 } 350 } 351 } 352 // TODO FW-2997 remove this 353 renderLegacyRange() { 354 if (!this.hasLoggedDeprecationWarning) { 355 printIonWarning(`ion-range now requires providing a label with either the label slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. 356 357Example: <ion-range><div slot="label">Volume</div></ion-range> 358Example with aria-label: <ion-range aria-label="Volume"></ion-range> 359 360Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el); 361 if (this.legacy) { 362 printIonWarning(`ion-range is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup. 363 364Developers can dismiss this warning by removing their usage of the "legacy" property and using the new range syntax.`, this.el); 365 } 366 this.hasLoggedDeprecationWarning = true; 367 } 368 const { el, pressedKnob, disabled, pin, rangeId } = this; 369 const mode = getIonMode(this); 370 renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled); 371 return h(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, { 372 [mode]: true, 373 "in-item": hostContext("ion-item", el), 374 "range-disabled": disabled, 375 "range-pressed": pressedKnob !== void 0, 376 "range-has-pin": pin, 377 "legacy-range": true 378 }) }, h("slot", { name: "start" }), this.renderRangeSlider(), h("slot", { name: "end" })); 379 } 380 /** 381 * Returns true if content was passed to the "start" slot 382 */ 383 get hasStartSlotContent() { 384 return this.el.querySelector('[slot="start"]') !== null; 385 } 386 /** 387 * Returns true if content was passed to the "end" slot 388 */ 389 get hasEndSlotContent() { 390 return this.el.querySelector('[slot="end"]') !== null; 391 } 392 renderRange() { 393 const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this; 394 const inItem = hostContext("ion-item", el); 395 const hasStartContent = hasLabel && (labelPlacement === "start" || labelPlacement === "fixed") || this.hasStartSlotContent; 396 const needsStartAdjustment = inItem && !hasStartContent; 397 const hasEndContent = hasLabel && labelPlacement === "end" || this.hasEndSlotContent; 398 const needsEndAdjustment = inItem && !hasEndContent; 399 const mode = getIonMode(this); 400 renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled); 401 return h(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, { 402 [mode]: true, 403 "in-item": inItem, 404 "range-disabled": disabled, 405 "range-pressed": pressedKnob !== void 0, 406 "range-has-pin": pin, 407 [`range-label-placement-${labelPlacement}`]: true, 408 "range-item-start-adjustment": needsStartAdjustment, 409 "range-item-end-adjustment": needsEndAdjustment 410 }) }, h("label", { class: "range-wrapper", id: "range-label" }, h("div", { class: { 411 "label-text-wrapper": true, 412 "label-text-wrapper-hidden": !hasLabel 413 }, part: "label" }, label !== void 0 ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { class: "native-wrapper" }, h("slot", { name: "start" }), this.renderRangeSlider(), h("slot", { name: "end" })))); 414 } 415 get hasLabel() { 416 return this.label !== void 0 || this.el.querySelector('[slot="label"]') !== null; 417 } 418 renderRangeSlider() { 419 var _a; 420 const { min, max, step, el, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, inheritedAttributes, rangeId, pinFormatter } = this; 421 let { labelText } = getAriaLabel(el, rangeId); 422 if (labelText === void 0 || labelText === null) { 423 labelText = inheritedAttributes["aria-label"]; 424 } 425 let barStart = `${ratioLower * 100}%`; 426 let barEnd = `${100 - ratioUpper * 100}%`; 427 const rtl = isRTL(this.el); 428 const start = rtl ? "right" : "left"; 429 const end = rtl ? "left" : "right"; 430 const tickStyle = (tick) => { 431 return { 432 [start]: tick[start] 433 }; 434 }; 435 if (this.dualKnobs === false) { 436 if (this.valA < ((_a = this.activeBarStart) !== null && _a !== void 0 ? _a : this.min)) { 437 barStart = `${ratioUpper * 100}%`; 438 barEnd = `${100 - ratioLower * 100}%`; 439 } else { 440 barStart = `${ratioLower * 100}%`; 441 barEnd = `${100 - ratioUpper * 100}%`; 442 } 443 } 444 const barStyle = { 445 [start]: barStart, 446 [end]: barEnd 447 }; 448 const ticks = []; 449 if (this.snaps && this.ticks) { 450 for (let value = min; value <= max; value += step) { 451 const ratio = valueToRatio(value, min, max); 452 const ratioMin = Math.min(ratioLower, ratioUpper); 453 const ratioMax = Math.max(ratioLower, ratioUpper); 454 const tick = { 455 ratio, 456 /** 457 * Sets the tick mark as active when the tick is between the min bounds and the knob. 458 * When using activeBarStart, the tick mark will be active between the knob and activeBarStart. 459 */ 460 active: ratio >= ratioMin && ratio <= ratioMax 461 }; 462 tick[start] = `${ratio * 100}%`; 463 ticks.push(tick); 464 } 465 } 466 let labelledBy; 467 if (!this.legacyFormController.hasLegacyControl() && this.hasLabel) { 468 labelledBy = "range-label"; 469 } 470 return h("div", { class: "range-slider", ref: (rangeEl) => this.rangeSlider = rangeEl }, ticks.map((tick) => h("div", { style: tickStyle(tick), role: "presentation", class: { 471 "range-tick": true, 472 "range-tick-active": tick.active 473 }, part: tick.active ? "tick-active" : "tick" })), h("div", { class: "range-bar-container" }, h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: { 474 "range-bar": true, 475 "range-bar-active": true, 476 "has-ticks": ticks.length > 0 477 }, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, { 478 knob: "A", 479 pressed: pressedKnob === "A", 480 value: this.valA, 481 ratio: this.ratioA, 482 pin, 483 pinFormatter, 484 disabled, 485 handleKeyboard, 486 min, 487 max, 488 labelText, 489 labelledBy 490 }), this.dualKnobs && renderKnob(rtl, { 491 knob: "B", 492 pressed: pressedKnob === "B", 493 value: this.valB, 494 ratio: this.ratioB, 495 pin, 496 pinFormatter, 497 disabled, 498 handleKeyboard, 499 min, 500 max, 501 labelText, 502 labelledBy 503 })); 504 } 505 render() { 506 const { legacyFormController } = this; 507 return legacyFormController.hasLegacyControl() ? this.renderLegacyRange() : this.renderRange(); 508 } 509 get el() { 510 return getElement(this); 511 } 512 static get watchers() { 513 return { 514 "debounce": ["debounceChanged"], 515 "min": ["minChanged"], 516 "max": ["maxChanged"], 517 "activeBarStart": ["activeBarStartChanged"], 518 "disabled": ["disabledChanged"], 519 "value": ["valueChanged"] 520 }; 521 } 522}; 523var renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, labelText, labelledBy, pinFormatter }) => { 524 const start = rtl ? "right" : "left"; 525 const knobStyle = () => { 526 const style = {}; 527 style[start] = `${ratio * 100}%`; 528 return style; 529 }; 530 return h("div", { onKeyDown: (ev) => {
531 const key = ev.key; 532 if (key === "ArrowLeft" || key === "ArrowDown") { 533 handleKeyboard(knob, false); 534 ev.preventDefault(); 535 ev.stopPropagation(); 536 } else if (key === "ArrowRight" || key === "ArrowUp") { 537 handleKeyboard(knob, true); 538 ev.preventDefault(); 539 ev.stopPropagation(); 540 } 541 }, class: { 542 "range-knob-handle": true, 543 "range-knob-a": knob === "A", 544 "range-knob-b": knob === "B", 545 "range-knob-pressed": pressed, 546 "range-knob-min": value === min, 547 "range-knob-max": value === max, 548 "ion-activatable": true, 549 "ion-focusable": true 550 }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": labelledBy === void 0 ? labelText : null, "aria-labelledby": labelledBy !== void 0 ? labelledBy : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? "true" : null, "aria-valuenow": value }, pin && h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value)), h("div", { class: "range-knob", role: "presentation", part: "knob" })); 551}; 552var ratioToValue = (ratio, min, max, step) => { 553 let value = (max - min) * ratio; 554 if (step > 0) { 555 value = Math.round(value / step) * step + min; 556 } 557 const clampedValue = clamp(min, value, max); 558 return roundToMaxDecimalPlaces(clampedValue, min, max, step); 559}; 560var valueToRatio = (value, min, max) => { 561 return clamp(0, (value - min) / (max - min), 1); 562}; 563var rangeIds = 0; 564Range.style = { 565 ios: rangeIosCss, 566 md: rangeMdCss 567}; 568export { 569 Range as ion_range 570};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.