@six-group/ui-library 0.0.0-insider.e5360cd → 0.0.0-insider.e8b5a11

package/dist/components/p-Gp_A69uJ.js

@@ -0,0 +1,43 @@
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
+import { d as defineCustomElement$1 } from './p-DyBhkgST.js';
+
+const sixStageIndicatorCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:grid}.center-content{display:grid;align-self:center;justify-self:center;grid-gap:5px;grid-auto-flow:column}.align-item{margin:auto}.indicator,.indicator--acceptance,.indicator--etu,.indicator--dev,.indicator--itu{font-family:var(--six-font-family);font-size:14px;font-weight:var(--six-font-weight-bold);display:grid;align-content:center;width:100%;height:24px}.indicator--itu{background-color:var(--six-color-success-600);color:var(--six-color-web-rock-900)}.indicator--dev{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.indicator--etu{background-color:var(--six-color-action-600);color:var(--six-color-white)}.indicator--acceptance{background-color:var(--six-color-warning-800);color:var(--six-color-web-rock-900)}";
+
+const SixStageIndicator = /*@__PURE__*/ proxyCustomElement(class SixStageIndicator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** The indicators value attribute */
+        this.stage = null;
+    }
+    render() {
+        return this.stage == null || this.stage == 'PROD' ? null : (h("div", { class: `indicator--${this.stage.toLowerCase()}` }, h("div", { class: "center-content" }, h("six-icon", { class: "align-item", size: "small" }, "error_outline"), h("span", { class: 'align-item' }, h("slot", null)))));
+    }
+    static get style() { return sixStageIndicatorCss; }
+}, [1, "six-stage-indicator", {
+        "stage": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-stage-indicator", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-stage-indicator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixStageIndicator);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixStageIndicator as S, defineCustomElement as d };
+//# sourceMappingURL=p-Gp_A69uJ.js.map
+
+//# sourceMappingURL=p-Gp_A69uJ.js.map

package/dist/components/p-Gp_A69uJ.js.map

@@ -0,0 +1 @@
+{"file":"p-Gp_A69uJ.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,k2BAAk2B;;MCSl3B,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAc,IAAI;AAgBhC;IAdC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,IACtD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAE,CAAA,EAAA,EAClD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAE9B,EAAA,eAAA,CAAA,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACH,CACH,CACF,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-stage-indicator/six-stage-indicator.scss?tag=six-stage-indicator&encapsulation=shadow","src/components/six-stage-indicator/six-stage-indicator.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: grid;\n}\n\n.center-content {\n  display: grid;\n  align-self: center;\n  justify-self: center;\n  grid-gap: 5px;\n  grid-auto-flow: column;\n}\n\n.align-item {\n  margin: auto;\n}\n\n.indicator {\n  font-family: var(--six-font-family);\n  font-size: 14px;\n  font-weight: var(--six-font-weight-bold);\n  display: grid;\n  align-content: center;\n  width: 100%;\n  height: 24px;\n\n  &--itu {\n    @extend .indicator;\n    background-color: var(--six-color-success-600);\n    color: var(--six-color-web-rock-900);\n  }\n\n  &--dev {\n    @extend .indicator;\n    background-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n  }\n\n  &--etu {\n    @extend .indicator;\n    background-color: var(--six-color-action-600);\n    color: var(--six-color-white);\n  }\n\n  &--acceptance {\n    @extend .indicator;\n    background-color: var(--six-color-warning-800);\n    color: var(--six-color-web-rock-900);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-H_jOwrje.js

@@ -0,0 +1,180 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { F as FormControl } from './p-Cc_nfyAl.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { d as defineCustomElement$1 } from './p-Cku9xxcT.js';
+
+const sixCheckboxCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.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:inline-block}.checkbox{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}.checkbox--focused .checkbox__control{outline:var(--six-focus-ring);outline-offset:0}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);min-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:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-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}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none;min-width:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
+
+let id = 0;
+const SixCheckbox = /*@__PURE__*/ proxyCustomElement(class SixCheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixBlur = createEvent(this, "six-checkbox-blur");
+        this.sixChange = createEvent(this, "six-checkbox-change");
+        this.sixFocus = createEvent(this, "six-checkbox-focus");
+        this.inputId = `checkbox-${++id}`;
+        this.labelId = `checkbox-label-${id}`;
+        this.textId = `checkbox-text-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        this.hasLabelSlot = false;
+        this.hasErrorSlot = false;
+        /** The checkbox's name attribute. */
+        this.name = '';
+        /**
+         * The value of the checkbox does not mean if it's checked or not, use the `checked`
+         * property for that.
+         *
+         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+         * it's only used when the checkbox participates in a native `<form>`.
+         */
+        this.value = 'on';
+        /** Set to true to disable the checkbox. */
+        this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Set to true to draw the checkbox in a checked state. */
+        this.checked = false;
+        /** Set to true to draw the checkbox in an indeterminate state. */
+        this.indeterminate = false;
+        this.handleChange = () => {
+            if (this.nativeInput != null) {
+                this.checked = this.nativeInput.checked;
+                this.indeterminate = false;
+                this.sixChange.emit();
+            }
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleMouseDown = (event) => {
+            var _a;
+            // Prevent clicks on the label from briefly blurring the input
+            event.preventDefault();
+            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    handleCheckedChange() {
+        if (this.nativeInput == null)
+            return;
+        this.nativeInput.checked = this.checked;
+        this.checked = this.nativeInput.checked;
+        this.nativeInput.indeterminate = this.indeterminate;
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-checkbox-change', 'change', this.host);
+        this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);
+        this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    componentDidLoad() {
+        const nativeInput = this.nativeInput;
+        if (nativeInput == null) {
+            return;
+        }
+        nativeInput.indeterminate = this.indeterminate;
+    }
+    /** Sets focus on the checkbox. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the checkbox. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    handleSlotChange() {
+        this.hasLabelSlot = hasSlot(this.host, 'label');
+        this.hasErrorSlot = hasSlot(this.host, 'error-text');
+    }
+    render() {
+        return (h(FormControl, { key: 'fb33e858f751205c8df374f3bcca37cec9f8203b', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '35bfda441fe651af25cb45d75d003919c7869ae2', part: "base", class: {
+                checkbox: true,
+                'checkbox--checked': this.checked,
+                'checkbox--disabled': this.disabled,
+                'checkbox--focused': this.hasFocus,
+                'checkbox--invalid': this.invalid,
+                'checkbox--indeterminate': this.indeterminate,
+            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '92d31ea45a0f1f45230def64e15bd0e81c4de140', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: '49501ea788463f4d39c5500349ace013c21d31c2', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: '8ae0e9bfe850b13a205722a5e17e90b21ad35f26', viewBox: "0 0 16 16" }, h("g", { key: '463b4761b130e5e9377efb7e26f57218ce5249ad', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '147d4348146dcace57835e436453bc834763c464', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '6596f4cd75b94d8ff3bef19698acc56a6eab847a', transform: "translate(3.428571, 3.428571)" }, h("path", { key: '453cfb8ae9d6d4e45f1b569e06ba79ac2a0d2b9c', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: 'b650801a5ae8fde8886b9e1fb4257eca704beabd', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: 'ab31b1999eae88b74c5bdeb1bbc1007b0459f8a8', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: '8d5cf52fc16243531056ba760d9c770decd593e3', viewBox: "0 0 16 16" }, h("g", { key: 'fb8ee93f8ec5abc82f8d982cc2ad59c4ae77fb91', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '825161dbc71cfc395061b3ef485352762c8780c5', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'c5541fd6e2d69a376278cd617447a8b9bfe6a0d6', transform: "translate(2.285714, 6.857143)" }, h("path", { key: '6c1f488d0572c2773b8497cd6214dcfdc64164ef', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: '2e8ac6e459e47708116702585a5155ee4385d021', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '817dae0dcffedf7de011d0fa68ce3a1ca45bbd3a', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: 'e0f9b77cf11c592efd6b312888491a3b5e84bb32' })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "checked": ["handleCheckedChange"],
+        "indeterminate": ["handleCheckedChange"],
+        "errorText": ["handleLabelChange"],
+        "label": ["handleLabelChange"]
+    }; }
+    static get style() { return sixCheckboxCss; }
+}, [1, "six-checkbox", {
+        "name": [1],
+        "value": [1],
+        "disabled": [4],
+        "required": [4],
+        "label": [1],
+        "errorText": [1, "error-text"],
+        "errorTextCount": [2, "error-text-count"],
+        "invalid": [516],
+        "checked": [1540],
+        "indeterminate": [1540],
+        "hasFocus": [32],
+        "hasLabelSlot": [32],
+        "hasErrorSlot": [32],
+        "setFocus": [64],
+        "removeFocus": [64]
+    }, undefined, {
+        "checked": ["handleCheckedChange"],
+        "indeterminate": ["handleCheckedChange"],
+        "errorText": ["handleLabelChange"],
+        "label": ["handleLabelChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-checkbox", "six-error"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixCheckbox);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixCheckbox as S, defineCustomElement as d };
+//# sourceMappingURL=p-H_jOwrje.js.map
+
+//# sourceMappingURL=p-H_jOwrje.js.map

package/dist/components/p-H_jOwrje.js.map

@@ -0,0 +1 @@
+{"file":"p-H_jOwrje.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,+2JAA+2J;;ACMt4J,IAAI,EAAE,GAAG,CAAC;MAuBG,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;;;;AAMU,QAAA,IAAA,CAAA,OAAO,GAAG,YAAY,EAAE,EAAE,EAAE;AAC5B,QAAA,IAAA,CAAA,OAAO,GAAG,CAAkB,eAAA,EAAA,EAAE,EAAE;AAChC,QAAA,IAAA,CAAA,MAAM,GAAG,CAAiB,cAAA,EAAA,EAAE,EAAE;AAC9B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAoB,iBAAA,EAAA,EAAE,EAAE;AAEtC,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,EAAE;AAIpC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAChB,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AACpB,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;;AAGrB,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;AAEjB;;;;;;AAMG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,IAAI;;AAGZ,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,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;;AAGA,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAa,CAAA,aAAA,GAAG,KAAK;AAgErD,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;gBAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO;AACvC,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;AAEzB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACtB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;;;YAE9C,KAAK,CAAC,cAAc,EAAE;YACtB,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AAC3B,SAAC;AA2FF;IApKC,mBAAmB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI;YAAE;QAE9B,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;QACvC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO;QACvC,IAAI,CAAC,WAAW,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;IAKrD,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,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;AAC3E,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,qBAAqB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;AACvE,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;AACnE,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC;;IAGvE,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,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,gBAAgB,GAAA;AACd,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW;AACpC,QAAA,IAAI,WAAW,IAAI,IAAI,EAAE;YACvB;;AAGF,QAAA,WAAW,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;;IAKhD,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;;IA2BlB,gBAAgB,GAAA;QACtB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;;IAGtD,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,WAAW,EAAA,EAAA,GAAA,EAAA,0CAAA,EACV,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,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,gBAAgB,EAAE,IAAI,CAAC,YAAY,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,OAAO,EAAA,EAE1B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,IAAI;gBACd,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,yBAAyB,EAAE,IAAI,CAAC,aAAa;aAC9C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,eAAe,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,mBAAmB,EAAA,EAC3C,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,gBAAgB,EAAA,EAC9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAA,EACtB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,MAAM,EAAC,MAAM,EAAA,cAAA,EAAc,GAAG,EAAC,IAAI,EAAC,MAAM,EAAA,WAAA,EAAW,SAAS,EAAA,gBAAA,EAAgB,OAAO,EAAA,EACtF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,EACvC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,+BAA+B,EAAA,EAC1C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,sCAAsC,EAAQ,CAAA,EACtD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,sCAAsC,EAAA,CAAQ,CACpD,CACF,CACF,CACA,CACD,CACR,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,gBAAgB,EAAA,EACpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAA,EACtB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,MAAM,EAAC,MAAM,EAAA,cAAA,EAAc,GAAG,EAAC,IAAI,EAAC,MAAM,EAAA,WAAA,EAAW,SAAS,EAAA,gBAAA,EAAgB,OAAO,EAAA,EACtF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,EACvC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,+BAA+B,EAAA,EAC1C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,+CAA+C,EAAA,CAAQ,CAC7D,CACF,CACF,CACA,CACD,CACR,EAED,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,qBAC5B,IAAI,CAAC,OAAO,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,CACzB,CACG,EAEP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,gBAAgB,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACD,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox--focused {\n  .checkbox__control {\n    outline: var(--six-focus-ring);\n    outline-offset: 0;\n  }\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  min-width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-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;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n    min-width: var(--six-selection-control-toggle-size);\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\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 checkbox label.\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 control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = 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  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) return;\n\n    this.nativeInput.checked = this.checked;\n    this.checked = this.nativeInput.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n    this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n    this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\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        errorTextId={this.errorTextId}\n        hasErrorTextSlot={this.hasErrorSlot}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-NB9EUAIJ.js

@@ -0,0 +1,305 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { F as FormControl } from './p-Cc_nfyAl.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { s as submitForm } from './p-B1bClJZ6.js';
+import { d as defineCustomElement$2 } from './p-Cku9xxcT.js';
+import { d as defineCustomElement$1 } from './p-DyBhkgST.js';
+
+const sixInputCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.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}.input{display:inline-flex;align-items:stretch;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;overflow:hidden;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.input--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.input:hover:not(.input--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.input:hover:not(.input--disabled) .input__control{color:var(--six-input-color-hover)}.input:hover.input--dropdown-search{border-color:transparent}.input--dropdown-search{border-color:transparent}.input--dropdown-search.input--focused{border-color:var(--six-input-border-color)}.input.input--focused:not(.input--disabled){background-color:var(--six-input-background-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.input.input--focused:not(.input--disabled):not(.input--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.input.input--focused:not(.input--disabled) .input__control{color:var(--six-input-color-focus)}.input.input--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.input.input--disabled .input__control{color:var(--six-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.input.input--invalid:not(.input--disabled):not(.input--focused){border-bottom-color:var(--six-input-border-color-danger)}.input.input--invalid:not(.input--disabled):not(.input--focused):not(.input--line){border-color:var(--six-input-border-color-danger)}.input__control{flex:1 1 auto;width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;color:var(--six-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--six-color-primary-500)}.input__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__control::-ms-reveal{display:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default}.input__prefix ::slotted(six-icon),.input__suffix ::slotted(six-icon){color:var(--six-input-icon-color)}.input.input--disabled ::slotted(six-icon){cursor:not-allowed}.input--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);height:var(--six-height-small)}.input--small .input__control{height:calc(var(--six-height-small) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-small)}.input--small .input__control__prefix{margin:0 var(--six-input-prefix-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--six-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-small)}.input--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);height:var(--six-height-medium)}.input--medium .input__control{height:calc(var(--six-height-medium) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-medium)}.input--medium .input__control__prefix{margin:0 var(--six-input-prefix-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--six-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-medium)}.input--medium .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-medium)}.input--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);height:var(--six-height-large)}.input--large .input__control{height:calc(var(--six-height-large) - var(--six-border-width) * 2);margin:0 var(--six-input-spacing-large)}.input--large .input__control__prefix{margin:0 var(--six-input-prefix-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--six-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--six-input-prefix-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--six-input-prefix-spacing-large)}.input--pill.input--small{border-radius:var(--six-height-small)}.input--pill.input--medium{border-radius:var(--six-height-medium)}.input--pill.input--large{border-radius:var(--six-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--six-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}";
+
+const ICON_SIZES = {
+    large: 'medium',
+    medium: 'small',
+    small: 'xSmall',
+};
+let id = 0;
+const SixInput = /*@__PURE__*/ proxyCustomElement(class SixInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixChange = createEvent(this, "six-input-change");
+        this.sixClear = createEvent(this, "six-input-clear");
+        this.sixInput = createEvent(this, "six-input-input");
+        this.sixFocus = createEvent(this, "six-input-focus");
+        this.sixBlur = createEvent(this, "six-input-blur");
+        this.inputId = `input-${++id}`;
+        this.labelId = `input-label-${id}`;
+        this.helpTextId = `input-help-text-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorSlot = false;
+        this.isPasswordVisible = false;
+        /** The input's type. */
+        this.type = 'text';
+        /** The input's size. */
+        this.size = 'medium';
+        /** The input's name attribute. */
+        this.name = '';
+        /** The input's value attribute. */
+        this.value = '';
+        /** Set to true to draw a pill-style input with rounded edges. */
+        this.pill = false;
+        /** The input's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** Set to true to disable the input. */
+        this.disabled = false;
+        /** Set to true to make the input readonly. */
+        this.readonly = false;
+        /**
+         * Internal: Styles the input for the dropdown filter search.
+         */
+        this.dropdownSearch = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The input's autocaptialize attribute. */
+        this.autocapitalize = 'off';
+        /** The input's autocorrect attribute. */
+        this.autocorrect = 'off';
+        /** The input's autocomplete attribute. */
+        this.autocomplete = 'off';
+        /** The input's autofocus attribute. */
+        this.autofocus = false;
+        /** Enables spell checking on the input. */
+        this.spellcheck = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
+        /** Set to true to add a password toggle button for password inputs. */
+        this.togglePassword = false;
+        /** Set to render as line */
+        this.line = false;
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            if (this.nativeInput != null) {
+                this.value = this.nativeInput.value;
+                this.sixChange.emit();
+            }
+        };
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            if (this.nativeInput != null) {
+                this.value = this.nativeInput.value;
+                this.sixInput.emit();
+            }
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleClearClick = (event) => {
+            this.value = '';
+            this.sixClear.emit();
+            this.sixInput.emit();
+            this.sixChange.emit();
+            if (this.nativeInput != null) {
+                this.nativeInput.focus();
+            }
+            event.stopPropagation();
+        };
+        this.handleKeyDown = (event) => {
+            const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+            if (event.key === 'Enter' && !hasModifier) {
+                setTimeout(() => {
+                    if (!event.defaultPrevented && !event.isComposing) {
+                        submitForm(this.host);
+                    }
+                });
+            }
+        };
+        this.handlePasswordToggle = () => {
+            this.isPasswordVisible = !this.isPasswordVisible;
+        };
+        this.handleSlotChange = () => {
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasErrorSlot = hasSlot(this.host, 'error-text');
+        };
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    handleValueChange() {
+        this.value = this.getValue();
+        if (this.nativeInput != null && this.nativeInput.value !== this.value) {
+            this.nativeInput.value = this.value;
+        }
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-input-input', 'input', this.host);
+        this.eventListeners.forward('six-input-change', 'change', this.host);
+        this.eventListeners.forward('six-input-focus', 'focus', this.host);
+        this.eventListeners.forward('six-input-blur', 'blur', this.host);
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
+    }
+    /** Sets focus on the input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the input. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /** Selects all the text in the input. */
+    async select() {
+        var _a;
+        return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.select();
+    }
+    /** Sets the start and end positions of the text selection (0-based). */
+    async setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
+        var _a;
+        return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    }
+    /** Returns the start and end positions of the text selection */
+    async getSelectionRange() {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+            selectionStart: (_b = (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : undefined,
+            selectionEnd: (_d = (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.selectionEnd) !== null && _d !== void 0 ? _d : undefined,
+            selectionDirection: (_f = (_e = this.nativeInput) === null || _e === void 0 ? void 0 : _e.selectionDirection) !== null && _f !== void 0 ? _f : undefined,
+        };
+    }
+    /** Replaces a range of text with a new string. */
+    async setRangeText(replacement, start, end, selectMode = 'preserve') {
+        if (this.nativeInput == null) {
+            return;
+        }
+        this.nativeInput.setRangeText(replacement, start, end, selectMode);
+        if (this.getValue() !== this.nativeInput.value) {
+            this.value = this.nativeInput.value;
+            this.sixChange.emit();
+            this.sixInput.emit();
+        }
+    }
+    getValue() {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
+    }
+    render() {
+        return (h(FormControl, { key: '8c61ef61949c55f7a2a4428bc0cbd1ad3429376c', 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.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '164f57efb598ff9cd8e0e2f0d9dc0632126bb599', part: "base", class: {
+                input: true,
+                // Sizes
+                'input--small': this.size === 'small',
+                'input--medium': this.size === 'medium',
+                'input--large': this.size === 'large',
+                // States
+                'input--line': this.line,
+                'input--pill': this.pill,
+                'input--disabled': this.disabled,
+                'input--dropdown-search': this.dropdownSearch,
+                'input--focused': this.hasFocus,
+                'input--empty': this.getValue().length === 0,
+                'input--invalid': this.invalid,
+            } }, h("span", { key: 'e590f3edf7da55cd0ef6fde84415431095a3b2c6', part: "prefix", class: "input__prefix" }, h("slot", { key: 'd4352ed93f6977d425a8163958d3c92d043c113c', name: "prefix" })), h("input", { key: '77bf27819e073a903dce1f804ac54f4b25f5135d', part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
+                input__control: true,
+                input__control__prefix: hasSlot(this.host, 'prefix'),
+            }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "data-testid": "input-control" }), this.clearable && !this.disabled && (h("button", { key: '4558842c4d9fa3623688a18aab4a69da2a156f65', part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { key: '6b03819fbf8640f01c292c373931d7c80a322e0d', name: "clear-icon" }, h("six-icon", { key: 'f53987138284512733769632c3ba246b4e9db721', size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { key: 'e42a2c571095282b3fcdc4cf66d4aa013339a437', part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { key: '6b1530248f04eff0e1de3137479384cfde161c39', part: "suffix", class: "input__suffix" }, h("slot", { key: '7f091246942c4af0c56adc76afda69e24e827d43', name: "suffix" })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "helpText": ["handleLabelChange"],
+        "errorText": ["handleLabelChange"],
+        "label": ["handleLabelChange"],
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return sixInputCss; }
+}, [1, "six-input", {
+        "type": [513],
+        "size": [513],
+        "name": [513],
+        "value": [1537],
+        "pill": [516],
+        "helpText": [1, "help-text"],
+        "placeholder": [1],
+        "disabled": [516],
+        "readonly": [516],
+        "minlength": [514],
+        "maxlength": [514],
+        "min": [514],
+        "max": [514],
+        "step": [514],
+        "pattern": [513],
+        "dropdownSearch": [4, "dropdown-search"],
+        "required": [4],
+        "autocapitalize": [1],
+        "autocorrect": [1],
+        "autocomplete": [1],
+        "autofocus": [4],
+        "spellcheck": [4],
+        "label": [1],
+        "errorText": [1, "error-text"],
+        "errorTextCount": [2, "error-text-count"],
+        "invalid": [516],
+        "clearable": [4],
+        "togglePassword": [4, "toggle-password"],
+        "inputmode": [1],
+        "line": [4],
+        "hasFocus": [32],
+        "hasHelpTextSlot": [32],
+        "hasLabelSlot": [32],
+        "hasErrorSlot": [32],
+        "isPasswordVisible": [32],
+        "setFocus": [64],
+        "removeFocus": [64],
+        "select": [64],
+        "setSelectionRange": [64],
+        "getSelectionRange": [64],
+        "setRangeText": [64]
+    }, undefined, {
+        "helpText": ["handleLabelChange"],
+        "errorText": ["handleLabelChange"],
+        "label": ["handleLabelChange"],
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-input", "six-error", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixInput);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixInput as S, defineCustomElement as d };
+//# sourceMappingURL=p-NB9EUAIJ.js.map
+
+//# sourceMappingURL=p-NB9EUAIJ.js.map