npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.b85326c → 0.0.0-insider.b9211de - Mend

@six-group/ui-library 0.0.0-insider.b85326c → 0.0.0-insider.b9211de

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (494) hide show

package/dist/components/six-error-page.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
-import { d as defineCustomElement$2 } from './p-DXhOme6Y.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { d as defineCustomElement$2 } from './p-CH82uB3t.js';
 const sixErrorPageCss = ".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";
@@ -94,7 +94,7 @@ const SixErrorPage$1 = /*@__PURE__*/ proxyCustomElement(class SixErrorPage exten
         return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
     }
     render() {
-        return (h("div", { key: '4ea2ec6cfd20308f5436337b7c76c5fe754aa24f', part: "container" }, h("div", { key: '1324fd2555df87799bdd23d36adcb7b00885a076', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: 'e7efd056f880c92385a9945d46c1c04c46872fc3', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '75d52fbe4b3561c226c5830e15793d71ec877d46', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'f8ac2279ec7bda15115f2a8ffdad4e80ccdc9b42', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
+        return (h("div", { key: 'b48ab908b37b2b4d6d6ee80b2d1f73038800a0dc', part: "container" }, h("div", { key: 'd0fd1370a7b3500a1bbf4a798d5d64b2a309fabf', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: '88a00b48d434b687f270ee50e6506e23a21b0414', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '275010c6651665efd03f3a9b36b074d0b72a9111', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'efc23d90edea6ce0bc3843a704a4ffb788f84042', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
     }
     static get style() { return sixErrorPageCss; }
 }, [1, "six-error-page", {

package/dist/components/six-error.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixError$1, d as defineCustomElement$1 } from './p-Cr6sHYme.js';
+import { S as SixError$1, d as defineCustomElement$1 } from './p-BLocui1Z.js';
 const SixError = SixError$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-file-list-item.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
-import { d as defineCustomElement$2 } from './p-Mse5vRUS.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
+import { d as defineCustomElement$2 } from './p-CdBejqVk.js';
 const sixFileListItemCss = ".six-files-list-item{padding-bottom:0.5rem}.six-files-list-item__name{color:var(--six-color-action-600);cursor:pointer}.six-files-list-item__name--disabled{cursor:inherit;color:var(--six-color-web-rock-500)}.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled){color:var(--six-color-action-500)}.six-files-list-item__date{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__size{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__icon{padding-left:0.5rem;display:inline-block;transform:translateY(-3px);cursor:pointer;color:var(--six-color-web-rock-600)}.six-files-list-item__icon--disabled{cursor:not-allowed;color:var(--six-color-web-rock-500)}.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled){color:var(--six-color-web-rock-900)}";

package/dist/components/six-file-list.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixFileListCss = ".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";
@@ -9,7 +9,7 @@ const SixFileList$1 = /*@__PURE__*/ proxyCustomElement(class SixFileList extends
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '38755b01aeafb28e3f268925a347fabdb53cac9b', class: "six-files-list__container" }, h("slot", { key: '7e9e866c6b7f6dffbe26ba5b10c46b135cc1c389' })));
+        return (h("div", { key: 'cf80dfd0ccfbe849dd17bfd4d940fd8ef0d1930e', class: "six-files-list__container" }, h("slot", { key: 'cb9149f512f113f2012328a102a5eac8fef55f74' })));
     }
     static get style() { return sixFileListCss; }
 }, [1, "six-file-list"]);

package/dist/components/six-file-upload.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
-import { d as defineCustomElement$4 } from './p-Cr6sHYme.js';
-import { d as defineCustomElement$3 } from './p-Mse5vRUS.js';
-import { d as defineCustomElement$2 } from './p-DV46ui1Q.js';
+import { d as defineCustomElement$4 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$3 } from './p-CdBejqVk.js';
+import { d as defineCustomElement$2 } from './p-BB2rei7y.js';
 const sixFileUploadCss = ".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:border-box}.sr-only.sc-six-file-upload{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload{display:flex;align-items:center}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload six-spinner.sc-six-file-upload{margin-right:var(--six-spacing-x-small)}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive);cursor:not-allowed}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}.six-file-upload__error-text.sc-six-file-upload{font-size:var(--six-input-help-text-font-size-medium)}";

package/dist/components/six-footer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixFooterCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-medium-top)}";
@@ -9,7 +9,7 @@ const SixFooter$1 = /*@__PURE__*/ proxyCustomElement(class SixFooter extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("footer", { key: 'fe39b58edfd331a6b6ae1d551286fd45e3783f5d', class: "six-footer" }, h("slot", { key: '7c93a54de4e4160adabc4790b368401b790d6fcc' })));
+        return (h("footer", { key: '21f693d3b5de440dba60926318d0627ca1c260b1', class: "six-footer" }, h("slot", { key: 'ecd570f552abf35060d5b449c4ce900b23b2abb6' })));
     }
     static get style() { return sixFooterCss; }
 }, [1, "six-footer"]);

