npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.af88f91 → 0.0.0-insider.b13c699 - Mend

@six-group/ui-library 0.0.0-insider.af88f91 → 0.0.0-insider.b13c699

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 (1969) hide show

package/dist/esm/six-progress-bar.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-5390c1d6.js';
+import { r as registerInstance, h } from './index-a7bee415.js';
 const sixProgressBarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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%}}";
 const SixProgressBarStyle0 = sixProgressBarCss;
@@ -10,12 +10,12 @@ const SixProgressBar = class {
         this.indeterminate = false;
     }
     render() {
-        return (h("div", { key: '5361da7a78cfcaa6375e078da88209dcd725d832', part: "base", class: {
+        return (h("div", { key: '45ac15bb610a1cf554978f14faf62468248456b5', 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: 'a3dea20c3afea5be2c6c02adf9e6f98cdb038cbb', 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: '5e1669e12a54f369b24159db5533adfe6e4afc23', part: "indicator", class: "progress-bar__indicator", style: {
                 width: `${this.percentage}%`,
-            } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
+            } }, !this.indeterminate && (h("span", { key: 'ee288552a254819e817c639a4d557a174d827c71', part: "label", class: "progress-bar__label" }, h("slot", { key: '201bc1ed20890d847d578c322fb1e6911df497b1' }))))));
     }
 };
 SixProgressBar.style = SixProgressBarStyle0;

package/dist/esm/six-progress-bar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-progress-bar.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,69BAA69B,CAAC;AACx/B,6BAAe,iBAAiB;;MCmBnB,cAAc;;;0BAEJ,CAAC;6BAGE,KAAK;;IAE7B,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU,IAE1D,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;aAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,KAClB,~~YAAM~~,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,~~eAAQ~~,CACH,CACR,CACG,CACF,EACN;KACH;;;;;;","names":[],"sources":["src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n /\n:host {\n --height: 16px;\n --track-color: var(--six-progress-track-color);\n --indicator-color: var(--six-progress-indicator-color);\n --label-color: var(--six-progress-label-color);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: var(--sl-border-radius-pill);\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-family: var(--six-font-sans);\n font-size: 12px;\n font-weight: var(--six-font-weight-normal);\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n line-height: var(--height);\n white-space: nowrap;\n overflow: hidden;\n transition: 400ms width, 400ms background-color;\n user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n position: absolute;\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n left: -50%;\n width: 50%;\n }\n 75%,\n 100% {\n left: 100%;\n width: 50%;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\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 - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'six-progress-bar',\n styleUrl: 'six-progress-bar.scss',\n shadow: true,\n})\nexport class SixProgressBar {\n /* The progress bar's percentage, 0 to 100. /\n @Prop() percentage = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @Prop() indeterminate = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.percentage}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.percentage}%`,\n }}\n >\n {!this.indeterminate && (\n <span part=\"label\" class=\"progress-bar__label\">\n <slot />\n </span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-progress-bar.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,69BAA69B,CAAC;AACx/B,6BAAe,iBAAiB;;MCmBnB,cAAc;;;0BAEJ,CAAC;6BAGE,KAAK;;IAE7B,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU,IAE1D,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;aAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,KAClB,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,8DAAQ,CACH,CACR,CACG,CACF,EACN;KACH;;;;;;","names":[],"sources":["src/components/six-progress-bar/six-progress-bar.scss?tag=six-progress-bar&encapsulation=shadow","src/components/six-progress-bar/six-progress-bar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n /\n:host {\n --height: 16px;\n --track-color: var(--six-progress-track-color);\n --indicator-color: var(--six-progress-indicator-color);\n --label-color: var(--six-progress-label-color);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: var(--sl-border-radius-pill);\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-family: var(--six-font-sans);\n font-size: 12px;\n font-weight: var(--six-font-weight-normal);\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n line-height: var(--height);\n white-space: nowrap;\n overflow: hidden;\n transition: 400ms width, 400ms background-color;\n user-select: none;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n position: absolute;\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n left: -50%;\n width: 50%;\n }\n 75%,\n 100% {\n left: 100%;\n width: 50%;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\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 - A label to show inside the indicator.\n \n @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n /\n\n@Component({\n tag: 'six-progress-bar',\n styleUrl: 'six-progress-bar.scss',\n shadow: true,\n})\nexport class SixProgressBar {\n /* The progress bar's percentage, 0 to 100. /\n @Prop() percentage = 0;\n\n /* When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @Prop() indeterminate = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.percentage}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.percentage}%`,\n }}\n >\n {!this.indeterminate && (\n <span part=\"label\" class=\"progress-bar__label\">\n <slot />\n </span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-progress-ring.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-5390c1d6.js';
+import { r as registerInstance, h } from './index-a7bee415.js';
 const sixProgressRingCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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)}";
 const SixProgressRingStyle0 = sixProgressRingCss;
@@ -27,7 +27,7 @@ const SixProgressRing = class {
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: 'e502ccf39d3b246d03122b446949ee8380e1a2fa', part: "base", class: "progress-ring" }, h("svg", { key: 'd37581863e5a67e9f8a9cd058954581ee7e86a4a', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '022eeb124e217d93479cf7ead2cabb9169b9afd4', 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: 'bc0fbfc9f1c872243ae2169d6412db47fb554e19', 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: '9320211edc9c0b9b24124ffc7ffdac9d6d2f86a7', part: "label", class: "progress-ring__label" }, h("slot", { key: 'e7c3ce7e12a7691e461b73e6cbd2912dde27ac75' }))));
+        return (h("div", { key: '585f31918309719acad14e1b01121be9a8c1cd89', part: "base", class: "progress-ring" }, h("svg", { key: '5c039de9145c4c43f52e2787d39aaf3710c30f76', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '8b8ae8deb553e5e34a916fedfd7b5378ab47de9f', 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: 'aab242e5b4797bdbcf75146e55a73f080d8742c1', 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: 'dea1cbc19b910dd1d07a10a56ae6b1700b0d5113', part: "label", class: "progress-ring__label" }, h("slot", { key: 'a00bf6f710f3e65dfc1bc645a808aba2fabe0d40' }))));
     }
     static get watchers() { return {
         "percentage": ["handlePercentageChange"]

package/dist/esm/six-radio.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7bee415.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
 const sixRadioCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}: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}";
@@ -98,12 +98,12 @@ const SixRadio = class {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: '11d5d7c460cf62b2fc73435137998c3b424ab58f', part: "base", class: {
+        return (h("label", { key: '1d4d0be85edb89c166b6f22ea72498b9c8d8cea8', 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: 'e6ca5e0308ed109262b995b9831f32f5c5829cbc', part: "control", class: "radio__control" }, h("span", { key: 'c201309a8ef4def676aa48cf9dd66b94da28db10', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '0e003d8db64fb73c54e95fffb9005d434d2b114e', viewBox: "0 0 16 16" }, h("g", { key: '374a33afe42003445cb91630754007f7057ff755', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '2b85fcbdf694e18c9234819a0a20ffd793be0102', fill: "currentColor" }, h("circle", { key: '45842bd37b3dcea164b972c9ff6e461fc866536d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '924cbd7890627bbf79201b68a989f894e26d9579', 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: 'f00e3fbac022d2be55117448df3e8ff908dd4cd5', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '0fa728701561580e0d06f0568a001d1d234ed867' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '76b4c8511865e24af02bb954155c3b73d005b0af', part: "control", class: "radio__control" }, h("span", { key: '8a236d9faf510c005b77ff71917f79928478f558', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'a09807981249028dab896dd1363455f742ffc3ae', viewBox: "0 0 16 16" }, h("g", { key: '2794897dc88c3c531a560966702eee882a0ad34f', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: 'e698f2e02915293aa3d61191971a009e1075882a', fill: "currentColor" }, h("circle", { key: '0c08e9a157e5fe0155bb2859a70a302549a35129', cx: "8", cy: "8", r: "5" }))))), h("input", { key: 'ca747587d281cb058c73dff36bbbb24f92c513ef', 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: '9e4de8ac9871f4ed19960842ff4da889f03b697b', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: 'cb241e2debf683cc9f799606a48724f824c7dbfe' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/six-range.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
-import { F as FormControl } from './form-control-30c5bd8b.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7bee415.js';
+import { F as FormControl } from './form-control-ad1710bf.js';
 import { h as hasSlot } from './slot-56531341.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
@@ -182,7 +182,7 @@ const SixRange = class {
         }
     }
     render() {
-        return (h(FormControl, { key: 'cf23b46a8ca2596e962810d3528163ab9add32c3', 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: '370f20143ac3c9325b7cc99ceb3c3a6720a50b1c', part: "base", class: {
+        return (h(FormControl, { key: '247e4d734ffd21fb8600961f821e38088e7746d7', 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: '253bbcaffc90185969ccc1eb96cafe889b3130f2', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -190,7 +190,7 @@ const SixRange = class {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: '74380f56888930992b753f905cd6e9256c24d106', 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", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '83c6c8855ca6df0ee2d95a95fee668b5bbf306db', 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: 'fac373f95f6bfebd98e52f92fc74825e853f6812', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/six-range.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-range.entry.js","mappings":"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","names":[],"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: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, 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: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, 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.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,+hNAA+hN,CAAC;AACpjN,uBAAe,WAAW;;ACK1B,IAAI,EAAE,GAAG,CAAC,CAAC;MAqBE,QAAQ;;;;;;QACX,YAAO,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QAC1B,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QACrC,gBAAW,GAAG,oBAAoB,EAAE,EAAE,CAAC;QACvC,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QA6HtC,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;gBAC5B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;aACjD;YACD,qBAAqB,CAAC;gBACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;aACvB,CAAC,CAAC;SACJ,CAAC;QAEM,eAAU,GAAG;;YACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;gBAC5B,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClD;SACF,CAAC;QAEM,gBAAW,GAAG;;YACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;gBAC5B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAChD;SACF,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;SAC1D,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB,CAAC;wBAxJkB,KAAK;+BACE,KAAK;gCACJ,KAAK;4BACT,KAAK;0BACP,KAAK;oBAGZ,EAAE;qBAGgB,CAAC;wBAGf,KAAK;wBAGL,EAAE;wBAGF,KAAK;qBAGR,EAAE;yBAGqB,EAAE;;uBAMN,KAAK;mBAG1B,CAAC;mBAGD,GAAG;oBAGF,CAAC;uBAG6B,KAAK;gCAGvB,CAAC,KAAa,KAAK,KAAK,CAAC,QAAQ,EAAE;;IAc9D,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAKD,iBAAiB;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,gBAAgB;QACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,IAAI,WAAW,IAAI,IAAI,EAAE;YACvB,OAAO;SACR;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAC/D;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC/E,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAED,kBAAkB;QAChB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACxC;IAEO,SAAS;;QACf,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;KACrB;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAClC;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC;KAC1B;IAuCO,WAAW,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa;QACzD,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,CAAC;YACzD,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;YAChD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC;YAC7C,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;YACtF,MAAM,CAAC,GAAG,QAAQ,UAAU,GAAG,OAAO,kBAAkB,OAAO,MAAM,SAAS,YAAY,SAAS,SAAS,CAAC;YAC7G,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC;YACjD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,YAAY,GAAG,CAAC,IAAI,CAAC;SACzD;KACF;IAEO,SAAS;QACf,OAAO,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;KAClE;IAEO,MAAM,CAAC,WAAoB;;QACjC,IAAI,WAAW,IAAI,IAAI,EAAE;YACvB,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;SAC1B;QAED,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,IAAI,KAAK,CAAC;QACV,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,KAAc,CAAC,CAAC;QACpD,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE;YACtB,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;SACxC;aAAM;YACL,KAAK,GAAG,WAAW,CAAC;SACrB;QAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;;;;YAI5B,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC1C,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;QACD,IAAI,CAAC,2BAA2B,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAKO,eAAe,CAAC,GAAW,EAAE,GAAW;QAC9C,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;KAChD;;;;IAKO,2BAA2B,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa;QACzE,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,CAAC;YAC/D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU;gBAC/B,0EAA0E;oBAC1E,OAAO;oBACP,mCAAmC;oBACnC,OAAO;oBACP,IAAI,CAAC;SACR;KACF;IAED,MAAM;QACJ,QACE,EAAC,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,IAE1B,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;;gBAGX,iBAAiB,EAAE,IAAI,CAAC,QAAQ;gBAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,wBAAwB,EAAE,IAAI,CAAC,UAAU;gBACzC,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;gBAC5C,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;aACnD,EACD,YAAY,EAAE,IAAI,CAAC,gBAAgB,IAEnC,8DACE,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,GACvB,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,IAC3E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAC3B,CACV,CACG,CACM,EACd;KACH;;;;;;;;;;;;;;;","names":[],"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: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, 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: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n var(--six-transition-fast) color, var(--six-transition-fast) box-shadow, 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}

package/dist/esm/six-root.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-5390c1d6.js';
+import { r as registerInstance, h, g as getElement } from './index-a7bee415.js';
 const sixRootCss = ":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";
 const SixRootStyle0 = sixRootCss;
@@ -11,7 +11,7 @@ const SixRoot = class {
         this.version = '';
     }
     render() {
-        return (h("host", { key: 'f4b3cb516ce1b70a834903c00a56ca7edf5364dc', class: "six-root" }, h("header", { key: '88ec66c2af58e55621563f600cb8c1589467218c', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: '072a0e92b9203149a9823fdf83aa45b39494559f', name: "header" })), h("nav", { key: '58d18ca9b9ebf9db5981b3c82cce657f73ef5f13', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '62643ef967da9d303380b4d4d26ec5e026a86ac3', name: "left-sidebar" })), h("main", { key: '0b059f2814c4485dd03a3a166529d78999baa699', part: "main" }, h("div", { key: '74ce003ff9d45945b9bdc43b170c99300856544b', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5ea05c471c96fd47cf27749accd1c551f16d69d2', name: "main" })), h("div", { key: '5dd7796754df4238f61f1ee8cc3cee9589f1f40f', class: "six-root__footer" }, h("slot", { key: '5c4036b9fb4d36f69b617a2e6ee7fce62c80fa08', name: "footer" }))), h("nav", { key: '36c76008c9dc36b7fef9f8a6a79e6508d1764ede', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '66cdae8a60d251063e4c8a710a36d0be07dedf0e', name: "right-sidebar" }))));
+        return (h("host", { key: 'bb7825453e8962c4284fb6fbb4134c4b7767ffbd', class: "six-root" }, h("header", { key: '443e36e1fb8ab628ab2e1bde1eef3f3f0a6c9a3e', part: "header" }, this.stage && h("six-stage-indicator", { key: 'e10e1a45360e64f7319e15b5a615b898e41c5a6f', stage: this.stage }, this.version), h("slot", { key: '83f124f27a434c0eaab23e25c9690e63619d3238', name: "header" })), h("nav", { key: '52f47a0ea56ea73c01acfb974005b25a07f31c1c', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'dc394fd3eba205aae4bfff5a17f826e64d7aabcb', name: "left-sidebar" })), h("main", { key: '6bc11607edf2b772a2ae8e83aa6116d0996353f2', part: "main" }, h("div", { key: 'dce7d4f1ff72fdad0daf1ded16d6e91c709ea837', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '2f738b3b6705db8d0bfe07590df59cc4d243cad0', name: "main" })), h("div", { key: '005c723d6515ffc9a0acdc51460a4f51872ae717', class: "six-root__footer" }, h("slot", { key: '8cc3c97bc3c1a328ed4a99dfa1b17c6d3abb4607', name: "footer" }))), h("nav", { key: '05b12db2b51c4c4b5cb0de37c7f79d7e3220dda6', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '9c7977c0f58dc781acb189a816f5dc0cd61c8304', name: "right-sidebar" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/six-root.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-root.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,klBAAklB,CAAC;AACtmB,sBAAe,UAAU;;MCkBZ,OAAO;;;sBAKD,IAAI;qBAGM,IAAI;uBAGb,EAAE;;IAEpB,MAAM;QACJ,QACE,6DAAM,KAAK,EAAC,UAAU,IACpB,+DAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,~~2BAAqB~~,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,6DAAM,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n overflow: hidden;\n height: inherit;\n}\n\n.six-root {\n display: grid;\n grid-template: auto 1fr auto / auto 1fr auto;\n height: 100%;\n\n &__container {\n &--padded {\n padding: var(--six-spacing-xxx-large);\n }\n }\n\n &__left-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 1 / 2;\n }\n\n &__right-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 3 / 4;\n }\n\n nav {\n overflow: hidden;\n }\n}\n\nheader {\n grid-column: 1 / 4;\n position: sticky;\n top: 0;\n z-index: var(--six-z-index-header);\n // border fix\n margin-right: 2px;\n}\n\nmain {\n height: 100%;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n grid-column: 2 / 3;\n overflow: auto;\n}\n\nfooter {\n grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/*\n @since 1.0\n * @status stable\n \n @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n /\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /* Defines whether the content section should be padded /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /* Defines the stage of the application/\n @Prop() stage: StageType = null;\n\n /* Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-root.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,klBAAklB,CAAC;AACtmB,sBAAe,UAAU;;MCkBZ,OAAO;;;sBAKD,IAAI;qBAGM,IAAI;uBAGb,EAAE;;IAEpB,MAAM;QACJ,QACE,6DAAM,KAAK,EAAC,UAAU,IACpB,+DAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,4EAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,6DAAM,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n overflow: hidden;\n height: inherit;\n}\n\n.six-root {\n display: grid;\n grid-template: auto 1fr auto / auto 1fr auto;\n height: 100%;\n\n &__container {\n &--padded {\n padding: var(--six-spacing-xxx-large);\n }\n }\n\n &__left-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 1 / 2;\n }\n\n &__right-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 3 / 4;\n }\n\n nav {\n overflow: hidden;\n }\n}\n\nheader {\n grid-column: 1 / 4;\n position: sticky;\n top: 0;\n z-index: var(--six-z-index-header);\n // border fix\n margin-right: 2px;\n}\n\nmain {\n height: 100%;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n grid-column: 2 / 3;\n overflow: auto;\n}\n\nfooter {\n grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/*\n @since 1.0\n * @status stable\n \n @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n /\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /* Defines whether the content section should be padded /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /* Defines the stage of the application/\n @Prop() stage: StageType = null;\n\n /* Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-search-field.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-5390c1d6.js';
+import { r as registerInstance, c as createEvent, h } from './index-a7bee415.js';
 import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-2ebaf4ef.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
@@ -42,7 +42,7 @@ const SixSearchField = class {
         this.eventListeners.removeAll();
     }
     render() {
-        return (h("div", { key: 'f1a0e877abffb212e7876237a294256446ce9414', class: "search-box" }, h("six-input", { key: '371999a3d7a5063f1b29494763444bdb20317146', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '8c9c517d8f6bbf45beae6c5af88a5b17967401b5', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'f45bb3a2c075675f2216a17e2c28329196685f2e' })));
+        return (h("div", { key: '108d928d1c28a1a37c0a6f00661e44ff921a7434', class: "search-box" }, h("six-input", { key: 'bd4002eab9d4077b70b0f3e730127a8cadad1d63', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '900c6d660cf833c2a3068e608c947694e6b95ff6', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: '7f834e95d2cbb6207c4a580099e6f62240cb587f' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"]

package/dist/esm/six-select.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7bee415.js';
 import { h as hasSlot, a as getTextContent } from './slot-56531341.js';
-import { F as FormControl } from './form-control-30c5bd8b.js';
+import { F as FormControl } from './form-control-ad1710bf.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
 import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-2ebaf4ef.js';
 import { a as getLanguage } from './error-messages-1eaaad23.js';
@@ -68,7 +68,8 @@ const SixSelect = class {
             var _a;
             event.stopPropagation();
             await this.clearValues();
-            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide());
+            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show());
+            await this.setFocus();
             this.sixChange.emit({ value: this.value, isSelected: true });
         };
         this.handleKeyDown = (event) => {
@@ -275,11 +276,16 @@ const SixSelect = class {
         if (this.autocomplete && this.autocompleteInput != null) {
             const autocompleteInput = this.autocompleteInput;
             this.eventListeners.add(autocompleteInput, 'six-input-input', debounce((event) => {
+                var _a;
                 this.value = autocompleteInput.value;
                 this.sixChange.emit({ value: this.value, isSelected: false });
                 event.stopPropagation();
+                if (this.virtualScroll || this.value.length > 0) {
+                    (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show();
+                }
             }, this.inputDebounce));
-            autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+            const selectedLabel = this.displayedValues.join(', ');
+            autocompleteInput.value = selectedLabel;
         }
     }
     disconnectedCallback() {
@@ -342,16 +348,27 @@ const SixSelect = class {
         const value = convertToValidValue(this.value, this.multiple);
         selectionContainerItems.forEach((item) => {
             item.checkType = this.multiple ? 'checkbox' : 'check';
-            item.checked = value.includes(item.value);
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
         });
         mainItems.forEach((item) => {
             item.checkType = this.multiple ? 'checkbox' : 'check';
-            item.checked = value.includes(item.value);
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
         });
         const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);
         this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));
-        if (this.autocomplete && this.autocompleteInput != null) {
-            this.autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+        if (this.autocomplete && this.autocompleteInput != null && !this.hasFocus) {
+            const selectedLabel = this.displayedValues.join(', ');
+            this.autocompleteInput.value = selectedLabel;
         }
         requestAnimationFrame(() => {
             this.updateDisplayedValues();
@@ -417,7 +434,7 @@ const SixSelect = class {
             showClear = true;
             showExpand = false;
         }
-        return (h(FormControl, { key: '995bb87e0b65e09cc2aea9b9309e03388e9a3013', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: '14d641ae28f41c426b51b89d7a4dea1c842c6341', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        return (h(FormControl, { key: '521e8a99e7fb4ad2fb8ded4763eb8ed1e0eff293', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: 'ea5f0ec6216ab61ebcc1ae8add16b042e99297cc', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
                 select: true,
                 'select--open': this.isOpen,
                 'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -432,20 +449,20 @@ const SixSelect = class {
                 'select--large': this.size === 'large',
                 'select--pill': this.pill,
                 'select--invalid': this.invalid,
-            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: 'ea452a8196bc7ffc8fbc3ec98298b13a2bdaa0b2', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: 'd6b14098f6aabd6212f71e3832890de646c6d97e', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
                 select__box: true,
                 'select__box--line': this.line,
                 'select__box--autocomplete': this.autocomplete,
-            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: '7b6e70973681445a4de6e2c0e1a31aa3b512cd68', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { key: '34a321d5de3e51132f2dfb364979c1c55995b8c2', ref: (el) => (this.autocompleteInput = el), class: {
+            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: 'dd77b5234c29235a00f62b5e49b81dc5aba2ffda', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { key: 'd30be3b2adb8f5eed29a3e7a5a59f4db007d62e9', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: '7c40d29a181ce1f15bc1bacf059a9c8e9807be67', part: "icon", class: "select__icon" }, h("six-icon", { key: '6ac4a8bf6a4be113dcfd6bf2fd690c8b47aaaaeb', size: "medium" }, "expand_more"))), h("six-input", { key: '8f226312196871cd91abcb20da09c5a2811d1657', ref: (el) => (this.autocompleteInput = el), class: {
                 select__input: true,
                 'select__hidden-select': !this.autocomplete,
-            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: 'b6a75066f44bcfa23646f09f12858741eb329935', class: {
+            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: 'bb683893a8ad678f3cb01e8e42531b17bd20913c', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { key: '273440b4570424484c8eb4bc41475b2fdd769bb9', ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: 'c7755a2e2da8134b6b58189c81c8354cac7a8e2e', ref: (el) => (this.menu = el), part: "menu", class: {
                 select__menu: true,
                 'select__menu--hidden': !hasMenuItems,
-            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: '6d3b8c080879dfc652816ff96f39d0821a676708', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: '95fe463945090bd7a7cbc11066f4752dfff55034', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: '448f7d261edd83841fc82c4c3304ec497aa4c8f8', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: 'e393c3715514b8e9a0a710c408364e6c96f9a1d3', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';