@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.
Files changed (41) hide show
  1. package/components/ion-range.js +39 -97
  2. package/components/ion-segment-view.js +11 -5
  3. package/components/ion-select.js +3 -2
  4. package/components/select-modal.js +6 -1
  5. package/dist/cjs/ion-range.cjs.entry.js +39 -95
  6. package/dist/cjs/ion-segment-view.cjs.entry.js +10 -5
  7. package/dist/cjs/ion-select-modal.cjs.entry.js +5 -1
  8. package/dist/cjs/ion-select_3.cjs.entry.js +3 -2
  9. package/dist/cjs/ionic.cjs.js +1 -1
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/collection/components/range/range.js +42 -116
  12. package/dist/collection/components/segment-view/segment-view.ios.css +2 -1
  13. package/dist/collection/components/segment-view/segment-view.js +28 -3
  14. package/dist/collection/components/segment-view/segment-view.md.css +2 -1
  15. package/dist/collection/components/select/select.js +3 -2
  16. package/dist/collection/components/select-modal/select-modal.js +25 -1
  17. package/dist/docs.json +64 -134
  18. package/dist/esm/ion-range.entry.js +39 -95
  19. package/dist/esm/ion-segment-view.entry.js +10 -5
  20. package/dist/esm/ion-select-modal.entry.js +5 -1
  21. package/dist/esm/ion-select_3.entry.js +3 -2
  22. package/dist/esm/ionic.js +1 -1
  23. package/dist/esm/loader.js +1 -1
  24. package/dist/html.html-data.json +8 -0
  25. package/dist/ionic/ionic.esm.js +1 -1
  26. package/dist/ionic/p-012212e4.entry.js +4 -0
  27. package/dist/ionic/p-88367362.entry.js +4 -0
  28. package/dist/ionic/p-9a2d390d.entry.js +4 -0
  29. package/dist/ionic/p-d2489bf2.entry.js +4 -0
  30. package/dist/types/components/range/range-interface.d.ts +0 -1
  31. package/dist/types/components/range/range.d.ts +4 -24
  32. package/dist/types/components/segment-view/segment-view.d.ts +4 -0
  33. package/dist/types/components/select-modal/select-modal.d.ts +4 -0
  34. package/dist/types/components.d.ts +20 -0
  35. package/hydrate/index.js +62 -124
  36. package/hydrate/index.mjs +62 -124
  37. package/package.json +1 -1
  38. package/dist/ionic/p-020af078.entry.js +0 -4
  39. package/dist/ionic/p-02d76786.entry.js +0 -4
  40. package/dist/ionic/p-b0c2f1f1.entry.js +0 -4
  41. 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 knob-handle - The container element that wraps the knob and handles drag interactions.
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
- const lowerRatio = valueToRatio(value.lower, min, max);
29224
- const upperRatio = valueToRatio(value.upper, min, max);
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, focusedKnob, hoveredKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
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), onPointerDown: () => {
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: '4a393e229cf599f3377b606acaebe5f090d41f6e', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
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: 'd7f45882aa7f11bbac1cb783caa0053151efcc70', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '537d3b1e7f9fed0c8380678551e31325b1ef1f85', class: {
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: 'cb50f07a3704d04af3554211ffad35f7d9fcc450', class: "native-wrapper" }, hAsync("slot", { key: '09004eaa72688ca0f0536bd5f5d7160a23d16406', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'a94da21d2ea7ed2feafcc0651c72da21d6de1e57', name: "end" })))));
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, position, dualKnobs, value, ratio, min, max, disabled, pressed, focused, hovered, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, onKnobMouseEnter, onKnobMouseLeave, }) => {
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, onMouseEnter: () => onKnobMouseEnter(knob), onMouseLeave: onKnobMouseLeave, class: {
29475
+ }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
29516
29476
  'range-knob-handle': true,
29517
- 'range-knob-handle-a': knob === 'A',
29518
- 'range-knob-handle-b': knob === 'B',
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
- 'ion-focused': focused,
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: 'e180b67bb3143a5f4611fb358c037be6fc782a8f', class: {
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
- } }, hAsync("slot", { key: '41c11d6a7406a10f5c64a2e73abfc072afd8fc73' })));
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: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses$1(this.color, {
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: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, hAsync("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), hAsync("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
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: 'b6c0dec240b2e41985b15fdf4e5a6d3a145c1567', class: getIonMode$1(this) }, hAsync("ion-header", { key: 'cd177e85ee0f62a60a3a708342d6ab6eb19a44dc' }, hAsync("ion-toolbar", { key: 'aee8222a5a4daa540ad202b2e4cac1ef93d9558c' }, this.header !== undefined && hAsync("ion-title", { key: '5f8fecc764d97bf840d3d4cfddeeccd118ab4436' }, this.header), hAsync("ion-buttons", { key: '919033950d7c2b0101f96a9c9698219de9f568ea', slot: "end" }, hAsync("ion-button", { key: '34b571cab6dced4bde555a077a21e91800829931', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: '3c9153d26ba7a5a03d3b20fcd628d0c3031661a7' }, hAsync("ion-list", { key: 'e00b222c071bc97c82ad1bba4db95a8a5c43ed6d' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@ionic/core",
3
- "version": "8.7.17-dev.11770147425.1bfcd5e5",
3
+ "version": "8.7.17-dev.11770405784.157a3c10",
4
4
  "description": "Base components for Ionic",
5
5
  "engines": {
6
6
  "node": ">= 16"
@@ -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}