@esri/calcite-components 1.0.0-next.422 → 1.0.0-next.423

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.
@@ -201,6 +201,9 @@ Graph.style = graphCss;
201
201
 
202
202
  const sliderCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}.scale--s{--calcite-slider-handle-size:10px;--calcite-slider-handle-extension-height:6.5px;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:14px;--calcite-slider-handle-extension-height:8px;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:16px;--calcite-slider-handle-extension-height:10.5px;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;padding:calc(var(--calcite-slider-handle-size) * 0.5);margin:calc(var(--calcite-slider-handle-size) * 0.5) 0;--calcite-slider-full-handle-height:calc(\n var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n )}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-6px}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-8px}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-9px}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-width:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;-webkit-transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;top:0px;bottom:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle__label.hyphen--wrap{display:-ms-flexbox;display:flex}.thumb .handle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:var(--calcite-slider-handle-size);width:var(--calcite-slider-handle-size);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease, -webkit-box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{width:0.125rem;height:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb.thumb--minValue{-webkit-transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-2px}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-23px}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-30px}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-32px}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-top:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-bottom:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-33px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-44px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-49px}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{position:relative;height:0.125rem;border-radius:0px;background-color:var(--calcite-ui-border-2);-webkit-transition:all var(--calcite-internal-animation-timing-medium) ease-in;transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;top:0px;height:0.125rem;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;width:100%;content:\"\";top:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);height:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}.tick{position:absolute;height:0.25rem;width:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-ui-border-input);border-color:var(--calcite-ui-foreground-1);top:-2px;pointer-events:none;-webkit-margin-start:calc(-1 * 0.125rem);margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{pointer-events:none;margin-top:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.tick__label--min{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing)}.tick__label--max{-webkit-transition:opacity var(--calcite-internal-animation-timing-fast);transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3);height:48px}:host([label-ticks][ticks]) .container{padding-bottom:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-bottom:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-bottom:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-top:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-bottom:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
203
203
 
204
+ function isRange(value) {
205
+ return Array.isArray(value);
206
+ }
204
207
  const Slider = class {
205
208
  constructor(hostRef) {
206
209
  registerInstance(this, hostRef);
@@ -241,13 +244,12 @@ const Slider = class {
241
244
  /** Interval to move on up/down keys */
242
245
  this.step = 1;
243
246
  /** Currently selected number (if single select) */
244
- this.value = null;
247
+ this.value = 0;
245
248
  /**
246
249
  * Specify the scale of the slider, defaults to m
247
250
  */
248
251
  this.scale = "m";
249
252
  this.guid = `calcite-slider-${guid()}`;
250
- this.isRange = false;
251
253
  this.activeProp = "value";
252
254
  this.minMaxValueRange = null;
253
255
  this.minValueDragRange = null;
@@ -257,7 +259,7 @@ const Slider = class {
257
259
  event.preventDefault();
258
260
  if (this.dragProp) {
259
261
  const value = this.translate(event.clientX || event.pageX);
260
- if (this.isRange && this.dragProp === "minMaxValue") {
262
+ if (isRange(this.value) && this.dragProp === "minMaxValue") {
261
263
  if (this.minValueDragRange && this.maxValueDragRange && this.minMaxValueRange) {
262
264
  const newMinValue = value - this.minValueDragRange;
263
265
  const newMaxValue = value + this.maxValueDragRange;
@@ -303,12 +305,20 @@ const Slider = class {
303
305
  histogramWatcher(newHistogram) {
304
306
  this.hasHistogram = !!newHistogram;
305
307
  }
308
+ valueHandler() {
309
+ this.setMinMaxFromValue();
310
+ }
311
+ minMaxValueHandler() {
312
+ this.setValueFromMinMax();
313
+ }
306
314
  //--------------------------------------------------------------------------
307
315
  //
308
316
  // Lifecycle
309
317
  //
310
318
  //--------------------------------------------------------------------------
311
319
  connectedCallback() {
320
+ this.setMinMaxFromValue();
321
+ this.setValueFromMinMax();
312
322
  connectLabel(this);
313
323
  connectForm(this);
314
324
  }
@@ -318,11 +328,12 @@ const Slider = class {
318
328
  this.removeDragListeners();
319
329
  }
320
330
  componentWillLoad() {
321
- this.isRange = !!(this.maxValue || this.maxValue === 0);
322
331
  this.tickValues = this.generateTickValues();
323
- this.value = this.clamp(this.value);
332
+ if (!isRange(this.value)) {
333
+ this.value = this.clamp(this.value);
334
+ }
324
335
  afterConnectDefaultValueSet(this, this.value);
325
- if (this.snap) {
336
+ if (this.snap && !isRange(this.value)) {
326
337
  this.value = this.getClosestStep(this.value);
327
338
  }
328
339
  if (this.histogram) {
@@ -332,9 +343,9 @@ const Slider = class {
332
343
  componentDidRender() {
333
344
  if (this.labelHandles) {
334
345
  this.adjustHostObscuredHandleLabel("value");
335
- if (this.isRange) {
346
+ if (isRange(this.value)) {
336
347
  this.adjustHostObscuredHandleLabel("minValue");
337
- if (!(this.precise && this.isRange && !this.hasHistogram)) {
348
+ if (!(this.precise && !this.hasHistogram)) {
338
349
  this.hyphenateCollidingRangeHandleLabels();
339
350
  }
340
351
  }
@@ -344,50 +355,50 @@ const Slider = class {
344
355
  }
345
356
  render() {
346
357
  const id = this.el.id || this.guid;
358
+ const maxProp = isRange(this.value) ? "maxValue" : "value";
359
+ const value = isRange(this.value) ? this.maxValue : this.value;
347
360
  const min = this.minValue || this.min;
348
- const max = this.maxValue || this.value;
349
- const maxProp = this.isRange ? "maxValue" : "value";
350
- const value = this[maxProp];
351
361
  const useMinValue = this.shouldUseMinValue();
352
362
  const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
353
- const maxInterval = this.getUnitInterval(max) * 100;
363
+ const maxInterval = this.getUnitInterval(value) * 100;
354
364
  const mirror = this.shouldMirror();
355
365
  const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
356
366
  const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
357
- const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
367
+ const valueIsRange = isRange(this.value);
368
+ const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
358
369
  thumb: true,
359
370
  "thumb--value": true,
360
371
  "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
361
372
  }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" })));
362
- const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
373
+ const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
363
374
  thumb: true,
364
375
  "thumb--value": true,
365
376
  "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
366
377
  }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" })));
367
- const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
378
+ const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
368
379
  thumb: true,
369
380
  "thumb--value": true,
370
381
  "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
371
382
  }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
372
- const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
383
+ const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
373
384
  thumb: true,
374
385
  "thumb--value": true,
375
386
  "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
376
387
  "thumb--precise": true
377
388
  }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
378
- const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
389
+ const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
379
390
  thumb: true,
380
391
  "thumb--value": true,
381
392
  "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
382
393
  "thumb--precise": true
383
394
  }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
384
- const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
395
+ const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
385
396
  thumb: true,
386
397
  "thumb--value": true,
387
398
  "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
388
399
  "thumb--precise": true
389
400
  }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
390
- const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
401
+ const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
391
402
  thumb: true,
392
403
  "thumb--value": true,
393
404
  "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
@@ -422,14 +433,14 @@ const Slider = class {
422
433
  }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
423
434
  return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { class: {
424
435
  ["container"]: true,
425
- ["container--range"]: this.isRange,
436
+ ["container--range"]: valueIsRange,
426
437
  [`scale--${this.scale}`]: true
427
438
  } }, this.renderGraph(), h("div", { class: "track", ref: this.storeTrackRef }, h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
428
439
  left: `${mirror ? 100 - maxInterval : minInterval}%`,
429
440
  right: `${mirror ? minInterval : 100 - maxInterval}%`
430
441
  } }), h("div", { class: "ticks" }, this.tickValues.map((tick) => {
431
442
  const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
432
- let activeTicks = tick >= min && tick <= max;
443
+ let activeTicks = tick >= min && tick <= value;
433
444
  if (useMinValue) {
434
445
  activeTicks = tick >= this.minValue && tick <= this.maxValue;
435
446
  }
@@ -440,23 +451,24 @@ const Slider = class {
440
451
  left: mirror ? "" : tickOffset,
441
452
  right: mirror ? tickOffset : ""
442
453
  } }, this.renderTickLabel(tick)));
443
- }))), h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && this.isRange && minHandle, !this.hasHistogram &&
454
+ }))), h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && valueIsRange && minHandle, !this.hasHistogram &&
444
455
  !this.precise &&
445
456
  this.labelHandles &&
446
- this.isRange &&
447
- minLabeledHandle, this.precise && !this.labelHandles && this.isRange && minPreciseHandle, this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle, this.hasHistogram &&
457
+ valueIsRange &&
458
+ minLabeledHandle, this.precise && !this.labelHandles && valueIsRange && minPreciseHandle, this.precise && this.labelHandles && valueIsRange && minLabeledPreciseHandle, this.hasHistogram &&
448
459
  !this.precise &&
449
460
  this.labelHandles &&
450
- this.isRange &&
461
+ valueIsRange &&
451
462
  minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram &&
452
463
  this.precise &&
453
464
  this.labelHandles &&
454
465
  histogramLabeledPreciseHandle, h(HiddenFormInputSlot, { component: this })))));
