@ionic/core 8.7.17-dev.11770147425.1bfcd5e5 → 8.7.17-dev.11770405784.157a3c10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ion-range.js +39 -97
- package/components/ion-segment-view.js +11 -5
- package/components/ion-select.js +3 -2
- package/components/select-modal.js +6 -1
- package/dist/cjs/ion-range.cjs.entry.js +39 -95
- package/dist/cjs/ion-segment-view.cjs.entry.js +10 -5
- package/dist/cjs/ion-select-modal.cjs.entry.js +5 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +3 -2
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/range/range.js +42 -116
- package/dist/collection/components/segment-view/segment-view.ios.css +2 -1
- package/dist/collection/components/segment-view/segment-view.js +28 -3
- package/dist/collection/components/segment-view/segment-view.md.css +2 -1
- package/dist/collection/components/select/select.js +3 -2
- package/dist/collection/components/select-modal/select-modal.js +25 -1
- package/dist/docs.json +64 -134
- package/dist/esm/ion-range.entry.js +39 -95
- package/dist/esm/ion-segment-view.entry.js +10 -5
- package/dist/esm/ion-select-modal.entry.js +5 -1
- package/dist/esm/ion-select_3.entry.js +3 -2
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/html.html-data.json +8 -0
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-012212e4.entry.js +4 -0
- package/dist/ionic/p-88367362.entry.js +4 -0
- package/dist/ionic/p-9a2d390d.entry.js +4 -0
- package/dist/ionic/p-d2489bf2.entry.js +4 -0
- package/dist/types/components/range/range-interface.d.ts +0 -1
- package/dist/types/components/range/range.d.ts +4 -24
- package/dist/types/components/segment-view/segment-view.d.ts +4 -0
- package/dist/types/components/select-modal/select-modal.d.ts +4 -0
- package/dist/types/components.d.ts +20 -0
- package/hydrate/index.js +62 -124
- package/hydrate/index.mjs +62 -124
- package/package.json +1 -1
- package/dist/ionic/p-020af078.entry.js +0 -4
- package/dist/ionic/p-02d76786.entry.js +0 -4
- package/dist/ionic/p-b0c2f1f1.entry.js +0 -4
- package/dist/ionic/p-eb024a5b.entry.js +0 -4
package/hydrate/index.mjs
CHANGED
|
@@ -28715,29 +28715,13 @@ const rangeMdCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:
|
|
|
28715
28715
|
* @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
|
|
28716
28716
|
* @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
|
|
28717
28717
|
*
|
|
28718
|
-
* @part label - The label text describing the range.
|
|
28719
28718
|
* @part tick - An inactive tick mark.
|
|
28720
28719
|
* @part tick-active - An active tick mark.
|
|
28720
|
+
* @part pin - The counter that appears above a knob.
|
|
28721
|
+
* @part knob - The handle that is used to drag the range.
|
|
28721
28722
|
* @part bar - The inactive part of the bar.
|
|
28722
28723
|
* @part bar-active - The active part of the bar.
|
|
28723
|
-
* @part
|
|
28724
|
-
* @part knob-handle-a - The container element for the first knob. Only available when `dualKnobs` is `true`.
|
|
28725
|
-
* @part knob-handle-b - The container element for the second knob. Only available when `dualKnobs` is `true`.
|
|
28726
|
-
* @part knob-handle-lower - The container element for the lower knob. Only available when `dualKnobs` is `true`.
|
|
28727
|
-
* @part knob-handle-upper - The container element for the upper knob. Only available when `dualKnobs` is `true`.
|
|
28728
|
-
* @part pin - The counter that appears above a knob.
|
|
28729
|
-
* @part pin-a - The counter that appears above the first knob. Only available when `dualKnobs` is `true`.
|
|
28730
|
-
* @part pin-b - The counter that appears above the second knob. Only available when `dualKnobs` is `true`.
|
|
28731
|
-
* @part pin-lower - The counter that appears above the lower knob. Only available when `dualKnobs` is `true`.
|
|
28732
|
-
* @part pin-upper - The counter that appears above the upper knob. Only available when `dualKnobs` is `true`.
|
|
28733
|
-
* @part knob - The visual knob element that appears on the range track.
|
|
28734
|
-
* @part knob-a - The visual knob element for the first knob. Only available when `dualKnobs` is `true`.
|
|
28735
|
-
* @part knob-b - The visual knob element for the second knob. Only available when `dualKnobs` is `true`.
|
|
28736
|
-
* @part knob-lower - The visual knob element for the lower knob. Only available when `dualKnobs` is `true`.
|
|
28737
|
-
* @part knob-upper - The visual knob element for the upper knob. Only available when `dualKnobs` is `true`.
|
|
28738
|
-
* @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
|
|
28739
|
-
* @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
|
|
28740
|
-
* @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time.
|
|
28724
|
+
* @part label - The label text describing the range.
|
|
28741
28725
|
*/
|
|
28742
28726
|
class Range {
|
|
28743
28727
|
constructor(hostRef) {
|
|
@@ -28755,7 +28739,6 @@ class Range {
|
|
|
28755
28739
|
this.inheritedAttributes = {};
|
|
28756
28740
|
this.contentEl = null;
|
|
28757
28741
|
this.initialContentScrollY = true;
|
|
28758
|
-
this.focusFromPointer = false;
|
|
28759
28742
|
this.ratioA = 0;
|
|
28760
28743
|
this.ratioB = 0;
|
|
28761
28744
|
/**
|
|
@@ -28887,7 +28870,6 @@ class Range {
|
|
|
28887
28870
|
this.onBlur = () => {
|
|
28888
28871
|
if (this.hasFocus) {
|
|
28889
28872
|
this.hasFocus = false;
|
|
28890
|
-
this.focusedKnob = undefined;
|
|
28891
28873
|
this.ionBlur.emit();
|
|
28892
28874
|
}
|
|
28893
28875
|
};
|
|
@@ -28898,20 +28880,21 @@ class Range {
|
|
|
28898
28880
|
}
|
|
28899
28881
|
};
|
|
28900
28882
|
this.onKnobFocus = (knob) => {
|
|
28901
|
-
// Clicking focuses the range which is needed for the keyboard,
|
|
28902
|
-
// but we only want to add the ion-focused class when focused via Tab.
|
|
28903
|
-
if (!this.focusFromPointer) {
|
|
28904
|
-
this.focusedKnob = knob;
|
|
28905
|
-
}
|
|
28906
|
-
else {
|
|
28907
|
-
this.focusFromPointer = false;
|
|
28908
|
-
this.focusedKnob = undefined;
|
|
28909
|
-
}
|
|
28910
|
-
// If the knob was not already focused, emit the focus event
|
|
28911
28883
|
if (!this.hasFocus) {
|
|
28912
28884
|
this.hasFocus = true;
|
|
28913
28885
|
this.ionFocus.emit();
|
|
28914
28886
|
}
|
|
28887
|
+
// Manually manage ion-focused class for dual knobs
|
|
28888
|
+
if (this.dualKnobs && this.el.shadowRoot) {
|
|
28889
|
+
const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
|
|
28890
|
+
const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
|
|
28891
|
+
// Remove ion-focused from both knobs first
|
|
28892
|
+
knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
|
|
28893
|
+
knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
|
|
28894
|
+
// Add ion-focused only to the focused knob
|
|
28895
|
+
const focusedKnobEl = knob === 'A' ? knobA : knobB;
|
|
28896
|
+
focusedKnobEl === null || focusedKnobEl === void 0 ? void 0 : focusedKnobEl.classList.add('ion-focused');
|
|
28897
|
+
}
|
|
28915
28898
|
};
|
|
28916
28899
|
this.onKnobBlur = () => {
|
|
28917
28900
|
// Check if focus is moving to another knob within the same range
|
|
@@ -28923,18 +28906,18 @@ class Range {
|
|
|
28923
28906
|
if (!isStillFocusedOnKnob) {
|
|
28924
28907
|
if (this.hasFocus) {
|
|
28925
28908
|
this.hasFocus = false;
|
|
28926
|
-
this.focusedKnob = undefined;
|
|
28927
28909
|
this.ionBlur.emit();
|
|
28928
28910
|
}
|
|
28911
|
+
// Remove ion-focused from both knobs when focus leaves the range
|
|
28912
|
+
if (this.dualKnobs && this.el.shadowRoot) {
|
|
28913
|
+
const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
|
|
28914
|
+
const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
|
|
28915
|
+
knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
|
|
28916
|
+
knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
|
|
28917
|
+
}
|
|
28929
28918
|
}
|
|
28930
28919
|
}, 0);
|
|
28931
28920
|
};
|
|
28932
|
-
this.onKnobMouseEnter = (knob) => {
|
|
28933
|
-
this.hoveredKnob = knob;
|
|
28934
|
-
};
|
|
28935
|
-
this.onKnobMouseLeave = () => {
|
|
28936
|
-
this.hoveredKnob = undefined;
|
|
28937
|
-
};
|
|
28938
28921
|
}
|
|
28939
28922
|
debounceChanged() {
|
|
28940
28923
|
const { ionInput, debounce, originalIonInput } = this;
|
|
@@ -29188,6 +29171,7 @@ class Range {
|
|
|
29188
29171
|
ratio = 1 - ratio;
|
|
29189
29172
|
}
|
|
29190
29173
|
this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
|
|
29174
|
+
this.setFocus(this.pressedKnob);
|
|
29191
29175
|
}
|
|
29192
29176
|
get valA() {
|
|
29193
29177
|
return ratioToValue(this.ratioA, this.min, this.max, this.step);
|
|
@@ -29214,23 +29198,9 @@ class Range {
|
|
|
29214
29198
|
updateRatio() {
|
|
29215
29199
|
const value = this.getValue();
|
|
29216
29200
|
const { min, max } = this;
|
|
29217
|
-
/**
|
|
29218
|
-
* For dual knobs, value gives lower/upper but not which is A vs B.
|
|
29219
|
-
* Assign (lowerRatio, upperRatio) to (ratioA, ratioB) in the way that
|
|
29220
|
-
* minimizes change from the current ratios so the knobs don't swap.
|
|
29221
|
-
*/
|
|
29222
29201
|
if (this.dualKnobs) {
|
|
29223
|
-
|
|
29224
|
-
|
|
29225
|
-
if (Math.abs(this.ratioA - lowerRatio) + Math.abs(this.ratioB - upperRatio) <=
|
|
29226
|
-
Math.abs(this.ratioA - upperRatio) + Math.abs(this.ratioB - lowerRatio)) {
|
|
29227
|
-
this.ratioA = lowerRatio;
|
|
29228
|
-
this.ratioB = upperRatio;
|
|
29229
|
-
}
|
|
29230
|
-
else {
|
|
29231
|
-
this.ratioA = upperRatio;
|
|
29232
|
-
this.ratioB = lowerRatio;
|
|
29233
|
-
}
|
|
29202
|
+
this.ratioA = valueToRatio(value.lower, min, max);
|
|
29203
|
+
this.ratioB = valueToRatio(value.upper, min, max);
|
|
29234
29204
|
}
|
|
29235
29205
|
else {
|
|
29236
29206
|
this.ratioA = valueToRatio(value, min, max);
|
|
@@ -29247,6 +29217,14 @@ class Range {
|
|
|
29247
29217
|
};
|
|
29248
29218
|
this.noUpdate = false;
|
|
29249
29219
|
}
|
|
29220
|
+
setFocus(knob) {
|
|
29221
|
+
if (this.el.shadowRoot) {
|
|
29222
|
+
const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b');
|
|
29223
|
+
if (knobEl) {
|
|
29224
|
+
knobEl.focus();
|
|
29225
|
+
}
|
|
29226
|
+
}
|
|
29227
|
+
}
|
|
29250
29228
|
/**
|
|
29251
29229
|
* Returns true if content was passed to the "start" slot
|
|
29252
29230
|
*/
|
|
@@ -29264,7 +29242,7 @@ class Range {
|
|
|
29264
29242
|
}
|
|
29265
29243
|
renderRangeSlider() {
|
|
29266
29244
|
var _a;
|
|
29267
|
-
const { min, max, step, handleKeyboard,
|
|
29245
|
+
const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
|
|
29268
29246
|
let barStart = `${ratioLower * 100}%`;
|
|
29269
29247
|
let barEnd = `${100 - ratioUpper * 100}%`;
|
|
29270
29248
|
const rtl = isRTL$1(this.el);
|
|
@@ -29324,9 +29302,7 @@ class Range {
|
|
|
29324
29302
|
ticks.push(tick);
|
|
29325
29303
|
}
|
|
29326
29304
|
}
|
|
29327
|
-
return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
|
|
29328
|
-
this.focusFromPointer = true;
|
|
29329
|
-
},
|
|
29305
|
+
return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
|
|
29330
29306
|
/**
|
|
29331
29307
|
* Since the gesture has a threshold, the value
|
|
29332
29308
|
* won't change until the user has dragged past
|
|
@@ -29339,7 +29315,6 @@ class Range {
|
|
|
29339
29315
|
* we need to listen for the "pointerUp" event.
|
|
29340
29316
|
*/
|
|
29341
29317
|
onPointerUp: (ev) => {
|
|
29342
|
-
this.focusFromPointer = false;
|
|
29343
29318
|
/**
|
|
29344
29319
|
* If the user drags the knob on the web
|
|
29345
29320
|
* version (does not occur on mobile),
|
|
@@ -29365,10 +29340,6 @@ class Range {
|
|
|
29365
29340
|
'has-ticks': ticks.length > 0,
|
|
29366
29341
|
}, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, {
|
|
29367
29342
|
knob: 'A',
|
|
29368
|
-
position: this.dualKnobs ? (this.ratioA <= this.ratioB ? 'lower' : 'upper') : 'lower',
|
|
29369
|
-
dualKnobs: this.dualKnobs,
|
|
29370
|
-
focused: focusedKnob === 'A',
|
|
29371
|
-
hovered: hoveredKnob === 'A',
|
|
29372
29343
|
pressed: pressedKnob === 'A',
|
|
29373
29344
|
value: this.valA,
|
|
29374
29345
|
ratio: this.ratioA,
|
|
@@ -29381,15 +29352,9 @@ class Range {
|
|
|
29381
29352
|
inheritedAttributes,
|
|
29382
29353
|
onKnobFocus: this.onKnobFocus,
|
|
29383
29354
|
onKnobBlur: this.onKnobBlur,
|
|
29384
|
-
onKnobMouseEnter: this.onKnobMouseEnter,
|
|
29385
|
-
onKnobMouseLeave: this.onKnobMouseLeave,
|
|
29386
29355
|
}), this.dualKnobs &&
|
|
29387
29356
|
renderKnob(rtl, {
|
|
29388
29357
|
knob: 'B',
|
|
29389
|
-
position: this.ratioB <= this.ratioA ? 'lower' : 'upper',
|
|
29390
|
-
dualKnobs: this.dualKnobs,
|
|
29391
|
-
focused: focusedKnob === 'B',
|
|
29392
|
-
hovered: hoveredKnob === 'B',
|
|
29393
29358
|
pressed: pressedKnob === 'B',
|
|
29394
29359
|
value: this.valB,
|
|
29395
29360
|
ratio: this.ratioB,
|
|
@@ -29402,8 +29367,6 @@ class Range {
|
|
|
29402
29367
|
inheritedAttributes,
|
|
29403
29368
|
onKnobFocus: this.onKnobFocus,
|
|
29404
29369
|
onKnobBlur: this.onKnobBlur,
|
|
29405
|
-
onKnobMouseEnter: this.onKnobMouseEnter,
|
|
29406
|
-
onKnobMouseLeave: this.onKnobMouseLeave,
|
|
29407
29370
|
})));
|
|
29408
29371
|
}
|
|
29409
29372
|
render() {
|
|
@@ -29429,11 +29392,10 @@ class Range {
|
|
|
29429
29392
|
const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
|
|
29430
29393
|
const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
|
|
29431
29394
|
renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
|
|
29432
|
-
return (hAsync(Host, { key: '
|
|
29395
|
+
return (hAsync(Host, { key: 'ed646a42d51b8fe22012198c354cbcf5a389c108', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
|
|
29433
29396
|
[mode]: true,
|
|
29434
29397
|
'in-item': inItem,
|
|
29435
29398
|
'range-disabled': disabled,
|
|
29436
|
-
'range-dual-knobs': dualKnobs,
|
|
29437
29399
|
'range-pressed': pressedKnob !== undefined,
|
|
29438
29400
|
'range-has-pin': pin,
|
|
29439
29401
|
[`range-label-placement-${labelPlacement}`]: true,
|
|
@@ -29441,10 +29403,10 @@ class Range {
|
|
|
29441
29403
|
'range-item-end-adjustment': needsEndAdjustment,
|
|
29442
29404
|
'range-value-min': valueAtMin,
|
|
29443
29405
|
'range-value-max': valueAtMax,
|
|
29444
|
-
}) }, hAsync("label", { key: '
|
|
29406
|
+
}) }, hAsync("label", { key: '3083e4f2a624e3b268396acb4415f7c6ac44d851', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '47b92f94d2a0381dd7c5cd3dda54ed2942096715', class: {
|
|
29445
29407
|
'label-text-wrapper': true,
|
|
29446
29408
|
'label-text-wrapper-hidden': !hasLabel,
|
|
29447
|
-
}, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '
|
|
29409
|
+
}, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '5341da8d19eb29091df680978a0e20cc8f2eec65', class: "native-wrapper" }, hAsync("slot", { key: '09f1437078032676695442d8c827a16faa7dffe2', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '02b7781970ea4d44f10b5f4627a2ca36eca45f85', name: "end" })))));
|
|
29448
29410
|
}
|
|
29449
29411
|
get el() { return getElement(this); }
|
|
29450
29412
|
static get watchers() { return {
|
|
@@ -29482,8 +29444,6 @@ class Range {
|
|
|
29482
29444
|
"labelPlacement": [1, "label-placement"],
|
|
29483
29445
|
"ratioA": [32],
|
|
29484
29446
|
"ratioB": [32],
|
|
29485
|
-
"focusedKnob": [32],
|
|
29486
|
-
"hoveredKnob": [32],
|
|
29487
29447
|
"pressedKnob": [32]
|
|
29488
29448
|
},
|
|
29489
29449
|
"$listeners$": undefined,
|
|
@@ -29491,7 +29451,7 @@ class Range {
|
|
|
29491
29451
|
"$attrsToReflect$": [["color", "color"]]
|
|
29492
29452
|
}; }
|
|
29493
29453
|
}
|
|
29494
|
-
const renderKnob = (rtl, { knob,
|
|
29454
|
+
const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
|
|
29495
29455
|
const start = rtl ? 'right' : 'left';
|
|
29496
29456
|
const knobStyle = () => {
|
|
29497
29457
|
const style = {};
|
|
@@ -29512,50 +29472,16 @@ const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, di
|
|
|
29512
29472
|
ev.preventDefault();
|
|
29513
29473
|
ev.stopPropagation();
|
|
29514
29474
|
}
|
|
29515
|
-
}, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur,
|
|
29475
|
+
}, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
|
|
29516
29476
|
'range-knob-handle': true,
|
|
29517
|
-
'range-knob-
|
|
29518
|
-
'range-knob-
|
|
29477
|
+
'range-knob-a': knob === 'A',
|
|
29478
|
+
'range-knob-b': knob === 'B',
|
|
29519
29479
|
'range-knob-pressed': pressed,
|
|
29520
29480
|
'range-knob-min': value === min,
|
|
29521
29481
|
'range-knob-max': value === max,
|
|
29522
29482
|
'ion-activatable': true,
|
|
29523
29483
|
'ion-focusable': true,
|
|
29524
|
-
|
|
29525
|
-
}, part: [
|
|
29526
|
-
'knob-handle',
|
|
29527
|
-
dualKnobs && knob === 'A' && 'knob-handle-a',
|
|
29528
|
-
dualKnobs && knob === 'B' && 'knob-handle-b',
|
|
29529
|
-
dualKnobs && position === 'lower' && 'knob-handle-lower',
|
|
29530
|
-
dualKnobs && position === 'upper' && 'knob-handle-upper',
|
|
29531
|
-
pressed && 'pressed',
|
|
29532
|
-
focused && 'focused',
|
|
29533
|
-
hovered && 'hover',
|
|
29534
|
-
]
|
|
29535
|
-
.filter(Boolean)
|
|
29536
|
-
.join(' '), style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (hAsync("div", { class: "range-pin", role: "presentation", part: [
|
|
29537
|
-
'pin',
|
|
29538
|
-
dualKnobs && knob === 'A' && 'pin-a',
|
|
29539
|
-
dualKnobs && knob === 'B' && 'pin-b',
|
|
29540
|
-
dualKnobs && position === 'lower' && 'pin-lower',
|
|
29541
|
-
dualKnobs && position === 'upper' && 'pin-upper',
|
|
29542
|
-
pressed && 'pressed',
|
|
29543
|
-
focused && 'focused',
|
|
29544
|
-
hovered && 'hover',
|
|
29545
|
-
]
|
|
29546
|
-
.filter(Boolean)
|
|
29547
|
-
.join(' ') }, pinFormatter(value))), hAsync("div", { class: "range-knob", role: "presentation", part: [
|
|
29548
|
-
'knob',
|
|
29549
|
-
dualKnobs && knob === 'A' && 'knob-a',
|
|
29550
|
-
dualKnobs && knob === 'B' && 'knob-b',
|
|
29551
|
-
dualKnobs && position === 'lower' && 'knob-lower',
|
|
29552
|
-
dualKnobs && position === 'upper' && 'knob-upper',
|
|
29553
|
-
pressed && 'pressed',
|
|
29554
|
-
focused && 'focused',
|
|
29555
|
-
hovered && 'hover',
|
|
29556
|
-
]
|
|
29557
|
-
.filter(Boolean)
|
|
29558
|
-
.join(' ') })));
|
|
29484
|
+
}, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (hAsync("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), hAsync("div", { class: "range-knob", role: "presentation", part: "knob" })));
|
|
29559
29485
|
};
|
|
29560
29486
|
const ratioToValue = (ratio, min, max, step) => {
|
|
29561
29487
|
let value = (max - min) * ratio;
|
|
@@ -33556,9 +33482,9 @@ class SegmentContent {
|
|
|
33556
33482
|
}; }
|
|
33557
33483
|
}
|
|
33558
33484
|
|
|
33559
|
-
const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
|
|
33485
|
+
const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
|
|
33560
33486
|
|
|
33561
|
-
const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
|
|
33487
|
+
const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
|
|
33562
33488
|
|
|
33563
33489
|
class SegmentView {
|
|
33564
33490
|
constructor(hostRef) {
|
|
@@ -33570,6 +33496,10 @@ class SegmentView {
|
|
|
33570
33496
|
* If `true`, the segment view cannot be interacted with.
|
|
33571
33497
|
*/
|
|
33572
33498
|
this.disabled = false;
|
|
33499
|
+
/**
|
|
33500
|
+
* If `true`, users will be able to swipe the segment view to navigate between segment contents.
|
|
33501
|
+
*/
|
|
33502
|
+
this.swipeGesture = true;
|
|
33573
33503
|
}
|
|
33574
33504
|
handleScroll(ev) {
|
|
33575
33505
|
var _a;
|
|
@@ -33657,11 +33587,12 @@ class SegmentView {
|
|
|
33657
33587
|
return Array.from(this.el.querySelectorAll('ion-segment-content'));
|
|
33658
33588
|
}
|
|
33659
33589
|
render() {
|
|
33660
|
-
const { disabled, isManualScroll } = this;
|
|
33661
|
-
return (hAsync(Host, { key: '
|
|
33590
|
+
const { disabled, isManualScroll, swipeGesture } = this;
|
|
33591
|
+
return (hAsync(Host, { key: '565cccce7f0cfc4c71508777cc60292d6f24334f', class: {
|
|
33662
33592
|
'segment-view-disabled': disabled,
|
|
33663
33593
|
'segment-view-scroll-disabled': isManualScroll === false,
|
|
33664
|
-
|
|
33594
|
+
'segment-view-swipe-disabled': swipeGesture === false,
|
|
33595
|
+
} }, hAsync("slot", { key: '4118c240364467302b8f593e33c37837ea5d06f0' })));
|
|
33665
33596
|
}
|
|
33666
33597
|
get el() { return getElement(this); }
|
|
33667
33598
|
static get style() { return {
|
|
@@ -33673,6 +33604,7 @@ class SegmentView {
|
|
|
33673
33604
|
"$tagName$": "ion-segment-view",
|
|
33674
33605
|
"$members$": {
|
|
33675
33606
|
"disabled": [4],
|
|
33607
|
+
"swipeGesture": [4, "swipe-gesture"],
|
|
33676
33608
|
"isManualScroll": [32],
|
|
33677
33609
|
"setContent": [64]
|
|
33678
33610
|
},
|
|
@@ -34179,6 +34111,7 @@ class Select {
|
|
|
34179
34111
|
const mode = getIonMode$1(this);
|
|
34180
34112
|
const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
|
|
34181
34113
|
header: interfaceOptions.header,
|
|
34114
|
+
cancelText: this.cancelText,
|
|
34182
34115
|
multiple,
|
|
34183
34116
|
value,
|
|
34184
34117
|
options: this.createOverlaySelectOptions(this.childOpts, value),
|
|
@@ -34428,7 +34361,7 @@ class Select {
|
|
|
34428
34361
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
34429
34362
|
*/
|
|
34430
34363
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
34431
|
-
return (hAsync(Host, { key: '
|
|
34364
|
+
return (hAsync(Host, { key: 'b7fa907f8fbc54fd63e2d07a9bb5156d94fd5057', onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
34432
34365
|
[mode]: true,
|
|
34433
34366
|
'in-item': inItem,
|
|
34434
34367
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -34446,7 +34379,7 @@ class Select {
|
|
|
34446
34379
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
34447
34380
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
34448
34381
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
34449
|
-
}) }, hAsync("label", { key: '
|
|
34382
|
+
}) }, hAsync("label", { key: '11137e6a8b0374e93923ddb5a4629972ded5f43c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '99e3c09b5e6c2e7be493ed5834f991fffe45cfff', class: "select-wrapper-inner" }, hAsync("slot", { key: '740f0e5a913cb0209d5acae31c33a6ed8f672dfc', name: "start" }), hAsync("div", { key: 'b20e33c8b60915a5194948fcf8e22d7789f0b050', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0199f338185d5fa2cdd977bb20516746bd9ddad5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '3b54de893cc8fc66df8588cee22e30d6f10850b3', class: "select-highlight" })), this.renderBottomContent()));
|
|
34450
34383
|
}
|
|
34451
34384
|
get el() { return getElement(this); }
|
|
34452
34385
|
static get watchers() { return {
|
|
@@ -34541,6 +34474,10 @@ const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-
|
|
|
34541
34474
|
class SelectModal {
|
|
34542
34475
|
constructor(hostRef) {
|
|
34543
34476
|
registerInstance(this, hostRef);
|
|
34477
|
+
/**
|
|
34478
|
+
* The text to display on the cancel button.
|
|
34479
|
+
*/
|
|
34480
|
+
this.cancelText = 'Close';
|
|
34544
34481
|
this.options = [];
|
|
34545
34482
|
}
|
|
34546
34483
|
closeModal() {
|
|
@@ -34607,7 +34544,7 @@ class SelectModal {
|
|
|
34607
34544
|
} }, option.text))));
|
|
34608
34545
|
}
|
|
34609
34546
|
render() {
|
|
34610
|
-
return (hAsync(Host, { key: '
|
|
34547
|
+
return (hAsync(Host, { key: '59ba79ffdbb69befe8e13745450c1071a1fe8c6c', class: getIonMode$1(this) }, hAsync("ion-header", { key: 'fa4d08ee43eec4b9add09d9ffabcba9ed13dd4af' }, hAsync("ion-toolbar", { key: 'b5e26cf092297c51c1dba3ce7963e7b03420393b' }, this.header !== undefined && hAsync("ion-title", { key: 'a8a93cdea4d119d3a17d8cef3878b8a1daa86e26' }, this.header), hAsync("ion-buttons", { key: 'bbc656713b41ef09099ed466f93a9cfbdaceecc1', slot: "end" }, hAsync("ion-button", { key: '80b8751fe4c96e06b620a0b9d17b2d9b3da2faa5', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: 'a251fc00ae4cc7e6b3abe13caa10d95bb515558e' }, hAsync("ion-list", { key: 'bcaf38d6d91accfabb4a9d26783bc0e4801abe3c' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
34611
34548
|
}
|
|
34612
34549
|
get el() { return getElement(this); }
|
|
34613
34550
|
static get style() { return {
|
|
@@ -34620,6 +34557,7 @@ class SelectModal {
|
|
|
34620
34557
|
"$tagName$": "ion-select-modal",
|
|
34621
34558
|
"$members$": {
|
|
34622
34559
|
"header": [1],
|
|
34560
|
+
"cancelText": [1, "cancel-text"],
|
|
34623
34561
|
"multiple": [4],
|
|
34624
34562
|
"options": [16]
|
|
34625
34563
|
},
|
package/package.json
CHANGED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as s,c as t,h as e,d as o,g as l}from"./p-C8IsBmNU.js";import{i}from"./p-C53feagD.js";const n=class{constructor(e){s(this,e),this.ionSegmentViewScroll=t(this,"ionSegmentViewScroll",7),this.scrollEndTimeout=null,this.isTouching=!1,this.disabled=!1}handleScroll(s){var t;const{scrollLeft:e,scrollWidth:o,clientWidth:l}=s.target,n=o-l,a=(i(this.el)?-1:1)*(e/n);this.ionSegmentViewScroll.emit({scrollRatio:a,isManualScroll:null===(t=this.isManualScroll)||void 0===t||t}),this.resetScrollEndTimeout()}handleScrollStart(){this.scrollEndTimeout&&(clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=null),this.isTouching=!0}handleTouchEnd(){this.isTouching=!1}resetScrollEndTimeout(){this.scrollEndTimeout&&(clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=null),this.scrollEndTimeout=setTimeout((()=>{this.checkForScrollEnd()}),100)}checkForScrollEnd(){this.isTouching||(this.isManualScroll=void 0)}async setContent(s,t=!0){const e=this.getSegmentContents().findIndex((t=>t.id===s));if(-1===e)return;this.isManualScroll=!1,this.resetScrollEndTimeout();const o=e*this.el.offsetWidth;this.el.scrollTo({top:0,left:(i(this.el)?-1:1)*o,behavior:t?"smooth":"instant"})}getSegmentContents(){return Array.from(this.el.querySelectorAll("ion-segment-content"))}render(){const{disabled:s,isManualScroll:t}=this;return e(o,{key:"e180b67bb3143a5f4611fb358c037be6fc782a8f",class:{"segment-view-disabled":s,"segment-view-scroll-disabled":!1===t}},e("slot",{key:"41c11d6a7406a10f5c64a2e73abfc072afd8fc73"}))}get el(){return l(this)}};n.style={ios:":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}",md:":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}"};export{n as ion_segment_view}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as o,h as i,i as e,d as c,g as t}from"./p-C8IsBmNU.js";import{b as n}from"./p-BFvmZNyx.js";import{s as a}from"./p-DdR6rpbR.js";import{g as r}from"./p-DiVJyqlX.js";import"./p-ZjP4CjeZ.js";import"./p-CTfR9YZG.js";import"./p-B0q1YL7N.js";import"./p-D-eFFUkA.js";import"./p-BTEOs1at.js";const s=class{constructor(i){o(this,i),this.options=[]}closeModal(){const o=this.el.closest("ion-modal");o&&o.dismiss()}findOptionFromEvent(o){const{options:i}=this;return i.find((i=>i.value===o.target.value))}getValues(o){const{multiple:i,options:e}=this;if(i)return e.filter((o=>o.checked)).map((o=>o.value));const c=o?this.findOptionFromEvent(o):null;return c?c.value:void 0}callOptionHandler(o){const i=this.findOptionFromEvent(o),e=this.getValues(o);(null==i?void 0:i.handler)&&a(i.handler,e)}setChecked(o){const{multiple:i}=this,e=this.findOptionFromEvent(o);i&&e&&(e.checked=o.detail.checked)}renderRadioOptions(){const o=this.options.filter((o=>o.checked)).map((o=>o.value))[0];return i("ion-radio-group",{value:o,onIonChange:o=>this.callOptionHandler(o)},this.options.map((e=>i("ion-item",{lines:"none",class:Object.assign({"item-radio-checked":e.value===o},r(e.cssClass))},i("ion-radio",{value:e.value,disabled:e.disabled,justify:"start",labelPlacement:"end",onClick:()=>this.closeModal(),onKeyUp:o=>{" "===o.key&&this.closeModal()}},e.text)))))}renderCheckboxOptions(){return this.options.map((o=>i("ion-item",{class:Object.assign({"item-checkbox-checked":o.checked},r(o.cssClass))},i("ion-checkbox",{value:o.value,disabled:o.disabled,checked:o.checked,justify:"start",labelPlacement:"end",onIonChange:o=>{this.setChecked(o),this.callOptionHandler(o),e(this)}},o.text))))}render(){return i(c,{key:"b6c0dec240b2e41985b15fdf4e5a6d3a145c1567",class:n(this)},i("ion-header",{key:"cd177e85ee0f62a60a3a708342d6ab6eb19a44dc"},i("ion-toolbar",{key:"aee8222a5a4daa540ad202b2e4cac1ef93d9558c"},void 0!==this.header&&i("ion-title",{key:"5f8fecc764d97bf840d3d4cfddeeccd118ab4436"},this.header),i("ion-buttons",{key:"919033950d7c2b0101f96a9c9698219de9f568ea",slot:"end"},i("ion-button",{key:"34b571cab6dced4bde555a077a21e91800829931",onClick:()=>this.closeModal()},"Close")))),i("ion-content",{key:"3c9153d26ba7a5a03d3b20fcd628d0c3031661a7"},i("ion-list",{key:"e00b222c071bc97c82ad1bba4db95a8a5c43ed6d"},!0===this.multiple?this.renderCheckboxOptions():this.renderRadioOptions())))}get el(){return t(this)}};s.style={ionic:'.sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="container"]{display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}',ios:'.sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:""}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}',md:'.sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="container"]{display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}'};export{s as ion_select_modal}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as e,c as t,f as n,h as a,d as r,g as i}from"./p-C8IsBmNU.js";import{f as o,d as s,r as l}from"./p-CwgG81ZD.js";import{j as h,e as d,d as b,i as g,a as p}from"./p-CTfR9YZG.js";import{i as c}from"./p-C53feagD.js";import{h as m,c as u}from"./p-DiVJyqlX.js";import{b as k}from"./p-BFvmZNyx.js";const f=class{constructor(n){e(this,n),this.ionChange=t(this,"ionChange",7),this.ionInput=t(this,"ionInput",7),this.ionFocus=t(this,"ionFocus",7),this.ionBlur=t(this,"ionBlur",7),this.ionKnobMoveStart=t(this,"ionKnobMoveStart",7),this.ionKnobMoveEnd=t(this,"ionKnobMoveEnd",7),this.rangeId="ion-r-"+y++,this.didLoad=!1,this.noUpdate=!1,this.hasFocus=!1,this.inheritedAttributes={},this.contentEl=null,this.initialContentScrollY=!0,this.focusFromPointer=!1,this.ratioA=0,this.ratioB=0,this.name=this.rangeId,this.dualKnobs=!1,this.min=0,this.max=100,this.pin=!1,this.pinFormatter=e=>Math.round(e),this.snaps=!1,this.step=1,this.ticks=!0,this.disabled=!1,this.value=0,this.compareValues=(e,t)=>"object"==typeof e&&"object"==typeof t?e.lower!==t.lower||e.upper!==t.upper:e!==t,this.clampBounds=e=>d(this.min,e,this.max),this.ensureValueInBounds=e=>this.dualKnobs?{lower:this.clampBounds(e.lower),upper:this.clampBounds(e.upper)}:this.clampBounds(e),this.labelPlacement="start",this.setupGesture=async()=>{const e=this.rangeSlider;e&&(this.gesture=(await import("./p-Cl0B-RWe.js")).createGesture({el:e,gestureName:"range",gesturePriority:100,threshold:10,onStart:()=>this.onStart(),onMove:e=>this.onMove(e),onEnd:e=>this.onEnd(e)}),this.gesture.enable(!this.disabled))},this.handleKeyboard=(e,t)=>{const{ensureValueInBounds:n}=this;let a=this.step;a=a>0?a:1,a/=this.max-this.min,t||(a*=-1),"A"===e?this.ratioA=d(0,this.ratioA+a,1):this.ratioB=d(0,this.ratioB+a,1),this.ionKnobMoveStart.emit({value:n(this.value)}),this.updateValue(),this.emitValueChange(),this.ionKnobMoveEnd.emit({value:n(this.value)})},this.onBlur=()=>{this.hasFocus&&(this.hasFocus=!1,this.focusedKnob=void 0,this.ionBlur.emit())},this.onFocus=()=>{this.hasFocus||(this.hasFocus=!0,this.ionFocus.emit())},this.onKnobFocus=e=>{this.focusFromPointer?(this.focusFromPointer=!1,this.focusedKnob=void 0):this.focusedKnob=e,this.hasFocus||(this.hasFocus=!0,this.ionFocus.emit())},this.onKnobBlur=()=>{setTimeout((()=>{var e;const t=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.activeElement;t&&t.classList.contains("range-knob-handle")||this.hasFocus&&(this.hasFocus=!1,this.focusedKnob=void 0,this.ionBlur.emit())}),0)},this.onKnobMouseEnter=e=>{this.hoveredKnob=e},this.onKnobMouseLeave=()=>{this.hoveredKnob=void 0}}debounceChanged(){const{ionInput:e,debounce:t,originalIonInput:n}=this;this.ionInput=void 0===t?null!=n?n:e:b(e,t)}minChanged(e){h(e)||(this.min=0),this.noUpdate||this.updateRatio()}maxChanged(e){h(e)||(this.max=100),this.noUpdate||this.updateRatio()}stepChanged(e){h(e)||(this.step=1)}activeBarStartChanged(){const{activeBarStart:e}=this;void 0!==e&&(e>this.max?(n(`[ion-range] - The value of activeBarStart (${e}) 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):e<this.min&&(n(`[ion-range] - The value of activeBarStart (${e}) 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(){this.gesture&&this.gesture.enable(!this.disabled)}valueChanged(e,t){this.compareValues(e,t)&&this.ionInput.emit({value:this.value}),this.noUpdate||this.updateRatio()}componentWillLoad(){this.el.hasAttribute("id")&&(this.rangeId=this.el.getAttribute("id")),this.inheritedAttributes=g(this.el),this.min=h(this.min)?this.min:0,this.max=h(this.max)?this.max:100,this.step=h(this.step)?this.step:1}componentDidLoad(){this.originalIonInput=this.ionInput,this.setupGesture(),this.updateRatio(),this.didLoad=!0}connectedCallback(){var e;this.updateRatio(),this.debounceChanged(),this.disabledChanged(),this.activeBarStartChanged(),this.didLoad&&this.setupGesture();const t=o(this.el);this.contentEl=null!==(e=null==t?void 0:t.querySelector(".ion-content-scroll-host"))&&void 0!==e?e:t}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}getValue(){var e;const t=null!==(e=this.value)&&void 0!==e?e:0;return this.dualKnobs?"object"==typeof t?t:{lower:0,upper:t}:"object"==typeof t?t.upper:t}emitValueChange(){this.value=this.ensureValueInBounds(this.value),this.ionChange.emit({value:this.value})}onStart(){this.ionKnobMoveStart.emit({value:this.ensureValueInBounds(this.value)})}onMove(e){const{contentEl:t,pressedKnob:n}=this,a=e.currentX;t&&void 0===this.pressedKnob&&(this.initialContentScrollY=s(t)),void 0===n&&this.setPressedKnob(a),this.update(a)}onEnd(e){var t;const{contentEl:n,initialContentScrollY:a}=this,r=null!==(t=e.currentX)&&void 0!==t?t:e.clientX;void 0===this.pressedKnob&&this.setPressedKnob(r),n&&void 0!==this.pressedKnob&&l(n,a),this.update(r),this.pressedKnob=void 0,this.emitValueChange(),this.ionKnobMoveEnd.emit({value:this.ensureValueInBounds(this.value)})}update(e){const t=this.rect;let n=d(0,(e-t.left)/t.width,1);c(this.el)&&(n=1-n),this.snaps&&(n=w(v(n,this.min,this.max,this.step),this.min,this.max)),"A"===this.pressedKnob?this.ratioA=n:this.ratioB=n,this.updateValue()}setPressedKnob(e){const t=this.rect=this.rangeSlider.getBoundingClientRect();let n=d(0,(e-t.left)/t.width,1);c(this.el)&&(n=1-n),this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-n)<Math.abs(this.ratioB-n)?"A":"B"}get valA(){return v(this.ratioA,this.min,this.max,this.step)}get valB(){return v(this.ratioB,this.min,this.max,this.step)}get ratioLower(){if(this.dualKnobs)return Math.min(this.ratioA,this.ratioB);const{activeBarStart:e}=this;return null==e?0:w(e,this.min,this.max)}get ratioUpper(){return this.dualKnobs?Math.max(this.ratioA,this.ratioB):this.ratioA}updateRatio(){const e=this.getValue(),{min:t,max:n}=this;if(this.dualKnobs){const a=w(e.lower,t,n),r=w(e.upper,t,n);Math.abs(this.ratioA-a)+Math.abs(this.ratioB-r)<=Math.abs(this.ratioA-r)+Math.abs(this.ratioB-a)?(this.ratioA=a,this.ratioB=r):(this.ratioA=r,this.ratioB=a)}else this.ratioA=w(e,t,n)}updateValue(){this.noUpdate=!0;const{valA:e,valB:t}=this;this.value=this.dualKnobs?{lower:Math.min(e,t),upper:Math.max(e,t)}:e,this.noUpdate=!1}get hasStartSlotContent(){return null!==this.el.querySelector('[slot="start"]')}get hasEndSlotContent(){return null!==this.el.querySelector('[slot="end"]')}get hasLabel(){return void 0!==this.label||null!==this.el.querySelector('[slot="label"]')}renderRangeSlider(){var e;const{min:t,max:n,step:r,handleKeyboard:i,focusedKnob:o,hoveredKnob:s,pressedKnob:l,disabled:h,pin:d,ratioLower:b,ratioUpper:g,pinFormatter:p,inheritedAttributes:m}=this;let u=100*b+"%",k=100-100*g+"%";const f=c(this.el),v=f?"right":"left",y=f?"left":"right",z=e=>({[v]:e[v]});!1===this.dualKnobs&&(this.valA<(null!==(e=this.activeBarStart)&&void 0!==e?e:this.min)?(u=100*g+"%",k=100-100*b+"%"):(u=100*b+"%",k=100-100*g+"%"));const B={[v]:u,[y]:k},K=[];if(this.snaps&&this.ticks)for(let e=t;e<=n;e+=r){const a=w(e,t,n),r=Math.min(b,g),i=Math.max(b,g),o={ratio:a,active:a>=r&&a<=i};o[v]=100*a+"%",K.push(o)}return a("div",{class:"range-slider",ref:e=>this.rangeSlider=e,onPointerDown:()=>{this.focusFromPointer=!0},onPointerUp:e=>{this.focusFromPointer=!1,void 0===this.pressedKnob&&(this.onStart(),this.onEnd(e))}},K.map((e=>a("div",{style:z(e),role:"presentation",class:{"range-tick":!0,"range-tick-active":e.active},part:e.active?"tick-active":"tick"}))),a("div",{class:"range-bar-container"},a("div",{class:"range-bar",role:"presentation",part:"bar"}),a("div",{class:{"range-bar":!0,"range-bar-active":!0,"has-ticks":K.length>0},role:"presentation",style:B,part:"bar-active"})),x(f,{knob:"A",position:this.dualKnobs?this.ratioA<=this.ratioB?"lower":"upper":"lower",dualKnobs:this.dualKnobs,focused:"A"===o,hovered:"A"===s,pressed:"A"===l,value:this.valA,ratio:this.ratioA,pin:d,pinFormatter:p,disabled:h,handleKeyboard:i,min:t,max:n,inheritedAttributes:m,onKnobFocus:this.onKnobFocus,onKnobBlur:this.onKnobBlur,onKnobMouseEnter:this.onKnobMouseEnter,onKnobMouseLeave:this.onKnobMouseLeave}),this.dualKnobs&&x(f,{knob:"B",position:this.ratioB<=this.ratioA?"lower":"upper",dualKnobs:this.dualKnobs,focused:"B"===o,hovered:"B"===s,pressed:"B"===l,value:this.valB,ratio:this.ratioB,pin:d,pinFormatter:p,disabled:h,handleKeyboard:i,min:t,max:n,inheritedAttributes:m,onKnobFocus:this.onKnobFocus,onKnobBlur:this.onKnobBlur,onKnobMouseEnter:this.onKnobMouseEnter,onKnobMouseLeave:this.onKnobMouseLeave}))}render(){const{disabled:e,el:t,hasLabel:n,rangeId:i,pin:o,pressedKnob:s,labelPlacement:l,label:h,dualKnobs:d,min:b,max:g}=this,c=m("ion-item",t),f=c&&!(n&&("start"===l||"fixed"===l)||this.hasStartSlotContent),x=c&&!(n&&"end"===l||this.hasEndSlotContent),v=k(this),w=d?this.valA===b||this.valB===b:this.valA===b,y=d?this.valA===g||this.valB===g:this.valA===g;return p(!0,t,this.name,JSON.stringify(this.getValue()),e),a(r,{key:"4a393e229cf599f3377b606acaebe5f090d41f6e",onFocusin:this.onFocus,onFocusout:this.onBlur,id:i,class:u(this.color,{[v]:!0,"in-item":c,"range-disabled":e,"range-dual-knobs":d,"range-pressed":void 0!==s,"range-has-pin":o,[`range-label-placement-${l}`]:!0,"range-item-start-adjustment":f,"range-item-end-adjustment":x,"range-value-min":w,"range-value-max":y})},a("label",{key:"d7f45882aa7f11bbac1cb783caa0053151efcc70",class:"range-wrapper",id:"range-label"},a("div",{key:"537d3b1e7f9fed0c8380678551e31325b1ef1f85",class:{"label-text-wrapper":!0,"label-text-wrapper-hidden":!n},part:"label"},void 0!==h?a("div",{class:"label-text"},h):a("slot",{name:"label"})),a("div",{key:"cb50f07a3704d04af3554211ffad35f7d9fcc450",class:"native-wrapper"},a("slot",{key:"09004eaa72688ca0f0536bd5f5d7160a23d16406",name:"start"}),this.renderRangeSlider(),a("slot",{key:"a94da21d2ea7ed2feafcc0651c72da21d6de1e57",name:"end"}))))}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"],activeBarStart:["activeBarStartChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}},x=(e,{knob:t,position:n,dualKnobs:r,value:i,ratio:o,min:s,max:l,disabled:h,pressed:d,focused:b,hovered:g,pin:p,handleKeyboard:c,pinFormatter:m,inheritedAttributes:u,onKnobFocus:k,onKnobBlur:f,onKnobMouseEnter:x,onKnobMouseLeave:v})=>{const w=e?"right":"left",y=u["aria-label"];return a("div",{onKeyDown:e=>{const n=e.key;"ArrowLeft"===n||"ArrowDown"===n?(c(t,!1),e.preventDefault(),e.stopPropagation()):"ArrowRight"!==n&&"ArrowUp"!==n||(c(t,!0),e.preventDefault(),e.stopPropagation())},onFocus:()=>k(t),onBlur:f,onMouseEnter:()=>x(t),onMouseLeave:v,class:{"range-knob-handle":!0,"range-knob-handle-a":"A"===t,"range-knob-handle-b":"B"===t,"range-knob-pressed":d,"range-knob-min":i===s,"range-knob-max":i===l,"ion-activatable":!0,"ion-focusable":!0,"ion-focused":b},part:["knob-handle",r&&"A"===t&&"knob-handle-a",r&&"B"===t&&"knob-handle-b",r&&"lower"===n&&"knob-handle-lower",r&&"upper"===n&&"knob-handle-upper",d&&"pressed",b&&"focused",g&&"hover"].filter(Boolean).join(" "),style:(()=>{const e={};return e[w]=100*o+"%",e})(),role:"slider",tabindex:h?-1:0,"aria-label":void 0!==y?y:null,"aria-labelledby":void 0===y?"range-label":null,"aria-valuemin":s,"aria-valuemax":l,"aria-disabled":h?"true":null,"aria-valuenow":i},p&&a("div",{class:"range-pin",role:"presentation",part:["pin",r&&"A"===t&&"pin-a",r&&"B"===t&&"pin-b",r&&"lower"===n&&"pin-lower",r&&"upper"===n&&"pin-upper",d&&"pressed",b&&"focused",g&&"hover"].filter(Boolean).join(" ")},m(i)),a("div",{class:"range-knob",role:"presentation",part:["knob",r&&"A"===t&&"knob-a",r&&"B"===t&&"knob-b",r&&"lower"===n&&"knob-lower",r&&"upper"===n&&"knob-upper",d&&"pressed",b&&"focused",g&&"hover"].filter(Boolean).join(" ")}))},v=(e,t,n,a)=>{let r=(n-t)*e;return a>0&&(r=Math.round(r/a)*a+t),function(e,...t){if(!h(e))return 0;const n=Math.max(...t.map((e=>function(e){return h(e)?e%1==0?0:e.toString().split(".")[1].length:0}(e))));return Number(e.toFixed(n))}(d(t,r,n),t,n,a)},w=(e,t,n)=>d(0,(e-t)/(n-t),1);let y=0;f.style={ios:":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}.range-knob-handle{inset-inline-start: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)}.range-bar-container{inset-inline-start: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}.range-knob{inset-inline-start: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}::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, var(--ion-background-color-step-900, #e6e6e6));--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:2px;--height:42px}: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)}.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, var(--ion-background-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}",md:':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}.range-knob-handle{inset-inline-start: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)}.range-bar-container{inset-inline-start: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}.range-knob{inset-inline-start: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}::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, 0, 84, 233), 0.26);--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #0054e9);--pin-color:var(--ion-color-primary-contrast, #fff)}::slotted(:not(ion-icon)[slot=start]),::slotted(:not(ion-icon)[slot=end]),.native-wrapper{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)}.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}.range-knob::before{inset-inline-start: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}.range-pin::before{inset-inline-start: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, var(--ion-background-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, var(--ion-background-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}'};export{f as ion_range}
|