package/dist/components/six-group-label.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
-import { F as FormControl } from './p-BmW8cpEG.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { F as FormControl } from './p-DIkvCBxr.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
-import { d as defineCustomElement$2 } from './p-Cr6sHYme.js';
+import { d as defineCustomElement$2 } from './p-BLocui1Z.js';
 const sixGroupLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}";
@@ -46,7 +46,7 @@ const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel ext
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
     render() {
-        return (h(FormControl, { key: '2bdb482e336b09325fe0bfc30cd3082846cbce6a', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: 'cd79f08e30f7059290c81d83bb00e5b9f68a1181' })));
+        return (h(FormControl, { key: '69a1a4643e5c47c3348c90f7a8c6227da1bdf6c0', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: '49f66c0010c80c65a8d95c6f68ed06adbab00fdb' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-header-dropdown-item.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
 import { g as getSlot } from './p-j3oIB5oT.js';
-import { d as defineCustomElement$8 } from './p-Bl7vxyI3.js';
-import { d as defineCustomElement$7 } from './p-CNVkBlqA.js';
-import { d as defineCustomElement$6 } from './p-Cr6sHYme.js';
-import { d as defineCustomElement$5 } from './p-Mse5vRUS.js';
-import { d as defineCustomElement$4 } from './p-BxWEEwNO.js';
-import { d as defineCustomElement$3 } from './p-mLQ66WNK.js';
-import { d as defineCustomElement$2 } from './p-B-XztaHV.js';
+import { d as defineCustomElement$8 } from './p-BKl-wAjt.js';
+import { d as defineCustomElement$7 } from './p-iuKqFOKd.js';
+import { d as defineCustomElement$6 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$5 } from './p-CdBejqVk.js';
+import { d as defineCustomElement$4 } from './p-CNEhbYaS.js';
+import { d as defineCustomElement$3 } from './p-C12rf0Ka.js';
+import { d as defineCustomElement$2 } from './p-BS2kSSCX.js';
 const sixHeaderDropdownItemCss = ":host{height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-dropdown-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
@@ -33,9 +33,9 @@ const SixHeaderDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader
         this.updateDropdownDistance();
     }
     render() {
-        return (h(Host, { key: 'f2d143e5da9526b536b6e4d663d7f854ee1a3bf2', class: {
+        return (h(Host, { key: '98b4b1ccfd9a0857cc30679ce08bdf79fd22ba57', class: {
                 'six-header-dropdown-item--active': this.active,
-            } }, h("six-dropdown", { key: 'ad3420fd33db605a06c62a4e7fdca7ecbeb6e3c2', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: '0bf9ab3feeaa7dbbaf48fb26b18919d0d5e4e936', slot: "trigger", name: "trigger" }), h("slot", { key: '25e063e170bac1f46a805cb2b4b49977212b560a' }))));
+            } }, h("six-dropdown", { key: '584f301f301f84f39e7dcbc724fb5afd7adeca55', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: 'cff60f757172303731a50d00717a476f48f3e56c', slot: "trigger", name: "trigger" }), h("slot", { key: 'f1a80cd16e7c30352a15db4a1550c38fa0a21023' }))));
     }
     updateDropdownDistance() {
         const trigger = getSlot(this.host, 'trigger');

package/dist/components/six-header-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
 const sixHeaderItemCss = ":host{position:relative;isolation:isolate;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
@@ -17,7 +17,7 @@ const SixHeaderItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderItem ext
         this.active = false;
     }
     render() {
-        return (h(Host, { key: 'c53b61e12c5df9a806e3b3fb9d5d5398dd7d928f', class: { 'six-header-item--active': this.active } }, h("slot", { key: '92e5a89e4a4bcb795c3bfc9f3e076d267be01153' })));
+        return (h(Host, { key: 'e94d72bc167c8ade7d81f416f48ee900693f48c0', class: { 'six-header-item--active': this.active } }, h("slot", { key: '86eac95abbec808cfe2bab0f1ad4b89dd69d781d' })));
     }
     static get style() { return sixHeaderItemCss; }
 }, [1, "six-header-item", {

package/dist/components/six-header-menu-button.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
-import { d as defineCustomElement$3 } from './p-BtNjuUha.js';
-import { d as defineCustomElement$2 } from './p-DV46ui1Q.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { d as defineCustomElement$3 } from './p-BDCdPEjW.js';
+import { d as defineCustomElement$2 } from './p-BB2rei7y.js';
 const sixHeaderMenuButtonCss = ":host{display:block}six-button::part(base){border:none;padding-right:0}six-button[disabled]::part(base){color:var(--six-color-web-rock-600);background-color:transparent}six-button::part(label){border:none;font-weight:var(--six-font-weight-bold);font-size:var(--six-font-size-small);padding-left:0}six-button:focus::part(base),six-button:hover::part(base),six-button:active::part(base){background-color:initial;border-color:initial}six-button:hover::part(base),six-button:active::part(base){color:var(--six-header-selected-app-color-hover)}";
@@ -21,7 +21,7 @@ const SixHeaderMenuButton$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderMe
         this.reset = false;
     }
     render() {
-        return (h("six-button", { key: 'f24f383b4bfab7416a6da813c08fe42905560d32', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: '0c5dff4023b79b26d0e7c8d79adb78223d4df61c', name: "suffix", slot: "suffix" }), h("slot", { key: 'cdf0bf1a34a284066e288c1b138afcedb02c7e4a', name: "prefix", slot: "prefix" }), h("slot", { key: 'c5e704b918a9e2395a61f40fdbf3ac74da97285f' })));
+        return (h("six-button", { key: '8f16a33fa8b582d5ec3d149d01bbfd8cc99816f7', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: '52e7d5689dd7134a5a95f5ec065eb6ebfe274dc4', name: "suffix", slot: "suffix" }), h("slot", { key: '6170bff5e2846774d293a9eee5e1b94149b609cf', name: "prefix", slot: "prefix" }), h("slot", { key: '6506ee3f4d7bd48e6b0f67f0a5ac9911d74786f1' })));
     }
     static get style() { return sixHeaderMenuButtonCss; }
 }, [1, "six-header-menu-button", {

package/dist/components/six-header.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
 import { E as EventListeners } from './p-C4h4qpGl.js';
 import { g as getSlot } from './p-j3oIB5oT.js';
@@ -29,11 +29,11 @@ const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends H {
         this.eventListeners.removeAll();
     }
     render() {
-        return (h(Host, { key: '3c03ee28b12600576e0b714e5077ea2c800a4c65' }, h("header", { key: '8d3807cb3b05ca07cce629bf1dcdbdb49a6d400a', part: "header", class: "six-header" }, h("slot", { key: '7a920fedf946e99c4d7a538706e8061e165a0015' })), h("div", { key: 'c884119828755832b8312412647b8ff89fae5a88', class: {
+        return (h(Host, { key: '0a956c7cad628545be41c926565852f8b9489013' }, h("header", { key: '86ef3e269cdd9ee040c36189e886afca8024f0bd', part: "header", class: "six-header" }, h("slot", { key: 'c1f6c06a72dcbb8518ec4b66d047461d10b6dab9' })), h("div", { key: '875e7f2dae91404374e8481a303b0bc0ed72b24a', class: {
                 'six-header__search-field': true,
                 'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { key: '42d1ab374144bc3da2b1cd144e3328c64ee75204', name: 'search-field' }))));
+            } }, h("slot", { key: '366b4b035f3b5a480cdd980cd6271fe181fca2c5', name: 'search-field' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get host() { return this; }

package/dist/components/six-icon-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixIconButton$1, d as defineCustomElement$1 } from './p-eW-dQ-wI.js';
+import { S as SixIconButton$1, d as defineCustomElement$1 } from './p-Dyx3R5VU.js';
 const SixIconButton = SixIconButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixIcon$1, d as defineCustomElement$1 } from './p-Mse5vRUS.js';
+import { S as SixIcon$1, d as defineCustomElement$1 } from './p-CdBejqVk.js';
 const SixIcon = SixIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixInput$1, d as defineCustomElement$1 } from './p-BxWEEwNO.js';
+import { S as SixInput$1, d as defineCustomElement$1 } from './p-CNEhbYaS.js';
 const SixInput = SixInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-item-picker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixItemPicker$1, d as defineCustomElement$1 } from './p-CpcN3YG9.js';
+import { S as SixItemPicker$1, d as defineCustomElement$1 } from './p-D7VTCp8h.js';
 const SixItemPicker = SixItemPicker$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-language-switcher.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";

package/dist/components/six-layout-grid.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
 const sixLayoutGridCss = ":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";
@@ -18,7 +18,7 @@ const SixLayoutGrid$1 = /*@__PURE__*/ proxyCustomElement(class SixLayoutGrid ext
         this.handleColumnsChange();
     }
     render() {
-        return (h(Host, { key: '1417d46422814262f561148684b74031efff6b3f' }, h("slot", { key: '319d6bdac4fdd3d25e3271e9db5201f3452a3733' })));
+        return (h(Host, { key: '93230c50bad422e3bfab05966bdf14e968f0eb73' }, h("slot", { key: 'acfb4f0ea76c788683349870d990a0e0ffc338bb' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-logo.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixLogoCss = ":host{--height:unset}svg{display:block}svg.six{height:var(--height, 20px)}svg.bme{height:var(--height, 40px)}";

package/dist/components/six-main-container.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
 const sixMainContainerCss = ":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";
@@ -12,7 +12,7 @@ const SixMainContainer$1 = /*@__PURE__*/ proxyCustomElement(class SixMainContain
         this.padded = true;
     }
     render() {
-        return (h(Host, { key: '6a58c3bf1117f6d8ec771b10b9bb5eeca8f75d38' }, h("div", { key: '709e6b3c0f6b915cdb02b6231b8475a32aaef821', part: "left-margin", class: "left-margin" }), h("div", { key: '8bca7342d56b444696b39e3b4e03b69fc7a8724a', part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", { key: '8cae2e164ec3d6370b2d481bc62f4c2af2b194c5' })), h("div", { key: '5c4a7ecbbaff6cd381ba7a3253ccbc20a72e90cc', part: "right-margin", class: "right-margin" })));
+        return (h(Host, { key: '907a3b8ce2b10b71a20f97f0168a43a0ab5cf44c' }, h("div", { key: 'e04d2cc3e6a60870bd943d5ca34ab886180b5b99', part: "left-margin", class: "left-margin" }), h("div", { key: '5d0c9a5a499c49ad95181053df22fcb66f6d3661', part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", { key: 'a4d5ae36a32f6f2fc2a8ed604899554fe7eb8acc' })), h("div", { key: '63725bee77f3a2e6d5c6bd631684fd8b8c37d4b1', part: "right-margin", class: "right-margin" })));
     }
     get host() { return this; }
     static get style() { return sixMainContainerCss; }

package/dist/components/six-menu-divider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixMenuDividerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu-divider{border-top:solid var(--six-border-width) var(--six-menu-divider-color);margin-top:var(--six-spacing-xx-small);margin-bottom:var(--six-spacing-xx-small)}";
@@ -9,7 +9,7 @@ const SixMenuDivider$1 = /*@__PURE__*/ proxyCustomElement(class SixMenuDivider e
         this.__attachShadow();
     }
     render() {
-        return h("div", { key: '186bd0295f652e28206b3e01a092c0cc67128874', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
+        return h("div", { key: 'e5cfe610c3578305a43cac1d94aabd9d4f3483f8', part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
     }
     static get style() { return sixMenuDividerCss; }
 }, [1, "six-menu-divider"]);

package/dist/components/six-menu-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixMenuItem$1, d as defineCustomElement$1 } from './p-B-XztaHV.js';
+import { S as SixMenuItem$1, d as defineCustomElement$1 } from './p-BS2kSSCX.js';
 const SixMenuItem = SixMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-menu-label.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixMenuLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu-label{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);color:var(--six-input-label-color);padding:var(--six-spacing-xx-small) var(--six-spacing-small);user-select:none}";
@@ -9,7 +9,7 @@ const SixMenuLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixMenuLabel exten
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'ac09a02af0b1d088f83877d5065b9b747032be77', part: "base", class: "menu-label" }, h("slot", { key: 'a4f45f90b223d3951bdb5a36b8667d67bcbf1fc7' })));
+        return (h("div", { key: '8d796cb82a38cccc46f32ff8ce33d453e7bb7166', part: "base", class: "menu-label" }, h("slot", { key: '551f3905fa1d78d307912f1ba366b3718ae8facf' })));
     }
     static get style() { return sixMenuLabelCss; }
 }, [1, "six-menu-label"]);

package/dist/components/six-menu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixMenu$1, d as defineCustomElement$1 } from './p-mLQ66WNK.js';
+import { S as SixMenu$1, d as defineCustomElement$1 } from './p-C12rf0Ka.js';
 const SixMenu = SixMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-picto.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SixPicto$1, d as defineCustomElement$1 } from './p-DXhOme6Y.js';
+import { S as SixPicto$1, d as defineCustomElement$1 } from './p-CH82uB3t.js';
 const SixPicto = SixPicto$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-progress-bar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixProgressBarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--height:16px;--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--label-color:var(--six-progress-label-color);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--sl-border-radius-pill);overflow:hidden}.progress-bar__indicator{height:100%;font-family:var(--six-font-sans);font-size:12px;font-weight:var(--six-font-weight-normal);background-color:var(--indicator-color);color:var(--label-color);text-align:center;line-height:var(--height);white-space:nowrap;overflow:hidden;transition:400ms width, 400ms background-color;user-select:none}.progress-bar--indeterminate .progress-bar__indicator{position:absolute;animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{left:-50%;width:50%}75%,100%{left:100%;width:50%}}";
@@ -13,12 +13,12 @@ const SixProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressBar e
         this.indeterminate = false;
     }
     render() {
-        return (h("div", { key: 'e11c3e9f83321a55170e04e84ab63c2e8b9f12a7', part: "base", class: {
+        return (h("div", { key: 'd89c7c456819839b638cadc372bf2ab071e73918', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: '9c8b4a3f5ada54163272cbd7e8cf9e7cb90dc39b', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { key: 'ce4d45162f0aeb2c5affd3a6aef552c2f4078a1b', part: "indicator", class: "progress-bar__indicator", style: {
                 width: `${this.percentage}%`,
-            } }, !this.indeterminate && (h("span", { key: '16be9dda6192ecf33efb192b23694cc006ceb4fd', part: "label", class: "progress-bar__label" }, h("slot", { key: '1e102597d1ec71a54fecb87f336aa711fddd8558' }))))));
+            } }, !this.indeterminate && (h("span", { key: '911269a53f42a7e94fc1be782f9e903e32650c75', part: "label", class: "progress-bar__label" }, h("slot", { key: '59daab81dd0812c99c32b304479b794d94c6e82e' }))))));
     }
     static get style() { return sixProgressBarCss; }
 }, [1, "six-progress-bar", {

package/dist/components/six-progress-ring.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
 const sixProgressRingCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);display:inline-flex}.progress-ring{display:inline-flex;align-items:center;justify-content:center;position:relative}.progress-ring__image{transform:rotate(-90deg);transform-origin:50% 50%}.progress-ring__track{stroke:var(--track-color)}.progress-ring__indicator{stroke:var(--indicator-color);transition:0.35s stroke-dashoffset, 0.35s stroke}.progress-ring__label{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;user-select:none;font-family:var(--six-font-family)}";
@@ -31,7 +31,7 @@ const SixProgressRing$1 = /*@__PURE__*/ proxyCustomElement(class SixProgressRing
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: '6f48ef171c32eef14162bb15d53befc7bf30f923', part: "base", class: "progress-ring" }, h("svg", { key: 'b1479eec3a5dbabdb39716484c58396a09db1272', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: 'abb6fd5f35d514fe1580e02fd251774e107da5ce', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'ca3fb1650516df81c8757594a0ce0d62d82febd3', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: 'c9b746f63f7c8bb0b325397d0344f6d82b8e3c0d', part: "label", class: "progress-ring__label" }, h("slot", { key: '905b3a001f4d95c31e80e5d74ecd29d0ec59992a' }))));
+        return (h("div", { key: '4b619cac39642c43455886ab94067bfd1a96183c', part: "base", class: "progress-ring" }, h("svg", { key: 'eb438641c5bcc7de1ab356881b8480bc65115f62', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '63a5359a0f22e0c657a629f50ec9addefd409113', class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { key: 'ccf1f8120f745cbc060f0a5fb9fed00ef52fa4db', ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { key: '775c0d0707e480496807e2cadb47be1a551cc128', part: "label", class: "progress-ring__label" }, h("slot", { key: '6849d9832eb3845066bb7008a19604668d548ce8' }))));
     }
     static get watchers() { return {
         "percentage": ["handlePercentageChange"]

package/dist/components/six-radio.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
 import { E as EventListeners } from './p-C4h4qpGl.js';
 const sixRadioCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.radio{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
@@ -104,12 +104,12 @@ const SixRadio$1 = /*@__PURE__*/ proxyCustomElement(class SixRadio extends H {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: 'cdb722e8b78cf02f527d97b3dab6f0679b333c21', part: "base", class: {
+        return (h("label", { key: '879cb08317d04deeca8282c8b69e6eb20a9adf07', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '9c627a113fe27c340b7f6162d9bde328220c8960', part: "control", class: "radio__control" }, h("span", { key: '2ce65408f6c88cb7396c480eba0cc2dd663a3c85', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'f4aac67ee8b4a5fb2af26305799b6648e496941e', viewBox: "0 0 16 16" }, h("g", { key: 'f1bc8651eae70a2ede2dcbf5f48f8237d9f883e6', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '7ffa14023971330ae34e041871c0db912789999a', fill: "currentColor" }, h("circle", { key: '10d6f37d1227677ba8044a8bffd89f8828e54e0d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '55ae32be4a36646c17d1238e486df0a483db2650', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '08128b78c44c561e9dc97f840bacf46059c2483b', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '9dd8bcf11566bd74d7b8e91a71cd276947562426' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '6c2acde83c5a7d3ec9de36b6e73776f7c614b8f4', part: "control", class: "radio__control" }, h("span", { key: 'f741f110abf476e80c54d5ba7e55f9ce7babb68b', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '9635c588916db7dc635a4581e50416d16114ee58', viewBox: "0 0 16 16" }, h("g", { key: '5d33f15ab6063156808d054bd6f736303e8afecc', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '25aead7a47efab4b1b86aa50070ba656855bfdf0', fill: "currentColor" }, h("circle", { key: '33364d9740a62291991de71288535fe685593fa1', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '2ba91f62d15618ea3292902137649fdc579e05fa', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'e8d5db9e8b63c6f5c25ef1239291c175257edf90', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '1aed8a157b967b10acbfb960cd725b88fdf83cf3' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-range.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BtF2Ym6T.js';
-import { F as FormControl } from './p-BmW8cpEG.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
+import { F as FormControl } from './p-DIkvCBxr.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
 import { E as EventListeners } from './p-C4h4qpGl.js';
-import { d as defineCustomElement$2 } from './p-Cr6sHYme.js';
+import { d as defineCustomElement$2 } from './p-BLocui1Z.js';
 const sixRangeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--thumb-size:14px;--tooltip-offset-y:10px;--track-color:var(--six-color-web-rock-900);--thumb-color:var(--six-color-web-rock-900);--track-height:3px;display:block}.range{position:relative}.range .range__control{-webkit-appearance:none;width:100%;height:var(--six-input-height-medium);background:transparent;line-height:var(--six-input-height-medium);vertical-align:middle}.range .range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:3px;border:none}.range .range__control::-webkit-slider-thumb{border:none;width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);-webkit-appearance:none;margin-top:calc(var(--thumb-size) / -2 + var(--track-height) / 2);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-webkit-slider-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-webkit-slider-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-webkit-slider-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control::-moz-focus-outer{border:0}.range .range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--six-progress-track-color);border-radius:3px;border:none}.range .range__control::-moz-range-progress{height:var(--track-height);border-radius:3px;background-color:var(--track-color);border:none}.range .range__control::-moz-range-thumb{border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background-color:var(--thumb-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, var(--six-transition-fast) transform;cursor:pointer}.range .range__control:not(:disabled)::-moz-range-thumb:hover{background-color:var(--thumb-color)}.range .range__control:not(:disabled):focus::-moz-range-thumb{background-color:var(--thumb-color)}.range .range__control:not(:disabled)::-moz-range-thumb:active{background-color:var(--thumb-color);cursor:grabbing}.range .range__control:focus{outline:none}.range .range__control:disabled::-webkit-slider-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range .range__control:disabled::-moz-range-thumb{cursor:not-allowed;color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-300);background-color:var(--six-color-web-rock-300)}.range__tooltip{position:absolute;z-index:var(--six-z-index-tooltip);left:2px;border-radius:var(--six-border-radius-medium);background-color:var(--six-color-web-rock-900);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-color-white);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-xx-small);transition:var(--six-transition-fast) opacity;pointer-events:none}.range__tooltip::after{content:\"\";position:absolute;width:0;height:0;left:50%;margin-left:calc(-1 * var(--six-tooltip-arrow-size))}.range--tooltip-visible .range__tooltip{opacity:1}.range--tooltip-top .range__tooltip{top:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-top .range__tooltip::after{border-top:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;top:100%}.range--tooltip-bottom .range__tooltip{bottom:calc(-1 * var(--thumb-size) - var(--tooltip-offset-y))}.range--tooltip-bottom .range__tooltip::after{border-bottom:var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent;bottom:100%}";
@@ -196,7 +196,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends H {
         }
     }
     render() {
-        return (h(FormControl, { key: '0f53d7ccd1af680cc40ec8de87960b243c33a3be', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'd51cc4d2afde55aed2941878912eb3f741c89cf1', part: "base", class: {
+        return (h(FormControl, { key: '9b01de18ce3b59ec8fe5c60edbf94ca2d7911d9d', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '66581ce24488802b0b81030aa916dfc6880e4498', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -204,7 +204,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends H {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: 'bfa94717d2ad6e8b5e7b513aa49697b1232e0502', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '4db780c67679a9e6d36ead8ae23e5ba6ead2a5ec', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '9e6a87ae4004e65bc9861064654bcc1a5babcd07', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '701b765cf0c2e3e3ed3a8ebcb3853a53f389ff3b', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-range.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-range.js","mappings":"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","names":["SixRange","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 2px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-range.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,0pNAA0pN;;ACM9qN,IAAI,EAAE,GAAG,CAAC;MAqBGA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;;;;AAMU,QAAA,IAAA,CAAA,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE;AACzB,QAAA,IAAA,CAAA,OAAO,GAAG,CAAe,YAAA,EAAA,EAAE,EAAE;AAC7B,QAAA,IAAA,CAAA,UAAU,GAAG,CAAmB,gBAAA,EAAA,EAAE,EAAE;AACpC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAoB,iBAAA,EAAA,EAAE,EAAE;AACtC,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,EAAE;AAQpC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAChB,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AACvB,QAAA,IAAgB,CAAA,gBAAA,GAAG,KAAK;AACxB,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AACpB,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;;AAGnB,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;;AAGQ,QAAA,IAAK,CAAA,KAAA,GAAG,CAAC;;AAG1B,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAQ,CAAA,QAAA,GAAG,EAAE;;AAGb,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAS,CAAA,SAAA,GAAsB,EAAE;;AAMhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGhC,QAAA,IAAG,CAAA,GAAA,GAAG,CAAC;;AAGP,QAAA,IAAG,CAAA,GAAA,GAAG,GAAG;;AAGT,QAAA,IAAI,CAAA,IAAA,GAAG,CAAC;;AAGR,QAAA,IAAO,CAAA,OAAA,GAA8B,KAAK;;AAG1C,QAAA,IAAgB,CAAA,gBAAA,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,QAAQ,EAAE;AAuEtD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;AAC5B,gBAAA,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;YAEjD,qBAAqB,CAAC,MAAK;AACzB,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,aAAC,CAAC;AACJ,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACnB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;AAC5B,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;;AAEpD,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;;AACzB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;AAC5B,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;;AAElD,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;YACtD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;YAC/C,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAC1D,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,IAAI,CAAC,QAAQ,EAAE;AACjB,SAAC;AA6HF;IAzNC,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAMzB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,EAAE;;IAGf,iBAAiB,GAAA;;AACf,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;;IAG7E,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,gBAAgB,GAAA;AACd,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW;AACpC,QAAA,IAAI,WAAW,IAAI,IAAI,EAAE;YACvB;;QAEF,IAAI,CAAC,MAAM,EAAE;AACb,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;;IAG/D,oBAAoB,GAAA;;AAClB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC9E,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,kBAAkB,GAAA;QAChB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;QACrC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC;;IAGhC,SAAS,GAAA;;QACf,MAAM,GAAG,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;QACjC,MAAM,GAAG,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;AACjC,QAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE;;;IAKrB,MAAM,QAAQ,CAAC,OAAsB,EAAA;;QACnC,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC;;;AAKlC,IAAA,MAAM,WAAW,GAAA;;QACf,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;AAwClB,IAAA,WAAW,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa,EAAA;AACzD,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YAC9E,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;AACxD,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW;AAC/C,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW;AAC5C,YAAA,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACrF,YAAA,MAAM,CAAC,GAAG,CAAQ,KAAA,EAAA,UAAU,GAAG,OAAO,CAAkB,eAAA,EAAA,OAAO,CAAM,GAAA,EAAA,SAAS,CAAY,SAAA,EAAA,SAAS,SAAS;YAC5G,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,CAAC,CAAA,CAAA,CAAG;AAChD,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,CAAA,CAAA,EAAI,YAAY,GAAG,CAAC,CAAA,EAAA,CAAI;;;IAInD,SAAS,GAAA;AACf,QAAA,OAAO,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;;AAG1D,IAAA,MAAM,CAAC,WAAoB,EAAA;;AACjC,QAAA,IAAI,WAAW,IAAI,IAAI,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,GAAG,WAAW;;QAG1B,MAAM,GAAG,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;QACjC,MAAM,GAAG,GAAG,CAAA,EAAA,GAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;AACjC,QAAA,IAAI,KAAK;QACT,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,KAAc,CAAC;AACnD,QAAA,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE;YACtB,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC;;aACjC;YACL,KAAK,GAAG,WAAW;;AAGrB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;;;;YAI5B,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;YACzC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;aAC1C;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;QAEpB,IAAI,CAAC,2BAA2B,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC;QACtD,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC;;AAGxC;;AAEG;IACK,eAAe,CAAC,GAAW,EAAE,GAAW,EAAA;AAC9C,QAAA,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC;;AAGhD;;AAEG;AACK,IAAA,2BAA2B,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa,EAAA;AACzE,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;YACjD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,IAAI,GAAG,CAAC;AAC9D,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU;gBAC/B,0EAA0E;oBAC1E,OAAO;oBACP,mCAAmC;oBACnC,OAAO;AACP,oBAAA,IAAI;;;IAIV,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,WAAW,qDACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,OAAO,EAAA,EAE1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;;gBAGX,iBAAiB,EAAE,IAAI,CAAC,QAAQ;gBAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,wBAAwB,EAAE,IAAI,CAAC,UAAU;AACzC,gBAAA,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;AAC5C,gBAAA,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;AACnD,aAAA,EACD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEnC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,CAAA,EACD,IAAI,CAAC,OAAO,KAAK,MAAM,KACtB,+DAAQ,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,gBAAgB,EAAA,EAC3E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAC3B,CACV,CACG,CACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixRange","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-range/six-range.scss?tag=six-range&encapsulation=shadow","src/components/six-range/six-range.tsx"],"sourcesContent":["@import '../../../src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n --thumb-size: 14px;\n --tooltip-offset-y: 10px;\n --track-color: var(--six-color-web-rock-900);\n --thumb-color: var(--six-color-web-rock-900);\n --track-height: 3px;\n\n display: block;\n}\n\n.range {\n position: relative;\n\n .range__control {\n -webkit-appearance: none;\n width: 100%;\n height: var(--six-input-height-medium);\n background: transparent;\n line-height: var(--six-input-height-medium);\n vertical-align: middle;\n\n &::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n border-radius: 3px;\n border: none;\n }\n\n &::-webkit-slider-thumb {\n border: none;\n width: var(--thumb-size);\n height: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n -webkit-appearance: none;\n margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-webkit-slider-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-webkit-slider-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-webkit-slider-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // Firefox\n &::-moz-focus-outer {\n border: 0;\n }\n\n &::-moz-range-track {\n width: 100%;\n height: var(--track-height);\n background-color: var(--six-progress-track-color);\n border-radius: 3px;\n border: none;\n }\n\n &::-moz-range-progress {\n height: var(--track-height);\n border-radius: 3px;\n background-color: var(--track-color);\n border: none;\n }\n\n &::-moz-range-thumb {\n border: none;\n height: var(--thumb-size);\n width: var(--thumb-size);\n border-radius: 50%;\n background-color: var(--thumb-color);\n transition:\n var(--six-transition-fast) border-color,\n var(--six-transition-fast) background-color,\n var(--six-transition-fast) color,\n var(--six-transition-fast) box-shadow,\n var(--six-transition-fast) transform;\n cursor: pointer;\n }\n\n &:not(:disabled)::-moz-range-thumb:hover {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled):focus::-moz-range-thumb {\n background-color: var(--thumb-color);\n }\n\n &:not(:disabled)::-moz-range-thumb:active {\n background-color: var(--thumb-color);\n cursor: grabbing;\n }\n\n // States\n &:focus {\n outline: none;\n }\n\n &:disabled {\n &::-webkit-slider-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n\n &::-moz-range-thumb {\n cursor: not-allowed;\n color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-300);\n background-color: var(--six-color-web-rock-300);\n }\n }\n }\n}\n\n// Tooltip\n.range__tooltip {\n position: absolute;\n z-index: var(--six-z-index-tooltip);\n left: 2px;\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-color-web-rock-900);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-color-white);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-xx-small);\n transition: var(--six-transition-fast) opacity;\n pointer-events: none;\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n left: 50%;\n margin-left: calc(-1 * var(--six-tooltip-arrow-size));\n }\n}\n\n.range--tooltip-visible .range__tooltip {\n opacity: 1;\n}\n\n// Tooltip on top\n.range--tooltip-top .range__tooltip {\n top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-top: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n top: 100%;\n }\n}\n\n// Tooltip on bottom\n.range--tooltip-bottom .range__tooltip {\n bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n\n &::after {\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-color-web-rock-900);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n bottom: 100%;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}