@zoff-tech/zt-bottom-drawer
Version:
Bottom Drawer / Web Component
5 lines • 27.5 kB
JavaScript
import{r as t,d as e,h as n,H as r,e as i}from"./p-f6c816ce.js";import{findClosestIonContent as a,disableContentScrollY as s,resetContentScrollY as o}from"@utils/content";import{createLegacyFormController as l}from"@utils/forms";import{clamp as h,debounceEvent as d,inheritAriaAttributes as g,renderHiddenInput as b,getAriaLabel as p}from"@utils/helpers";import{printIonWarning as c}from"@utils/logging";import{isRTL as u}from"@utils/rtl";import{createColorClasses as f,hostContext as m}from"@utils/theme";import{g as k}from"./p-0b9b2444.js";
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/function v(t){if(t%1===0)return 0;return t.toString().split(".")[1].length}function x(t,...e){const n=Math.max(...e.map((t=>v(t))));return Number(t.toFixed(n))}const w=":host{--knob-handle-size:calc(var(--knob-size) * 2);display:flex;position:relative;flex:3;align-items:center;font-family:var(--ion-font-family, inherit);user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;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);position:absolute;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);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){align-self:center}.range-wrapper{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit}::slotted([slot=label]){max-width:200px;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:flex;flex-grow:1;align-items:center}:host(.range-label-placement-start) .range-wrapper{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{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{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}: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(.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){padding-top:20px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.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{transform:translate3d(0, 28px, 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;display:inline-block;position:relative;top:-20px;min-width:28px;transition:transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:12px;text-align:center}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{transform:translate3d(0, 0, 0) scale(1)}:host(.range-disabled){opacity:0.3}";const y=':host{--knob-handle-size:calc(var(--knob-size) * 2);display:flex;position:relative;flex:3;align-items:center;font-family:var(--ion-font-family, inherit);user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;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);position:absolute;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);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){align-self:center}.range-wrapper{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit}::slotted([slot=label]){max-width:200px;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:flex;flex-grow:1;align-items:center}:host(.range-label-placement-start) .range-wrapper{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{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{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}: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);font-size:12px}::slotted([slot=label]),.label-text{font-size:initial}: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}: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){padding-top:28px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-knob{transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease;z-index:2}.range-knob::before{border-radius:50%;position:absolute;width:var(--knob-size);height:var(--knob-size);transform:scale(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%;transform:translate3d(0, 0, 0) scale(0.01);display:inline-block;position:relative;min-width:28px;height:28px;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);text-align:center}.range-pin::before{top:3px;-webkit-margin-start:-13px;margin-inline-start:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;transform:rotate(-45deg);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{transform:translate3d(0, -24px, 0) scale(1)}@media (any-hover: hover){.range-knob-handle:hover .range-knob:before{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{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{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{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}';const z=class{constructor(n){t(this,n);this.ionChange=e(this,"ionChange",7);this.ionInput=e(this,"ionInput",7);this.ionStyle=e(this,"ionStyle",7);this.ionFocus=e(this,"ionFocus",7);this.ionBlur=e(this,"ionBlur",7);this.ionKnobMoveStart=e(this,"ionKnobMoveStart",7);this.ionKnobMoveEnd=e(this,"ionKnobMoveEnd",7);this.rangeId=`ion-r-${M++}`;this.didLoad=false;this.noUpdate=false;this.hasFocus=false;this.inheritedAttributes={};this.contentEl=null;this.initialContentScrollY=true;this.hasLoggedDeprecationWarning=false;this.clampBounds=t=>h(this.min,t,this.max);this.ensureValueInBounds=t=>{if(this.dualKnobs){return{lower:this.clampBounds(t.lower),upper:this.clampBounds(t.upper)}}else{return this.clampBounds(t)}};this.setupGesture=async()=>{const t=this.rangeSlider;if(t){this.gesture=(await import("./p-0c0b0519.js")).createGesture({el:t,gestureName:"range",gesturePriority:100,threshold:0,onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)});this.gesture.enable(!this.disabled)}};this.handleKeyboard=(t,e)=>{const{ensureValueInBounds:n}=this;let r=this.step;r=r>0?r:1;r=r/(this.max-this.min);if(!e){r*=-1}if(t==="A"){this.ratioA=h(0,this.ratioA+r,1)}else{this.ratioB=h(0,this.ratioB+r,1)}this.ionKnobMoveStart.emit({value:n(this.value)});this.updateValue();this.emitValueChange();this.ionKnobMoveEnd.emit({value:n(this.value)})};this.onBlur=()=>{if(this.hasFocus){this.hasFocus=false;this.ionBlur.emit();this.emitStyle()}};this.onFocus=()=>{if(!this.hasFocus){this.hasFocus=true;this.ionFocus.emit();this.emitStyle()}};this.ratioA=0;this.ratioB=0;this.pressedKnob=undefined;this.color=undefined;this.debounce=undefined;this.name=this.rangeId;this.label=undefined;this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.pinFormatter=t=>Math.round(t);this.snaps=false;this.step=1;this.ticks=true;this.activeBarStart=undefined;this.disabled=false;this.value=0;this.labelPlacement="start";this.legacy=undefined}debounceChanged(){const{ionInput:t,debounce:e,originalIonInput:n}=this;this.ionInput=e===undefined?n!==null&&n!==void 0?n:t:d(t,e)}minChanged(){if(!this.noUpdate){this.updateRatio()}}maxChanged(){if(!this.noUpdate){this.updateRatio()}}activeBarStartChanged(){const{activeBarStart:t}=this;if(t!==undefined){if(t>this.max){c(`Range: The value of activeBarStart (${t}) 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);this.activeBarStart=this.max}else if(t<this.min){c(`Range: The value of activeBarStart (${t}) 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);this.activeBarStart=this.min}}}disabledChanged(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()}valueChanged(){if(!this.noUpdate){this.updateRatio()}}componentWillLoad(){if(this.el.hasAttribute("id")){this.rangeId=this.el.getAttribute("id")}this.inheritedAttributes=g(this.el)}componentDidLoad(){this.originalIonInput=this.ionInput;this.setupGesture();this.didLoad=true}connectedCallback(){const{el:t}=this;this.legacyFormController=l(t);this.updateRatio();this.debounceChanged();this.disabledChanged();this.activeBarStartChanged();if(this.didLoad){this.setupGesture()}this.contentEl=a(this.el)}disconnectedCallback(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}}getValue(){var t;const e=(t=this.value)!==null&&t!==void 0?t:0;if(this.dualKnobs){if(typeof e==="object"){return e}return{lower:0,upper:e}}else{if(typeof e==="object"){return e.upper}return e}}emitStyle(){if(this.legacyFormController.hasLegacyControl()){this.ionStyle.emit({interactive:true,"interactive-disabled":this.disabled})}}emitValueChange(){this.value=this.ensureValueInBounds(this.value);this.ionChange.emit({value:this.value})}onStart(t){const{contentEl:e}=this;if(e){this.initialContentScrollY=s(e)}const n=this.rect=this.rangeSlider.getBoundingClientRect();const r=t.currentX;let i=h(0,(r-n.left)/n.width,1);if(u(this.el)){i=1-i}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-i)<Math.abs(this.ratioB-i)?"A":"B";this.setFocus(this.pressedKnob);this.update(r);this.ionKnobMoveStart.emit({value:this.ensureValueInBounds(this.value)})}onMove(t){this.update(t.currentX)}onEnd(t){const{contentEl:e,initialContentScrollY:n}=this;if(e){o(e,n)}this.update(t.currentX);this.pressedKnob=undefined;this.emitValueChange();this.ionKnobMoveEnd.emit({value:this.ensureValueInBounds(this.value)})}update(t){const e=this.rect;let n=h(0,(t-e.left)/e.width,1);if(u(this.el)){n=1-n}if(this.snaps){n=S(C(n,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=n}else{this.ratioB=n}this.updateValue()}get valA(){return C(this.ratioA,this.min,this.max,this.step)}get valB(){return C(this.ratioB,this.min,this.max,this.step)}get ratioLower(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}const{activeBarStart:t}=this;if(t==null){return 0}return S(t,this.min,this.max)}get ratioUpper(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA}updateRatio(){const t=this.getValue();const{min:e,max:n}=this;if(this.dualKnobs){this.ratioA=S(t.lower,e,n);this.ratioB=S(t.upper,e,n)}else{this.ratioA=S(t,e,n)}}updateValue(){this.noUpdate=true;const{valA:t,valB:e}=this;this.value=!this.dualKnobs?t:{lower:Math.min(t,e),upper:Math.max(t,e)};this.ionInput.emit({value:this.value});this.noUpdate=false}setFocus(t){if(this.el.shadowRoot){const e=this.el.shadowRoot.querySelector(t==="A"?".range-knob-a":".range-knob-b");if(e){e.focus()}}}renderLegacyRange(){if(!this.hasLoggedDeprecationWarning){c(`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.\n\nExample: <ion-range><div slot="label">Volume</div></ion-range>\nExample with aria-label: <ion-range aria-label="Volume"></ion-range>\n\nDevelopers 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);if(this.legacy){c(`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.\n\nDevelopers can dismiss this warning by removing their usage of the "legacy" property and using the new range syntax.`,this.el)}this.hasLoggedDeprecationWarning=true}const{el:t,pressedKnob:e,disabled:i,pin:a,rangeId:s}=this;const o=k(this);b(true,t,this.name,JSON.stringify(this.getValue()),i);return n(r,{onFocusin:this.onFocus,onFocusout:this.onBlur,id:s,class:f(this.color,{[o]:true,"in-item":m("ion-item",t),"range-disabled":i,"range-pressed":e!==undefined,"range-has-pin":a,"legacy-range":true})},n("slot",{name:"start"}),this.renderRangeSlider(),n("slot",{name:"end"}))}renderRange(){const{disabled:t,el:e,rangeId:i,pin:a,pressedKnob:s,labelPlacement:o,label:l}=this;const h=k(this);b(true,e,this.name,JSON.stringify(this.getValue()),t);return n(r,{onFocusin:this.onFocus,onFocusout:this.onBlur,id:i,class:f(this.color,{[h]:true,"in-item":m("ion-item",e),"range-disabled":t,"range-pressed":s!==undefined,"range-has-pin":a,[`range-label-placement-${o}`]:true})},n("label",{class:"range-wrapper",id:"range-label"},n("div",{class:{"label-text-wrapper":true,"label-text-wrapper-hidden":!this.hasLabel}},l!==undefined?n("div",{class:"label-text"},l):n("slot",{name:"label"})),n("div",{class:"native-wrapper"},n("slot",{name:"start"}),this.renderRangeSlider(),n("slot",{name:"end"}))))}get hasLabel(){return this.label!==undefined||this.el.querySelector('[slot="label"]')!==null}renderRangeSlider(){var t;const{min:e,max:r,step:i,el:a,handleKeyboard:s,pressedKnob:o,disabled:l,pin:h,ratioLower:d,ratioUpper:g,inheritedAttributes:b,rangeId:c,pinFormatter:f}=this;let{labelText:m}=p(a,c);if(m===undefined||m===null){m=b["aria-label"]}let k=`${d*100}%`;let v=`${100-g*100}%`;const x=u(this.el);const w=x?"right":"left";const y=x?"left":"right";const z=t=>({[w]:t[w]});if(this.dualKnobs===false){if(this.valA<((t=this.activeBarStart)!==null&&t!==void 0?t:this.min)){k=`${g*100}%`;v=`${100-d*100}%`}else{k=`${d*100}%`;v=`${100-g*100}%`}}const C={[w]:k,[y]:v};const M=[];if(this.snaps&&this.ticks){for(let t=e;t<=r;t+=i){const n=S(t,e,r);const i=Math.min(d,g);const a=Math.max(d,g);const s={ratio:n,active:n>=i&&n<=a};s[w]=`${n*100}%`;M.push(s)}}let A;if(!this.legacyFormController.hasLegacyControl()&&this.hasLabel){A="range-label"}return n("div",{class:"range-slider",ref:t=>this.rangeSlider=t},M.map((t=>n("div",{style:z(t),role:"presentation",class:{"range-tick":true,"range-tick-active":t.active},part:t.active?"tick-active":"tick"}))),n("div",{class:"range-bar-container"},n("div",{class:"range-bar",role:"presentation",part:"bar"}),n("div",{class:{"range-bar":true,"range-bar-active":true,"has-ticks":M.length>0},role:"presentation",style:C,part:"bar-active"})),B(x,{knob:"A",pressed:o==="A",value:this.valA,ratio:this.ratioA,pin:h,pinFormatter:f,disabled:l,handleKeyboard:s,min:e,max:r,labelText:m,labelledBy:A}),this.dualKnobs&&B(x,{knob:"B",pressed:o==="B",value:this.valB,ratio:this.ratioB,pin:h,pinFormatter:f,disabled:l,handleKeyboard:s,min:e,max:r,labelText:m,labelledBy:A}))}render(){const{legacyFormController:t}=this;return t.hasLegacyControl()?this.renderLegacyRange():this.renderRange()}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],activeBarStart:["activeBarStartChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const B=(t,{knob:e,value:r,ratio:i,min:a,max:s,disabled:o,pressed:l,pin:h,handleKeyboard:d,labelText:g,labelledBy:b,pinFormatter:p})=>{const c=t?"right":"left";const u=()=>{const t={};t[c]=`${i*100}%`;return t};return n("div",{onKeyDown:t=>{const n=t.key;if(n==="ArrowLeft"||n==="ArrowDown"){d(e,false);t.preventDefault();t.stopPropagation()}else if(n==="ArrowRight"||n==="ArrowUp"){d(e,true);t.preventDefault();t.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":e==="A","range-knob-b":e==="B","range-knob-pressed":l,"range-knob-min":r===a,"range-knob-max":r===s,"ion-activatable":true,"ion-focusable":true},style:u(),role:"slider",tabindex:o?-1:0,"aria-label":b===undefined?g:null,"aria-labelledby":b!==undefined?b:null,"aria-valuemin":a,"aria-valuemax":s,"aria-disabled":o?"true":null,"aria-valuenow":r},h&&n("div",{class:"range-pin",role:"presentation",part:"pin"},p(r)),n("div",{class:"range-knob",role:"presentation",part:"knob"}))};const C=(t,e,n,r)=>{let i=(n-e)*t;if(r>0){i=Math.round(i/r)*r+e}const a=h(e,i,n);return x(a,e,n,r)};const S=(t,e,n)=>h(0,(t-e)/(n-e),1);let M=0;z.style={ios:w,md:y};export{z as ion_range};
//# sourceMappingURL=p-5d53c5a8.entry.js.map