455
466
  }
456
467
  renderGraph() {
457
- return this.histogram ? (h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min })) : null;
468
+ return this.histogram ? (h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
458
469
  }
459
470
  renderTickLabel(tick) {
471
+ const valueIsRange = isRange(this.value);
460
472
  const isMinTickLabel = tick === this.min;
461
473
  const isMaxTickLabel = tick === this.max;
462
474
  const tickLabel = (h("span", { class: {
@@ -464,26 +476,26 @@ const Slider = class {
464
476
  "tick__label--min": isMinTickLabel,
465
477
  "tick__label--max": isMaxTickLabel
466
478
  } }, tick.toLocaleString()));
467
- if (this.labelTicks && !this.hasHistogram && !this.isRange) {
479
+ if (this.labelTicks && !this.hasHistogram && !valueIsRange) {
468
480
  return tickLabel;
469
481
  }
470
482
  if (this.labelTicks &&
471
483
  !this.hasHistogram &&
472
- this.isRange &&
484
+ valueIsRange &&
473
485
  !this.precise &&
474
486
  !this.labelHandles) {
475
487
  return tickLabel;
476
488
  }
477
489
  if (this.labelTicks &&
478
490
  !this.hasHistogram &&
479
- this.isRange &&
491
+ valueIsRange &&
480
492
  !this.precise &&
481
493
  this.labelHandles) {
482
494
  return tickLabel;
483
495
  }
484
496
  if (this.labelTicks &&
485
497
  !this.hasHistogram &&
486
- this.isRange &&
498
+ valueIsRange &&
487
499
  this.precise &&
488
500
  (isMinTickLabel || isMaxTickLabel)) {
489
501
  return tickLabel;
@@ -567,7 +579,7 @@ const Slider = class {
567
579
  const x = event.clientX || event.pageX;
568
580
  const position = this.translate(x);
569
581
  let prop = "value";
570
- if (this.isRange) {
582
+ if (isRange(this.value)) {
571
583
  const inRange = position >= this.minValue && position <= this.maxValue;
572
584
  if (inRange && this.lastDragProp === "minMaxValue") {
573
585
  prop = "minMaxValue";
@@ -603,6 +615,19 @@ const Slider = class {
603
615
  // Private Methods
604
616
  //
605
617
  //--------------------------------------------------------------------------
618
+ setValueFromMinMax() {
619
+ const { minValue, maxValue } = this;
620
+ if (typeof minValue === "number" && typeof maxValue === "number") {
621
+ this.value = [minValue, maxValue];
622
+ }
623
+ }
624
+ setMinMaxFromValue() {
625
+ const { value } = this;
626
+ if (isRange(value)) {
627
+ this.minValue = value[0];
628
+ this.maxValue = value[1];
629
+ }
630
+ }
606
631
  onLabelClick() {
607
632
  this.setFocus();
608
633
  }
@@ -610,7 +635,7 @@ const Slider = class {
610
635
  return this.mirrored && !this.hasHistogram;
611
636
  }
612
637
  shouldUseMinValue() {
613
- if (!this.isRange) {
638
+ if (!isRange(this.value)) {
614
639
  return false;
615
640
  }
616
641
  return ((this.hasHistogram && this.maxValue === 0) || (!this.hasHistogram && this.minValue === 0));
@@ -823,19 +848,20 @@ const Slider = class {
823
848
  * Hides bounding tick labels that are obscured by either handle.
824
849
  */
825
850
  hideObscuredBoundingTickLabels() {
826
- if (!this.hasHistogram && !this.isRange && !this.labelHandles && !this.precise) {
851
+ const valueIsRange = isRange(this.value);
852
+ if (!this.hasHistogram && !valueIsRange && !this.labelHandles && !this.precise) {
827
853
  return;
828
854
  }
829
- if (!this.hasHistogram && !this.isRange && this.labelHandles && !this.precise) {
855
+ if (!this.hasHistogram && !valueIsRange && this.labelHandles && !this.precise) {
830
856
  return;
831
857
  }
832
- if (!this.hasHistogram && !this.isRange && !this.labelHandles && this.precise) {
858
+ if (!this.hasHistogram && !valueIsRange && !this.labelHandles && this.precise) {
833
859
  return;
834
860
  }
835
- if (!this.hasHistogram && !this.isRange && this.labelHandles && this.precise) {
861
+ if (!this.hasHistogram && !valueIsRange && this.labelHandles && this.precise) {
836
862
  return;
837
863
  }
838
- if (!this.hasHistogram && this.isRange && !this.precise) {
864
+ if (!this.hasHistogram && valueIsRange && !this.precise) {
839
865
  return;
840
866
  }
841
867
  if (this.hasHistogram && !this.precise && !this.labelHandles) {
@@ -912,7 +938,10 @@ const Slider = class {
912
938
  }
913
939
  get el() { return getElement(this); }
914
940
  static get watchers() { return {
915
- "histogram": ["histogramWatcher"]
941
+ "histogram": ["histogramWatcher"],
942
+ "value": ["valueHandler"],
943
+ "minValue": ["minMaxValueHandler"],
944
+ "maxValue": ["minMaxValueHandler"]
916
945
  }; }
917
946
  };
918
947
  Slider.style = sliderCss;
@@ -2,4 +2,4 @@ var __awaiter=this&&this.__awaiter||function(a,t,e,i){function n(a){return a ins
2
2
  /*!
3
3
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
4
4
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
5
- */import{r as registerInstance,f as forceUpdate,h,g as getElement,c as createEvent,H as Host}from"./index-bd94948c.js";import{g as guid}from"./guid-196bd5ea.js";import{c as createObserver}from"./observers-46118290.js";import{j as intersects}from"./dom-e7fa77b9.js";import{d as decimalPlaces,c as clamp}from"./math-456207f5.js";import{c as connectLabel,d as disconnectLabel}from"./label-68f22660.js";import{c as connectForm,d as disconnectForm,a as afterConnectDefaultValueSet,H as HiddenFormInputSlot}from"./form-5e4609eb.js";import{u as updateHostInteraction}from"./interactive-48b5cc0f.js";function slope(a,t,e){var i=t[0]-a[0];var n=e[0]-t[0];var r=t[1]-a[1];var l=e[1]-t[1];var s=r/(i||n<0&&0);var o=l/(n||i<0&&0);var c=(s*n+o*i)/(i+n);return(Math.sign(s)+Math.sign(o))*Math.min(Math.abs(s),Math.abs(o),.5*Math.abs(c))||0}function slopeSingle(a,t,e){var i=t[0]-a[0];var n=t[1]-a[1];return i?(3*n/i-e)/2:e}function bezier(a,t,e,i,n){var r=a[0],l=a[1];var s=t[0],o=t[1];var c=(s-r)/3;var h=n([r+c,l+c*e]).join(",");var u=n([s-c,o-c*i]).join(",");var m=n([s,o]).join(",");return"C ".concat(h," ").concat(u," ").concat(m)}function translate(a){var t=a.width,e=a.height,i=a.min,n=a.max;var r=n[0]-i[0];var l=n[1]-i[1];return function(a){var n=(a[0]-i[0])/r*t;var s=e-a[1]/l*e;return[n,s]}}function range(a){var t=a[0],e=t[0],i=t[1];var n=[e,i];var r=[e,i];return a.reduce((function(a,t){var e=a.min,i=a.max;var n=t[0],r=t[1];return{min:[Math.min(e[0],n),Math.min(e[1],r)],max:[Math.max(i[0],n),Math.max(i[1],r)]}}),{min:n,max:r})}function area(a){var t=a.data,e=a.min,i=a.max,n=a.t;if(t.length===0){return""}var r=n(t[0]),l=r[0],s=r[1];var o=n(e),c=o[0],h=o[1];var u=n(i)[0];var m;var d;var p;var b=t.reduce((function(a,e,i){d=t[i-2];p=t[i-1];if(i>1){var r=slope(d,p,e);var l=m===undefined?slopeSingle(d,p,r):m;var s=bezier(d,p,l,r,n);m=r;return"".concat(a," ").concat(s)}return a}),"M ".concat(c,",").concat(h," L ").concat(c,",").concat(s," L ").concat(l,",").concat(s));var f=t[t.length-1];var g=bezier(p,f,m,slopeSingle(p,f,m),n);return"".concat(b," ").concat(g," L ").concat(u,",").concat(h," Z")}var graphCss="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}.svg{fill:currentColor;stroke:transparent;margin:0px;display:block;height:100%;width:100%;padding:0px}.svg .graph-path--highlight{fill:var(--calcite-ui-brand);opacity:0.5}";var Graph=function(){function a(a){var t=this;registerInstance(this,a);this.data=[];this.graphId="calcite-graph-".concat(guid());this.resizeObserver=createObserver("resize",(function(){return forceUpdate(t)}))}a.prototype.connectedCallback=function(){var a;(a=this.resizeObserver)===null||a===void 0?void 0:a.observe(this.el)};a.prototype.disconnectedCallback=function(){var a;(a=this.resizeObserver)===null||a===void 0?void 0:a.disconnect()};a.prototype.render=function(){var a=this,t=a.data,e=a.colorStops,i=a.el,n=a.highlightMax,r=a.highlightMin,l=a.min,s=a.max;var o=this.graphId;var c=i.clientHeight,u=i.clientWidth;if(!t||t.length===0){return h("svg",{class:"svg",height:c,preserveAspectRatio:"none",viewBox:"0 0 ".concat(u," ").concat(c),width:u})}var m=range(t),d=m.min,p=m.max;var b=d;var f=p;if(l<d[0]||l>d[0]){b=[l,0]}if(s>p[0]||s<p[0]){f=[s,p[1]]}var g=translate({min:b,max:f,width:u,height:c});var v=g([r,f[1]])[0];var x=g([n,f[1]])[0];var y=area({data:t,min:d,max:p,t:g});var _=e?"url(#linear-gradient-".concat(o,")"):undefined;return h("svg",{class:"svg",height:c,preserveAspectRatio:"none",viewBox:"0 0 ".concat(u," ").concat(c),width:u},e?h("defs",null,h("linearGradient",{id:"linear-gradient-".concat(o),x1:"0",x2:"1",y1:"0",y2:"0"},e.map((function(a){var t=a.offset,e=a.color,i=a.opacity;return h("stop",{offset:"".concat(t*100,"%"),"stop-color":e,"stop-opacity":i})})))):null,r!==undefined?[h("mask",{height:"100%",id:"".concat(o,"1"),width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M 0,0\n L ".concat(v-1,",0\n L ").concat(v-1,",").concat(c,"\n L 0,").concat(c,"\n Z\n "),fill:"white"})),h("mask",{height:"100%",id:"".concat(o,"2"),width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M ".concat(v+1,",0\n L ").concat(x-1,",0\n L ").concat(x-1,",").concat(c,"\n L ").concat(v+1,", ").concat(c,"\n Z\n "),fill:"white"})),h("mask",{height:"100%",id:"".concat(o,"3"),width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M ".concat(x+1,",0\n L ").concat(u,",0\n L ").concat(u,",").concat(c,"\n L ").concat(x+1,", ").concat(c,"\n Z\n "),fill:"white"})),h("path",{class:"graph-path",d:y,fill:_,mask:"url(#".concat(o,"1)")}),h("path",{class:"graph-path--highlight",d:y,fill:_,mask:"url(#".concat(o,"2)")}),h("path",{class:"graph-path",d:y,fill:_,mask:"url(#".concat(o,"3)")})]:h("path",{class:"graph-path",d:y,fill:_}))};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return a}();Graph.style=graphCss;var sliderCss='@charset "UTF-8";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}.scale--s{--calcite-slider-handle-size:10px;--calcite-slider-handle-extension-height:6.5px;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:14px;--calcite-slider-handle-extension-height:8px;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:16px;--calcite-slider-handle-extension-height:10.5px;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;padding:calc(var(--calcite-slider-handle-size) * 0.5);margin:calc(var(--calcite-slider-handle-size) * 0.5) 0;--calcite-slider-full-handle-height:calc(\n var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n )}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-6px}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-8px}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-9px}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-width:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;-webkit-transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;top:0px;bottom:0px;opacity:0}.thumb .handle__label.hyphen::after{content:"—";display:inline-block;width:1em}.thumb .handle__label.hyphen--wrap{display:-ms-flexbox;display:flex}.thumb .handle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:var(--calcite-slider-handle-size);width:var(--calcite-slider-handle-size);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease, -webkit-box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{width:0.125rem;height:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb.thumb--minValue{-webkit-transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-2px}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-23px}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-30px}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-32px}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-top:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-bottom:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-33px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-44px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-49px}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{position:relative;height:0.125rem;border-radius:0px;background-color:var(--calcite-ui-border-2);-webkit-transition:all var(--calcite-internal-animation-timing-medium) ease-in;transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;top:0px;height:0.125rem;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;width:100%;content:"";top:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);height:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}.tick{position:absolute;height:0.25rem;width:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-ui-border-input);border-color:var(--calcite-ui-foreground-1);top:-2px;pointer-events:none;-webkit-margin-start:calc(-1 * 0.125rem);margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{pointer-events:none;margin-top:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.tick__label--min{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing)}.tick__label--max{-webkit-transition:opacity var(--calcite-internal-animation-timing-fast);transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3);height:48px}:host([label-ticks][ticks]) .container{padding-bottom:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-bottom:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-bottom:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-top:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-bottom:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}';var Slider=function(){function a(a){var t=this;registerInstance(this,a);this.calciteSliderInput=createEvent(this,"calciteSliderInput",7);this.calciteSliderChange=createEvent(this,"calciteSliderChange",7);this.calciteSliderUpdate=createEvent(this,"calciteSliderUpdate",7);this.disabled=false;this.hasHistogram=false;this.labelHandles=false;this.labelTicks=false;this.max=100;this.min=0;this.mirrored=false;this.precise=false;this.required=false;this.snap=false;this.step=1;this.value=null;this.scale="m";this.guid="calcite-slider-".concat(guid());this.isRange=false;this.activeProp="value";this.minMaxValueRange=null;this.minValueDragRange=null;this.maxValueDragRange=null;this.tickValues=[];this.dragUpdate=function(a){a.preventDefault();if(t.dragProp){var e=t.translate(a.clientX||a.pageX);if(t.isRange&&t.dragProp==="minMaxValue"){if(t.minValueDragRange&&t.maxValueDragRange&&t.minMaxValueRange){var i=e-t.minValueDragRange;var n=e+t.maxValueDragRange;if(n<=t.max&&i>=t.min&&n-i===t.minMaxValueRange){t.minValue=t.clamp(i,"minValue");t.maxValue=t.clamp(n,"maxValue")}}else{t.minValueDragRange=e-t.minValue;t.maxValueDragRange=t.maxValue-e;t.minMaxValueRange=t.maxValue-t.minValue}}else{t.setValue(t.dragProp,t.clamp(e,t.dragProp))}}};this.dragEnd=function(a){t.removeDragListeners();t.focusActiveHandle(a.clientX);if(t.lastDragPropValue!=t[t.dragProp]){t.emitChange()}t.dragProp=null;t.lastDragPropValue=null;t.minValueDragRange=null;t.maxValueDragRange=null;t.minMaxValueRange=null};this.storeTrackRef=function(a){t.trackEl=a}}a.prototype.histogramWatcher=function(a){this.hasHistogram=!!a};a.prototype.connectedCallback=function(){connectLabel(this);connectForm(this)};a.prototype.disconnectedCallback=function(){disconnectLabel(this);disconnectForm(this);this.removeDragListeners()};a.prototype.componentWillLoad=function(){this.isRange=!!(this.maxValue||this.maxValue===0);this.tickValues=this.generateTickValues();this.value=this.clamp(this.value);afterConnectDefaultValueSet(this,this.value);if(this.snap){this.value=this.getClosestStep(this.value)}if(this.histogram){this.hasHistogram=true}};a.prototype.componentDidRender=function(){if(this.labelHandles){this.adjustHostObscuredHandleLabel("value");if(this.isRange){this.adjustHostObscuredHandleLabel("minValue");if(!(this.precise&&this.isRange&&!this.hasHistogram)){this.hyphenateCollidingRangeHandleLabels()}}}this.hideObscuredBoundingTickLabels();updateHostInteraction(this)};a.prototype.render=function(){var a;var t=this;var e=this.el.id||this.guid;var i=this.minValue||this.min;var n=this.maxValue||this.value;var r=this.isRange?"maxValue":"value";var l=this[r];var s=this.shouldUseMinValue();var o=this.getUnitInterval(s?this.minValue:i)*100;var c=this.getUnitInterval(n)*100;var u=this.shouldMirror();var m="".concat(u?100-o:o,"%");var d="".concat(u?c:100-c,"%");var p=h("div",{"aria-disabled":this.disabled,"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":l,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===r},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=r},onPointerDown:function(){return t.dragStart(r)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:d},tabIndex:0},h("div",{class:"handle"}));var b=h("div",{"aria-disabled":this.disabled,"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":l,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===r},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=r},onPointerDown:function(){return t.dragStart(r)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:d},tabIndex:0},h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},l?l.toLocaleString():l),h("div",{class:"handle"}));var f=h("div",{"aria-disabled":this.disabled,"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":l,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===r},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=r},onPointerDown:function(){return t.dragStart(r)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:d},tabIndex:0},h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},l?l.toLocaleString():l));var g=h("div",{"aria-disabled":this.disabled,"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":l,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===r,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=r},onPointerDown:function(){return t.dragStart(r)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:d},tabIndex:0},h("div",{class:"handle"}),h("div",{class:"handle-extension"}));var v=h("div",{"aria-disabled":this.disabled,"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":l,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===r,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=r},onPointerDown:function(){return t.dragStart(r)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:d},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}));var x=h("div",{"aria-disabled":this.disabled,"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":l,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===r,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=r},onPointerDown:function(){return t.dragStart(r)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:d},tabIndex:0},h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},l?l.toLocaleString():l),h("div",{class:"handle"}),h("div",{class:"handle-extension"}));var y=h("div",{"aria-disabled":this.disabled,"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":l,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===r,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=r},onPointerDown:function(){return t.dragStart(r)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:d},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},l?l.toLocaleString():l),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},l?l.toLocaleString():l));var _=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue"},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:m},tabIndex:0},h("div",{class:"handle"}));var k=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue"},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:m},tabIndex:0},h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()),h("div",{class:"handle"}));var w=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue"},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:m},tabIndex:0},h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()));var V=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue","thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:m},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}));var H=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue","thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:m},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()));return h(Host,{id:e,onTouchStart:this.handleTouchStart},h("div",{class:(a={},a["container"]=true,a["container--range"]=this.isRange,a["scale--".concat(this.scale)]=true,a)},this.renderGraph(),h("div",{class:"track",ref:this.storeTrackRef},h("div",{class:"track__range",onPointerDown:function(){return t.dragStart("minMaxValue")},style:{left:"".concat(u?100-c:o,"%"),right:"".concat(u?o:100-c,"%")}}),h("div",{class:"ticks"},this.tickValues.map((function(a){var e="".concat(t.getUnitInterval(a)*100,"%");var r=a>=i&&a<=n;if(s){r=a>=t.minValue&&a<=t.maxValue}return h("span",{class:{tick:true,"tick--active":r},style:{left:u?"":e,right:u?e:""}},t.renderTickLabel(a))})))),h("div",{class:"thumb-container"},!this.precise&&!this.labelHandles&&this.isRange&&_,!this.hasHistogram&&!this.precise&&this.labelHandles&&this.isRange&&k,this.precise&&!this.labelHandles&&this.isRange&&V,this.precise&&this.labelHandles&&this.isRange&&H,this.hasHistogram&&!this.precise&&this.labelHandles&&this.isRange&&w,!this.precise&&!this.labelHandles&&p,!this.hasHistogram&&!this.precise&&this.labelHandles&&b,!this.hasHistogram&&this.precise&&!this.labelHandles&&g,this.hasHistogram&&this.precise&&!this.labelHandles&&v,!this.hasHistogram&&this.precise&&this.labelHandles&&x,this.hasHistogram&&!this.precise&&this.labelHandles&&f,this.hasHistogram&&this.precise&&this.labelHandles&&y,h(HiddenFormInputSlot,{component:this}))))};a.prototype.renderGraph=function(){return this.histogram?h("calcite-graph",{class:"graph",colorStops:this.histogramStops,data:this.histogram,highlightMax:this.isRange?this.maxValue:this.value,highlightMin:this.isRange?this.minValue:this.min,max:this.max,min:this.min}):null};a.prototype.renderTickLabel=function(a){var t=a===this.min;var e=a===this.max;var i=h("span",{class:{tick__label:true,"tick__label--min":t,"tick__label--max":e}},a.toLocaleString());if(this.labelTicks&&!this.hasHistogram&&!this.isRange){return i}if(this.labelTicks&&!this.hasHistogram&&this.isRange&&!this.precise&&!this.labelHandles){return i}if(this.labelTicks&&!this.hasHistogram&&this.isRange&&!this.precise&&this.labelHandles){return i}if(this.labelTicks&&!this.hasHistogram&&this.isRange&&this.precise&&(t||e)){return i}if(this.labelTicks&&this.hasHistogram&&!this.precise&&!this.labelHandles){return i}if(this.labelTicks&&this.hasHistogram&&this.precise&&!this.labelHandles&&(t||e)){return i}if(this.labelTicks&&this.hasHistogram&&!this.precise&&this.labelHandles&&(t||e)){return i}if(this.labelTicks&&this.hasHistogram&&this.precise&&this.labelHandles&&(t||e)){return i}return null};a.prototype.keyDownHandler=function(a){var t=this.shouldMirror();var e=this,i=e.activeProp,n=e.max,r=e.min,l=e.pageStep,s=e.step;var o=this[i];var c=a.key;if(c==="Enter"||c===" "){a.preventDefault();return}var h;if(c==="ArrowUp"||c==="ArrowRight"){var u=t&&c==="ArrowRight"?-1:1;h=o+s*u}else if(c==="ArrowDown"||c==="ArrowLeft"){var u=t&&c==="ArrowLeft"?-1:1;h=o-s*u}else if(c==="PageUp"){if(l){h=o+l}}else if(c==="PageDown"){if(l){h=o-l}}else if(c==="Home"){h=r}else if(c==="End"){h=n}if(isNaN(h)){return}a.preventDefault();var m=Number(h.toFixed(decimalPlaces(s)));this.setValue(i,this.clamp(m,i))};a.prototype.clickHandler=function(a){this.focusActiveHandle(a.clientX)};a.prototype.pointerDownHandler=function(a){var t=a.clientX||a.pageX;var e=this.translate(t);var i="value";if(this.isRange){var n=e>=this.minValue&&e<=this.maxValue;if(n&&this.lastDragProp==="minMaxValue"){i="minMaxValue"}else{var r=Math.abs(this.maxValue-e)<Math.abs(this.minValue-e);i=r||e>this.maxValue?"maxValue":"minValue"}}this.lastDragPropValue=this[i];this.dragStart(i);var l=this.el.shadowRoot.querySelector(".thumb:active");if(!l){this.setValue(i,this.clamp(e,i))}};a.prototype.handleTouchStart=function(a){a.preventDefault()};a.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var a;return __generator(this,(function(t){a=this.minHandle?this.minHandle:this.maxHandle;a.focus();return[2]}))}))};a.prototype.onLabelClick=function(){this.setFocus()};a.prototype.shouldMirror=function(){return this.mirrored&&!this.hasHistogram};a.prototype.shouldUseMinValue=function(){if(!this.isRange){return false}return this.hasHistogram&&this.maxValue===0||!this.hasHistogram&&this.minValue===0};a.prototype.generateTickValues=function(){var a=[];var t=this.min;while(this.ticks&&t<this.max+this.ticks){a.push(Math.min(t,this.max));t=t+this.ticks}return a};a.prototype.dragStart=function(a){this.dragProp=a;this.lastDragProp=this.dragProp;this.activeProp=a;document.addEventListener("pointermove",this.dragUpdate);document.addEventListener("pointerup",this.dragEnd);document.addEventListener("pointercancel",this.dragEnd)};a.prototype.focusActiveHandle=function(a){switch(this.dragProp){case"minValue":this.minHandle.focus();break;case"maxValue":this.maxHandle.focus();break;case"minMaxValue":this.getClosestHandle(a).focus();break}};a.prototype.emitInput=function(){this.calciteSliderInput.emit();this.calciteSliderUpdate.emit()};a.prototype.emitChange=function(){this.calciteSliderChange.emit()};a.prototype.removeDragListeners=function(){document.removeEventListener("pointermove",this.dragUpdate);document.removeEventListener("pointerup",this.dragEnd);document.removeEventListener("pointercancel",this.dragEnd)};a.prototype.setValue=function(a,t){var e=this[a];var i=e!==t;if(!i){return}this[a]=t;var n=this.dragProp;if(!n){this.emitChange()}this.emitInput()};a.prototype.clamp=function(a,t){a=clamp(a,this.min,this.max);if(t==="maxValue"){a=Math.max(a,this.minValue)}if(t==="minValue"){a=Math.min(a,this.maxValue)}return a};a.prototype.translate=function(a){var t=this.max-this.min;var e=this.trackEl.getBoundingClientRect(),i=e.left,n=e.width;var r=(a-i)/n;var l=this.shouldMirror();var s=this.clamp(this.min+t*(l?1-r:r));var o=Number(s.toFixed(decimalPlaces(this.step)));if(this.snap&&this.step){o=this.getClosestStep(o)}return o};a.prototype.getClosestStep=function(a){a=Number(this.clamp(a).toFixed(decimalPlaces(this.step)));if(this.step){var t=Math.round(a/this.step)*this.step;a=Number(this.clamp(t).toFixed(decimalPlaces(this.step)))}return a};a.prototype.getClosestHandle=function(a){return this.getDistanceX(this.maxHandle,a)>this.getDistanceX(this.minHandle,a)?this.minHandle:this.maxHandle};a.prototype.getDistanceX=function(a,t){return Math.abs(a.getBoundingClientRect().left-t)};a.prototype.getFontSizeForElement=function(a){return Number(window.getComputedStyle(a).getPropertyValue("font-size").match(/\d+/)[0])};a.prototype.getUnitInterval=function(a){a=this.clamp(a);var t=this.max-this.min;return(a-this.min)/t};a.prototype.adjustHostObscuredHandleLabel=function(a){var t=this.el.shadowRoot.querySelector(".handle__label--".concat(a));var e=this.el.shadowRoot.querySelector(".handle__label--".concat(a,".static"));var i=this.el.shadowRoot.querySelector(".handle__label--".concat(a,".transformed"));var n=e.getBoundingClientRect();var r=this.getHostOffset(n.left,n.right);t.style.transform="translateX(".concat(r,"px)");i.style.transform="translateX(".concat(r,"px)")};a.prototype.hyphenateCollidingRangeHandleLabels=function(){var a=this.el.shadowRoot;var t=this.shouldMirror();var e=t?"value":"minValue";var i=t?"minValue":"value";var n=a.querySelector(".handle__label--".concat(e));var r=a.querySelector(".handle__label--".concat(e,".static"));var l=a.querySelector(".handle__label--".concat(e,".transformed"));var s=this.getHostOffset(r.getBoundingClientRect().left,r.getBoundingClientRect().right);var o=a.querySelector(".handle__label--".concat(i));var c=a.querySelector(".handle__label--".concat(i,".static"));var h=a.querySelector(".handle__label--".concat(i,".transformed"));var u=this.getHostOffset(c.getBoundingClientRect().left,c.getBoundingClientRect().right);var m=this.getFontSizeForElement(n);var d=this.getRangeLabelOverlap(l,h);var p=n;var b=m/2;if(d>0){p.classList.add("hyphen","hyphen--wrap");if(u===0&&s===0){var f=d/2-b;f=Math.sign(f)===-1?Math.abs(f):-f;var g=this.getHostOffset(l.getBoundingClientRect().left+f-b,l.getBoundingClientRect().right+f-b);var v=d/2;var x=this.getHostOffset(h.getBoundingClientRect().left+v,h.getBoundingClientRect().right+v);if(g!==0){f+=g;v+=g}if(x!==0){f+=x;v+=x}n.style.transform="translateX(".concat(f,"px)");l.style.transform="translateX(".concat(f-b,"px)");o.style.transform="translateX(".concat(v,"px)");h.style.transform="translateX(".concat(v,"px)")}else if(s>0||u>0){n.style.transform="translateX(".concat(s+b,"px)");o.style.transform="translateX(".concat(d+u,"px)");h.style.transform="translateX(".concat(d+u,"px)")}else if(s<0||u<0){var f=Math.abs(s)+d-b;f=Math.sign(f)===-1?Math.abs(f):-f;n.style.transform="translateX(".concat(f,"px)");l.style.transform="translateX(".concat(f-b,"px)")}}else{p.classList.remove("hyphen","hyphen--wrap");n.style.transform="translateX(".concat(s,"px)");l.style.transform="translateX(".concat(s,"px)");o.style.transform="translateX(".concat(u,"px)");h.style.transform="translateX(".concat(u,"px)")}};a.prototype.hideObscuredBoundingTickLabels=function(){if(!this.hasHistogram&&!this.isRange&&!this.labelHandles&&!this.precise){return}if(!this.hasHistogram&&!this.isRange&&this.labelHandles&&!this.precise){return}if(!this.hasHistogram&&!this.isRange&&!this.labelHandles&&this.precise){return}if(!this.hasHistogram&&!this.isRange&&this.labelHandles&&this.precise){return}if(!this.hasHistogram&&this.isRange&&!this.precise){return}if(this.hasHistogram&&!this.precise&&!this.labelHandles){return}var a=this.el.shadowRoot.querySelector(".thumb--minValue");var t=this.el.shadowRoot.querySelector(".thumb--value");var e=this.el.shadowRoot.querySelector(".tick__label--min");var i=this.el.shadowRoot.querySelector(".tick__label--max");if(!a&&t&&e&&i){e.style.opacity=this.isMinTickLabelObscured(e,t)?"0":"1";i.style.opacity=this.isMaxTickLabelObscured(i,t)?"0":"1"}if(a&&t&&e&&i){e.style.opacity=this.isMinTickLabelObscured(e,a)||this.isMinTickLabelObscured(e,t)?"0":"1";i.style.opacity=this.isMaxTickLabelObscured(i,a)||this.isMaxTickLabelObscured(i,t)&&this.hasHistogram?"0":"1"}};a.prototype.getHostOffset=function(a,t){var e=this.el.getBoundingClientRect();var i=7;if(a+i<e.left){return e.left-a-i}if(t-i>e.right){return-(t-e.right)+i}return 0};a.prototype.getRangeLabelOverlap=function(a,t){var e=a.getBoundingClientRect();var i=t.getBoundingClientRect();var n=this.getFontSizeForElement(a);var r=e.right+n-i.left;return Math.max(r,0)};a.prototype.isMinTickLabelObscured=function(a,t){var e=a.getBoundingClientRect();var i=t.getBoundingClientRect();return intersects(e,i)};a.prototype.isMaxTickLabelObscured=function(a,t){var e=a.getBoundingClientRect();var i=t.getBoundingClientRect();return intersects(e,i)};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(a,"watchers",{get:function(){return{histogram:["histogramWatcher"]}},enumerable:false,configurable:true});return a}();Slider.style=sliderCss;export{Graph as calcite_graph,Slider as calcite_slider};
5
+ */import{r as registerInstance,f as forceUpdate,h,g as getElement,c as createEvent,H as Host}from"./index-bd94948c.js";import{g as guid}from"./guid-196bd5ea.js";import{c as createObserver}from"./observers-46118290.js";import{j as intersects}from"./dom-e7fa77b9.js";import{d as decimalPlaces,c as clamp}from"./math-456207f5.js";import{c as connectLabel,d as disconnectLabel}from"./label-68f22660.js";import{c as connectForm,d as disconnectForm,a as afterConnectDefaultValueSet,H as HiddenFormInputSlot}from"./form-5e4609eb.js";import{u as updateHostInteraction}from"./interactive-48b5cc0f.js";function slope(a,t,e){var i=t[0]-a[0];var n=e[0]-t[0];var r=t[1]-a[1];var l=e[1]-t[1];var s=r/(i||n<0&&0);var o=l/(n||i<0&&0);var c=(s*n+o*i)/(i+n);return(Math.sign(s)+Math.sign(o))*Math.min(Math.abs(s),Math.abs(o),.5*Math.abs(c))||0}function slopeSingle(a,t,e){var i=t[0]-a[0];var n=t[1]-a[1];return i?(3*n/i-e)/2:e}function bezier(a,t,e,i,n){var r=a[0],l=a[1];var s=t[0],o=t[1];var c=(s-r)/3;var h=n([r+c,l+c*e]).join(",");var u=n([s-c,o-c*i]).join(",");var m=n([s,o]).join(",");return"C ".concat(h," ").concat(u," ").concat(m)}function translate(a){var t=a.width,e=a.height,i=a.min,n=a.max;var r=n[0]-i[0];var l=n[1]-i[1];return function(a){var n=(a[0]-i[0])/r*t;var s=e-a[1]/l*e;return[n,s]}}function range(a){var t=a[0],e=t[0],i=t[1];var n=[e,i];var r=[e,i];return a.reduce((function(a,t){var e=a.min,i=a.max;var n=t[0],r=t[1];return{min:[Math.min(e[0],n),Math.min(e[1],r)],max:[Math.max(i[0],n),Math.max(i[1],r)]}}),{min:n,max:r})}function area(a){var t=a.data,e=a.min,i=a.max,n=a.t;if(t.length===0){return""}var r=n(t[0]),l=r[0],s=r[1];var o=n(e),c=o[0],h=o[1];var u=n(i)[0];var m;var d;var p;var b=t.reduce((function(a,e,i){d=t[i-2];p=t[i-1];if(i>1){var r=slope(d,p,e);var l=m===undefined?slopeSingle(d,p,r):m;var s=bezier(d,p,l,r,n);m=r;return"".concat(a," ").concat(s)}return a}),"M ".concat(c,",").concat(h," L ").concat(c,",").concat(s," L ").concat(l,",").concat(s));var f=t[t.length-1];var v=bezier(p,f,m,slopeSingle(p,f,m),n);return"".concat(b," ").concat(v," L ").concat(u,",").concat(h," Z")}var graphCss="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}.svg{fill:currentColor;stroke:transparent;margin:0px;display:block;height:100%;width:100%;padding:0px}.svg .graph-path--highlight{fill:var(--calcite-ui-brand);opacity:0.5}";var Graph=function(){function a(a){var t=this;registerInstance(this,a);this.data=[];this.graphId="calcite-graph-".concat(guid());this.resizeObserver=createObserver("resize",(function(){return forceUpdate(t)}))}a.prototype.connectedCallback=function(){var a;(a=this.resizeObserver)===null||a===void 0?void 0:a.observe(this.el)};a.prototype.disconnectedCallback=function(){var a;(a=this.resizeObserver)===null||a===void 0?void 0:a.disconnect()};a.prototype.render=function(){var a=this,t=a.data,e=a.colorStops,i=a.el,n=a.highlightMax,r=a.highlightMin,l=a.min,s=a.max;var o=this.graphId;var c=i.clientHeight,u=i.clientWidth;if(!t||t.length===0){return h("svg",{class:"svg",height:c,preserveAspectRatio:"none",viewBox:"0 0 ".concat(u," ").concat(c),width:u})}var m=range(t),d=m.min,p=m.max;var b=d;var f=p;if(l<d[0]||l>d[0]){b=[l,0]}if(s>p[0]||s<p[0]){f=[s,p[1]]}var v=translate({min:b,max:f,width:u,height:c});var g=v([r,f[1]])[0];var x=v([n,f[1]])[0];var y=area({data:t,min:d,max:p,t:v});var _=e?"url(#linear-gradient-".concat(o,")"):undefined;return h("svg",{class:"svg",height:c,preserveAspectRatio:"none",viewBox:"0 0 ".concat(u," ").concat(c),width:u},e?h("defs",null,h("linearGradient",{id:"linear-gradient-".concat(o),x1:"0",x2:"1",y1:"0",y2:"0"},e.map((function(a){var t=a.offset,e=a.color,i=a.opacity;return h("stop",{offset:"".concat(t*100,"%"),"stop-color":e,"stop-opacity":i})})))):null,r!==undefined?[h("mask",{height:"100%",id:"".concat(o,"1"),width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M 0,0\n L ".concat(g-1,",0\n L ").concat(g-1,",").concat(c,"\n L 0,").concat(c,"\n Z\n "),fill:"white"})),h("mask",{height:"100%",id:"".concat(o,"2"),width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M ".concat(g+1,",0\n L ").concat(x-1,",0\n L ").concat(x-1,",").concat(c,"\n L ").concat(g+1,", ").concat(c,"\n Z\n "),fill:"white"})),h("mask",{height:"100%",id:"".concat(o,"3"),width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M ".concat(x+1,",0\n L ").concat(u,",0\n L ").concat(u,",").concat(c,"\n L ").concat(x+1,", ").concat(c,"\n Z\n "),fill:"white"})),h("path",{class:"graph-path",d:y,fill:_,mask:"url(#".concat(o,"1)")}),h("path",{class:"graph-path--highlight",d:y,fill:_,mask:"url(#".concat(o,"2)")}),h("path",{class:"graph-path",d:y,fill:_,mask:"url(#".concat(o,"3)")})]:h("path",{class:"graph-path",d:y,fill:_}))};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return a}();Graph.style=graphCss;var sliderCss='@charset "UTF-8";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}.scale--s{--calcite-slider-handle-size:10px;--calcite-slider-handle-extension-height:6.5px;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:14px;--calcite-slider-handle-extension-height:8px;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:16px;--calcite-slider-handle-extension-height:10.5px;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;padding:calc(var(--calcite-slider-handle-size) * 0.5);margin:calc(var(--calcite-slider-handle-size) * 0.5) 0;--calcite-slider-full-handle-height:calc(\n var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n )}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-6px}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-8px}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-9px}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-width:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;-webkit-transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;top:0px;bottom:0px;opacity:0}.thumb .handle__label.hyphen::after{content:"—";display:inline-block;width:1em}.thumb .handle__label.hyphen--wrap{display:-ms-flexbox;display:flex}.thumb .handle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:var(--calcite-slider-handle-size);width:var(--calcite-slider-handle-size);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease, -webkit-box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{width:0.125rem;height:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb.thumb--minValue{-webkit-transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-2px}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-23px}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-30px}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-32px}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-top:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-bottom:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-33px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-44px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-49px}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{position:relative;height:0.125rem;border-radius:0px;background-color:var(--calcite-ui-border-2);-webkit-transition:all var(--calcite-internal-animation-timing-medium) ease-in;transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;top:0px;height:0.125rem;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;width:100%;content:"";top:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);height:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}.tick{position:absolute;height:0.25rem;width:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-ui-border-input);border-color:var(--calcite-ui-foreground-1);top:-2px;pointer-events:none;-webkit-margin-start:calc(-1 * 0.125rem);margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{pointer-events:none;margin-top:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.tick__label--min{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing)}.tick__label--max{-webkit-transition:opacity var(--calcite-internal-animation-timing-fast);transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3);height:48px}:host([label-ticks][ticks]) .container{padding-bottom:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-bottom:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-bottom:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-top:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-bottom:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}';function isRange(a){return Array.isArray(a)}var Slider=function(){function a(a){var t=this;registerInstance(this,a);this.calciteSliderInput=createEvent(this,"calciteSliderInput",7);this.calciteSliderChange=createEvent(this,"calciteSliderChange",7);this.calciteSliderUpdate=createEvent(this,"calciteSliderUpdate",7);this.disabled=false;this.hasHistogram=false;this.labelHandles=false;this.labelTicks=false;this.max=100;this.min=0;this.mirrored=false;this.precise=false;this.required=false;this.snap=false;this.step=1;this.value=0;this.scale="m";this.guid="calcite-slider-".concat(guid());this.activeProp="value";this.minMaxValueRange=null;this.minValueDragRange=null;this.maxValueDragRange=null;this.tickValues=[];this.dragUpdate=function(a){a.preventDefault();if(t.dragProp){var e=t.translate(a.clientX||a.pageX);if(isRange(t.value)&&t.dragProp==="minMaxValue"){if(t.minValueDragRange&&t.maxValueDragRange&&t.minMaxValueRange){var i=e-t.minValueDragRange;var n=e+t.maxValueDragRange;if(n<=t.max&&i>=t.min&&n-i===t.minMaxValueRange){t.minValue=t.clamp(i,"minValue");t.maxValue=t.clamp(n,"maxValue")}}else{t.minValueDragRange=e-t.minValue;t.maxValueDragRange=t.maxValue-e;t.minMaxValueRange=t.maxValue-t.minValue}}else{t.setValue(t.dragProp,t.clamp(e,t.dragProp))}}};this.dragEnd=function(a){t.removeDragListeners();t.focusActiveHandle(a.clientX);if(t.lastDragPropValue!=t[t.dragProp]){t.emitChange()}t.dragProp=null;t.lastDragPropValue=null;t.minValueDragRange=null;t.maxValueDragRange=null;t.minMaxValueRange=null};this.storeTrackRef=function(a){t.trackEl=a}}a.prototype.histogramWatcher=function(a){this.hasHistogram=!!a};a.prototype.valueHandler=function(){this.setMinMaxFromValue()};a.prototype.minMaxValueHandler=function(){this.setValueFromMinMax()};a.prototype.connectedCallback=function(){this.setMinMaxFromValue();this.setValueFromMinMax();connectLabel(this);connectForm(this)};a.prototype.disconnectedCallback=function(){disconnectLabel(this);disconnectForm(this);this.removeDragListeners()};a.prototype.componentWillLoad=function(){this.tickValues=this.generateTickValues();if(!isRange(this.value)){this.value=this.clamp(this.value)}afterConnectDefaultValueSet(this,this.value);if(this.snap&&!isRange(this.value)){this.value=this.getClosestStep(this.value)}if(this.histogram){this.hasHistogram=true}};a.prototype.componentDidRender=function(){if(this.labelHandles){this.adjustHostObscuredHandleLabel("value");if(isRange(this.value)){this.adjustHostObscuredHandleLabel("minValue");if(!(this.precise&&!this.hasHistogram)){this.hyphenateCollidingRangeHandleLabels()}}}this.hideObscuredBoundingTickLabels();updateHostInteraction(this)};a.prototype.render=function(){var a;var t=this;var e=this.el.id||this.guid;var i=isRange(this.value)?"maxValue":"value";var n=isRange(this.value)?this.maxValue:this.value;var r=this.minValue||this.min;var l=this.shouldUseMinValue();var s=this.getUnitInterval(l?this.minValue:r)*100;var o=this.getUnitInterval(n)*100;var c=this.shouldMirror();var u="".concat(c?100-s:s,"%");var m="".concat(c?o:100-o,"%");var d=isRange(this.value);var p=h("div",{"aria-disabled":this.disabled,"aria-label":d?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===i},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=i},onPointerDown:function(){return t.dragStart(i)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:m},tabIndex:0},h("div",{class:"handle"}));var b=h("div",{"aria-disabled":this.disabled,"aria-label":d?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===i},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=i},onPointerDown:function(){return t.dragStart(i)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:m},tabIndex:0},h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n),h("div",{class:"handle"}));var f=h("div",{"aria-disabled":this.disabled,"aria-label":d?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===i},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=i},onPointerDown:function(){return t.dragStart(i)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:m},tabIndex:0},h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n));var v=h("div",{"aria-disabled":this.disabled,"aria-label":d?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===i,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=i},onPointerDown:function(){return t.dragStart(i)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:m},tabIndex:0},h("div",{class:"handle"}),h("div",{class:"handle-extension"}));var g=h("div",{"aria-disabled":this.disabled,"aria-label":d?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===i,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=i},onPointerDown:function(){return t.dragStart(i)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:m},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}));var x=h("div",{"aria-disabled":this.disabled,"aria-label":d?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===i,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=i},onPointerDown:function(){return t.dragStart(i)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:m},tabIndex:0},h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n),h("div",{class:"handle"}),h("div",{class:"handle-extension"}));var y=h("div",{"aria-disabled":this.disabled,"aria-label":d?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:true,"thumb--value":true,"thumb--active":this.lastDragProp!=="minMaxValue"&&this.dragProp===i,"thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp=i},onPointerDown:function(){return t.dragStart(i)},ref:function(a){return t.maxHandle=a},role:"slider",style:{right:m},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),h("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n));var _=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue"},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:u},tabIndex:0},h("div",{class:"handle"}));var k=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue"},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:u},tabIndex:0},h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()),h("div",{class:"handle"}));var w=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue"},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:u},tabIndex:0},h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()));var V=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue","thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:u},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}));var H=h("div",{"aria-disabled":this.disabled,"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:true,"thumb--minValue":true,"thumb--active":this.dragProp==="minValue","thumb--precise":true},onBlur:function(){return t.activeProp=null},onFocus:function(){return t.activeProp="minValue"},onPointerDown:function(){return t.dragStart("minValue")},ref:function(a){return t.minHandle=a},role:"slider",style:{left:u},tabIndex:0},h("div",{class:"handle-extension"}),h("div",{class:"handle"}),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),h("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()));return h(Host,{id:e,onTouchStart:this.handleTouchStart},h("div",{class:(a={},a["container"]=true,a["container--range"]=d,a["scale--".concat(this.scale)]=true,a)},this.renderGraph(),h("div",{class:"track",ref:this.storeTrackRef},h("div",{class:"track__range",onPointerDown:function(){return t.dragStart("minMaxValue")},style:{left:"".concat(c?100-o:s,"%"),right:"".concat(c?s:100-o,"%")}}),h("div",{class:"ticks"},this.tickValues.map((function(a){var e="".concat(t.getUnitInterval(a)*100,"%");var i=a>=r&&a<=n;if(l){i=a>=t.minValue&&a<=t.maxValue}return h("span",{class:{tick:true,"tick--active":i},style:{left:c?"":e,right:c?e:""}},t.renderTickLabel(a))})))),h("div",{class:"thumb-container"},!this.precise&&!this.labelHandles&&d&&_,!this.hasHistogram&&!this.precise&&this.labelHandles&&d&&k,this.precise&&!this.labelHandles&&d&&V,this.precise&&this.labelHandles&&d&&H,this.hasHistogram&&!this.precise&&this.labelHandles&&d&&w,!this.precise&&!this.labelHandles&&p,!this.hasHistogram&&!this.precise&&this.labelHandles&&b,!this.hasHistogram&&this.precise&&!this.labelHandles&&v,this.hasHistogram&&this.precise&&!this.labelHandles&&g,!this.hasHistogram&&this.precise&&this.labelHandles&&x,this.hasHistogram&&!this.precise&&this.labelHandles&&f,this.hasHistogram&&this.precise&&this.labelHandles&&y,h(HiddenFormInputSlot,{component:this}))))};a.prototype.renderGraph=function(){return this.histogram?h("calcite-graph",{class:"graph",colorStops:this.histogramStops,data:this.histogram,highlightMax:isRange(this.value)?this.maxValue:this.value,highlightMin:isRange(this.value)?this.minValue:this.min,max:this.max,min:this.min}):null};a.prototype.renderTickLabel=function(a){var t=isRange(this.value);var e=a===this.min;var i=a===this.max;var n=h("span",{class:{tick__label:true,"tick__label--min":e,"tick__label--max":i}},a.toLocaleString());if(this.labelTicks&&!this.hasHistogram&&!t){return n}if(this.labelTicks&&!this.hasHistogram&&t&&!this.precise&&!this.labelHandles){return n}if(this.labelTicks&&!this.hasHistogram&&t&&!this.precise&&this.labelHandles){return n}if(this.labelTicks&&!this.hasHistogram&&t&&this.precise&&(e||i)){return n}if(this.labelTicks&&this.hasHistogram&&!this.precise&&!this.labelHandles){return n}if(this.labelTicks&&this.hasHistogram&&this.precise&&!this.labelHandles&&(e||i)){return n}if(this.labelTicks&&this.hasHistogram&&!this.precise&&this.labelHandles&&(e||i)){return n}if(this.labelTicks&&this.hasHistogram&&this.precise&&this.labelHandles&&(e||i)){return n}return null};a.prototype.keyDownHandler=function(a){var t=this.shouldMirror();var e=this,i=e.activeProp,n=e.max,r=e.min,l=e.pageStep,s=e.step;var o=this[i];var c=a.key;if(c==="Enter"||c===" "){a.preventDefault();return}var h;if(c==="ArrowUp"||c==="ArrowRight"){var u=t&&c==="ArrowRight"?-1:1;h=o+s*u}else if(c==="ArrowDown"||c==="ArrowLeft"){var u=t&&c==="ArrowLeft"?-1:1;h=o-s*u}else if(c==="PageUp"){if(l){h=o+l}}else if(c==="PageDown"){if(l){h=o-l}}else if(c==="Home"){h=r}else if(c==="End"){h=n}if(isNaN(h)){return}a.preventDefault();var m=Number(h.toFixed(decimalPlaces(s)));this.setValue(i,this.clamp(m,i))};a.prototype.clickHandler=function(a){this.focusActiveHandle(a.clientX)};a.prototype.pointerDownHandler=function(a){var t=a.clientX||a.pageX;var e=this.translate(t);var i="value";if(isRange(this.value)){var n=e>=this.minValue&&e<=this.maxValue;if(n&&this.lastDragProp==="minMaxValue"){i="minMaxValue"}else{var r=Math.abs(this.maxValue-e)<Math.abs(this.minValue-e);i=r||e>this.maxValue?"maxValue":"minValue"}}this.lastDragPropValue=this[i];this.dragStart(i);var l=this.el.shadowRoot.querySelector(".thumb:active");if(!l){this.setValue(i,this.clamp(e,i))}};a.prototype.handleTouchStart=function(a){a.preventDefault()};a.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var a;return __generator(this,(function(t){a=this.minHandle?this.minHandle:this.maxHandle;a.focus();return[2]}))}))};a.prototype.setValueFromMinMax=function(){var a=this,t=a.minValue,e=a.maxValue;if(typeof t==="number"&&typeof e==="number"){this.value=[t,e]}};a.prototype.setMinMaxFromValue=function(){var a=this.value;if(isRange(a)){this.minValue=a[0];this.maxValue=a[1]}};a.prototype.onLabelClick=function(){this.setFocus()};a.prototype.shouldMirror=function(){return this.mirrored&&!this.hasHistogram};a.prototype.shouldUseMinValue=function(){if(!isRange(this.value)){return false}return this.hasHistogram&&this.maxValue===0||!this.hasHistogram&&this.minValue===0};a.prototype.generateTickValues=function(){var a=[];var t=this.min;while(this.ticks&&t<this.max+this.ticks){a.push(Math.min(t,this.max));t=t+this.ticks}return a};a.prototype.dragStart=function(a){this.dragProp=a;this.lastDragProp=this.dragProp;this.activeProp=a;document.addEventListener("pointermove",this.dragUpdate);document.addEventListener("pointerup",this.dragEnd);document.addEventListener("pointercancel",this.dragEnd)};a.prototype.focusActiveHandle=function(a){switch(this.dragProp){case"minValue":this.minHandle.focus();break;case"maxValue":this.maxHandle.focus();break;case"minMaxValue":this.getClosestHandle(a).focus();break}};a.prototype.emitInput=function(){this.calciteSliderInput.emit();this.calciteSliderUpdate.emit()};a.prototype.emitChange=function(){this.calciteSliderChange.emit()};a.prototype.removeDragListeners=function(){document.removeEventListener("pointermove",this.dragUpdate);document.removeEventListener("pointerup",this.dragEnd);document.removeEventListener("pointercancel",this.dragEnd)};a.prototype.setValue=function(a,t){var e=this[a];var i=e!==t;if(!i){return}this[a]=t;var n=this.dragProp;if(!n){this.emitChange()}this.emitInput()};a.prototype.clamp=function(a,t){a=clamp(a,this.min,this.max);if(t==="maxValue"){a=Math.max(a,this.minValue)}if(t==="minValue"){a=Math.min(a,this.maxValue)}return a};a.prototype.translate=function(a){var t=this.max-this.min;var e=this.trackEl.getBoundingClientRect(),i=e.left,n=e.width;var r=(a-i)/n;var l=this.shouldMirror();var s=this.clamp(this.min+t*(l?1-r:r));var o=Number(s.toFixed(decimalPlaces(this.step)));if(this.snap&&this.step){o=this.getClosestStep(o)}return o};a.prototype.getClosestStep=function(a){a=Number(this.clamp(a).toFixed(decimalPlaces(this.step)));if(this.step){var t=Math.round(a/this.step)*this.step;a=Number(this.clamp(t).toFixed(decimalPlaces(this.step)))}return a};a.prototype.getClosestHandle=function(a){return this.getDistanceX(this.maxHandle,a)>this.getDistanceX(this.minHandle,a)?this.minHandle:this.maxHandle};a.prototype.getDistanceX=function(a,t){return Math.abs(a.getBoundingClientRect().left-t)};a.prototype.getFontSizeForElement=function(a){return Number(window.getComputedStyle(a).getPropertyValue("font-size").match(/\d+/)[0])};a.prototype.getUnitInterval=function(a){a=this.clamp(a);var t=this.max-this.min;return(a-this.min)/t};a.prototype.adjustHostObscuredHandleLabel=function(a){var t=this.el.shadowRoot.querySelector(".handle__label--".concat(a));var e=this.el.shadowRoot.querySelector(".handle__label--".concat(a,".static"));var i=this.el.shadowRoot.querySelector(".handle__label--".concat(a,".transformed"));var n=e.getBoundingClientRect();var r=this.getHostOffset(n.left,n.right);t.style.transform="translateX(".concat(r,"px)");i.style.transform="translateX(".concat(r,"px)")};a.prototype.hyphenateCollidingRangeHandleLabels=function(){var a=this.el.shadowRoot;var t=this.shouldMirror();var e=t?"value":"minValue";var i=t?"minValue":"value";var n=a.querySelector(".handle__label--".concat(e));var r=a.querySelector(".handle__label--".concat(e,".static"));var l=a.querySelector(".handle__label--".concat(e,".transformed"));var s=this.getHostOffset(r.getBoundingClientRect().left,r.getBoundingClientRect().right);var o=a.querySelector(".handle__label--".concat(i));var c=a.querySelector(".handle__label--".concat(i,".static"));var h=a.querySelector(".handle__label--".concat(i,".transformed"));var u=this.getHostOffset(c.getBoundingClientRect().left,c.getBoundingClientRect().right);var m=this.getFontSizeForElement(n);var d=this.getRangeLabelOverlap(l,h);var p=n;var b=m/2;if(d>0){p.classList.add("hyphen","hyphen--wrap");if(u===0&&s===0){var f=d/2-b;f=Math.sign(f)===-1?Math.abs(f):-f;var v=this.getHostOffset(l.getBoundingClientRect().left+f-b,l.getBoundingClientRect().right+f-b);var g=d/2;var x=this.getHostOffset(h.getBoundingClientRect().left+g,h.getBoundingClientRect().right+g);if(v!==0){f+=v;g+=v}if(x!==0){f+=x;g+=x}n.style.transform="translateX(".concat(f,"px)");l.style.transform="translateX(".concat(f-b,"px)");o.style.transform="translateX(".concat(g,"px)");h.style.transform="translateX(".concat(g,"px)")}else if(s>0||u>0){n.style.transform="translateX(".concat(s+b,"px)");o.style.transform="translateX(".concat(d+u,"px)");h.style.transform="translateX(".concat(d+u,"px)")}else if(s<0||u<0){var f=Math.abs(s)+d-b;f=Math.sign(f)===-1?Math.abs(f):-f;n.style.transform="translateX(".concat(f,"px)");l.style.transform="translateX(".concat(f-b,"px)")}}else{p.classList.remove("hyphen","hyphen--wrap");n.style.transform="translateX(".concat(s,"px)");l.style.transform="translateX(".concat(s,"px)");o.style.transform="translateX(".concat(u,"px)");h.style.transform="translateX(".concat(u,"px)")}};a.prototype.hideObscuredBoundingTickLabels=function(){var a=isRange(this.value);if(!this.hasHistogram&&!a&&!this.labelHandles&&!this.precise){return}if(!this.hasHistogram&&!a&&this.labelHandles&&!this.precise){return}if(!this.hasHistogram&&!a&&!this.labelHandles&&this.precise){return}if(!this.hasHistogram&&!a&&this.labelHandles&&this.precise){return}if(!this.hasHistogram&&a&&!this.precise){return}if(this.hasHistogram&&!this.precise&&!this.labelHandles){return}var t=this.el.shadowRoot.querySelector(".thumb--minValue");var e=this.el.shadowRoot.querySelector(".thumb--value");var i=this.el.shadowRoot.querySelector(".tick__label--min");var n=this.el.shadowRoot.querySelector(".tick__label--max");if(!t&&e&&i&&n){i.style.opacity=this.isMinTickLabelObscured(i,e)?"0":"1";n.style.opacity=this.isMaxTickLabelObscured(n,e)?"0":"1"}if(t&&e&&i&&n){i.style.opacity=this.isMinTickLabelObscured(i,t)||this.isMinTickLabelObscured(i,e)?"0":"1";n.style.opacity=this.isMaxTickLabelObscured(n,t)||this.isMaxTickLabelObscured(n,e)&&this.hasHistogram?"0":"1"}};a.prototype.getHostOffset=function(a,t){var e=this.el.getBoundingClientRect();var i=7;if(a+i<e.left){return e.left-a-i}if(t-i>e.right){return-(t-e.right)+i}return 0};a.prototype.getRangeLabelOverlap=function(a,t){var e=a.getBoundingClientRect();var i=t.getBoundingClientRect();var n=this.getFontSizeForElement(a);var r=e.right+n-i.left;return Math.max(r,0)};a.prototype.isMinTickLabelObscured=function(a,t){var e=a.getBoundingClientRect();var i=t.getBoundingClientRect();return intersects(e,i)};a.prototype.isMaxTickLabelObscured=function(a,t){var e=a.getBoundingClientRect();var i=t.getBoundingClientRect();return intersects(e,i)};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(a,"watchers",{get:function(){return{histogram:["histogramWatcher"],value:["valueHandler"],minValue:["minMaxValueHandler"],maxValue:["minMaxValueHandler"]}},enumerable:false,configurable:true});return a}();Slider.style=sliderCss;export{Graph as calcite_graph,Slider as calcite_slider};
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2022-03-17T22:09:14",
2
+ "timestamp": "2022-03-17T23:35:51",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "2.14.2",
@@ -16023,16 +16023,19 @@
16023
16023
  },
16024
16024
  {
16025
16025
  "name": "value",
16026
- "type": "number",
16026
+ "type": "number | number[]",
16027
16027
  "mutable": true,
16028
16028
  "attr": "value",
16029
16029
  "reflectToAttr": true,
16030
16030
  "docs": "Currently selected number (if single select)",
16031
16031
  "docsTags": [],
16032
- "default": "null",
16032
+ "default": "0",
16033
16033
  "values": [
16034
16034
  {
16035
16035
  "type": "number"
16036
+ },
16037
+ {
16038
+ "type": "number[]"
16036
16039
  }
16037
16040
  ],
16038
16041
  "optional": false,
@@ -59,7 +59,9 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
59
59
  /** Show tick marks on the number line at provided interval */
60
60
  ticks?: number;
61
61
  /** Currently selected number (if single select) */
62
- value: null | number;
62
+ value: null | number | number[];
63
+ valueHandler(): void;
64
+ minMaxValueHandler(): void;
63
65
  /**
64
66
  * Specify the scale of the slider, defaults to m
65
67
  */
@@ -102,7 +104,6 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
102
104
  formEl: HTMLFormElement;
103
105
  defaultValue: Slider["value"];
104
106
  private guid;
105
- private isRange;
106
107
  private dragProp;
107
108
  private lastDragProp;
108
109
  private lastDragPropValue;
@@ -114,6 +115,8 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
114
115
  private minValueDragRange;
115
116
  private maxValueDragRange;
116
117
  private tickValues;
118
+ setValueFromMinMax(): void;
119
+ setMinMaxFromValue(): void;
117
120
  onLabelClick(): void;
118
121
  private shouldMirror;
119
122
  private shouldUseMinValue;