@six-group/ui-library 0.0.0-insider.b26fdef → 0.0.0-insider.b2db78f

package/dist/components/p-C733XVqS.js

@@ -0,0 +1,187 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { f as focusVisible } from './p-Vw_F19Fv.js';
+import { d as defineCustomElement$1 } from './p-Bga8smgq.js';
+
+const sixDetailsCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;--horizontal-padding:var(--six-spacing-medium);font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium) var(--horizontal-padding);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";
+
+let id = 0;
+const SixDetails = /*@__PURE__*/ proxyCustomElement(class SixDetails extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixShow = createEvent(this, "six-details-show");
+        this.sixAfterShow = createEvent(this, "six-details-after-show");
+        this.sixHide = createEvent(this, "six-details-hide");
+        this.sixAfterHide = createEvent(this, "six-details-after-hide");
+        this.animateSummaryIcon = true;
+        this.componentId = `details-${++id}`;
+        this.isVisible = false;
+        /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
+        this.summary = '';
+        /** The icon's size. */
+        this.summaryIconSize = 'inherit';
+        /** Set to true to prevent the user from toggling the details. */
+        this.disabled = false;
+        /** Set to true when you want to use six-details inline e.g. in a sidebar */
+        this.inline = false;
+        /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */
+        this.selectableEmpty = false;
+        /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.hasContent = true;
+        this.handleBodyTransitionEnd = (event) => {
+            if (this.body == null)
+                return;
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+                this.body.style.overflow = this.open ? 'visible' : 'hidden';
+                this.body.style.height = this.open ? 'auto' : '0';
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+                this.body.hidden = !this.open;
+            }
+        };
+        this.handleSummaryClick = () => {
+            var _a;
+            if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+                this.open ? this.hide() : this.show();
+                (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.handleSummaryKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.open ? this.hide() : this.show();
+            }
+            if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.hide();
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.show();
+            }
+        };
+    }
+    handleOpenChange() {
+        if (this.body != null) {
+            this.open ? this.show() : this.hide();
+        }
+    }
+    componentDidLoad() {
+        if (this.details == null || this.body == null)
+            return;
+        focusVisible.observe(this.details);
+        this.body.hidden = !this.open;
+        // Show on init if open
+        if (this.open) {
+            this.show();
+        }
+    }
+    disconnectedCallback() {
+        if (this.details != null) {
+            focusVisible.unobserve(this.details);
+        }
+    }
+    /** Shows the detail body */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible || this.body == null)
+            return;
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
+        }
+        this.body.hidden = false;
+        if (this.body.scrollHeight === 0) {
+            // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
+            // initially, but not immediately visible (i.e. in a tab panel).
+            this.body.style.height = 'auto';
+            this.body.style.overflow = 'visible';
+        }
+        else {
+            this.body.style.height = `${this.body.scrollHeight}px`;
+            this.body.style.overflow = 'hidden';
+        }
+        this.isVisible = true;
+        this.open = true;
+    }
+    /** Hides the detail body */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible || this.body == null)
+            return;
+        const body = this.body;
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
+        }
+        // We can't transition out of `height: auto`, so let's set it to the current height first
+        body.style.height = `${body.scrollHeight}px`;
+        body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            body.style.height = '0';
+        });
+        this.isVisible = false;
+        this.open = false;
+    }
+    render() {
+        const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
+        return (h("div", { key: '9da333bcd1a3a6516672fbce89348a830bdc3af3', ref: (el) => (this.details = el), part: "base", class: {
+                details: true,
+                'details--open': this.open,
+                'details--disabled': this.disabled,
+                inline: this.inline,
+            } }, h("header", { key: '110254ed5654bce7be595ba48af712a388f20e21', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, h("div", { key: 'c238f0178735a5416a4a713d10932940a8120dfc', part: "summary", class: "details__summary" }, h("slot", { key: '7918cfa06d9d6b35d3fd870f56ed271d9c5fc2a8', name: "summary" }, this.summary)), h("span", { key: '9121d0b4feff38685330196e4a48910b0278741d', part: "summary-icon", class: {
+                'details__summary-icon': true,
+                'details__summary-icon--animate': this.animateSummaryIcon,
+            } }, h("slot", { key: '933ebb5f0b7a4a0fbf6cba6fb4009ac6305f27c5', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { key: '9b16a435526ca7558a323e45d6bcabf242b232b1', size: this.summaryIconSize }, summaryIcon)))), h("div", { key: '368f68c2078ebe9b3ae82b1c4023ad40b4b33757', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { key: '278aa0b3496672fd5a4414b990ff77edd1c758f3', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", { key: 'e5d3ef50d1097cb7ce79ed5fafaa78901f6d1352' })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return sixDetailsCss; }
+}, [1, "six-details", {
+        "open": [1540],
+        "summary": [1],
+        "summaryIcon": [1, "summary-icon"],
+        "summaryIconSize": [513, "summary-icon-size"],
+        "disabled": [4],
+        "inline": [4],
+        "selectableEmpty": [4, "selectable-empty"],
+        "hasContent": [4, "has-content"],
+        "animateSummaryIcon": [32],
+        "show": [64],
+        "hide": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-details", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixDetails);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixDetails as S, defineCustomElement as d };
+//# sourceMappingURL=p-C733XVqS.js.map
+
+//# sourceMappingURL=p-C733XVqS.js.map

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

@@ -0,0 +1 @@
+{"file":"p-C733XVqS.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,u1EAAu1E;;ACI72E,IAAI,EAAE,GAAG,CAAC;MAuBG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;;;;AAQW,QAAA,IAAkB,CAAA,kBAAA,GAAG,IAAI;AAK1B,QAAA,IAAA,CAAA,WAAW,GAAG,WAAW,EAAE,EAAE,EAAE;AAC/B,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;;AAGe,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;;AAG5C,QAAA,IAAO,CAAA,OAAA,GAAG,EAAE;;AAMK,QAAA,IAAe,CAAA,eAAA,GAQvB,SAAS;;AAGlB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;;;AAIvB,QAAA,IAAU,CAAA,UAAA,GAAG,IAAI;AA6FjB,QAAA,IAAA,CAAA,uBAAuB,GAAG,CAAC,KAAsB,KAAI;AAC3D,YAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;gBAAE;AACvB,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;;AAG1C,YAAA,IAAI,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;AACjF,gBAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,QAAQ;AAC3D,gBAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,GAAG;gBACjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;gBAC/D,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI;;AAEjC,SAAC;AAEO,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE;AAC/D,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;gBACrC,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAExB,SAAC;AAEO,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAI;AACtD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;;AAGvC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBACxD,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,IAAI,EAAE;;AAGb,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;gBAC3D,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AA4DF;IAzLC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;;;IAgBzC,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;YAAE;AAE/C,QAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI;;AAG7B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE;;;IAIf,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE;AACxB,YAAA,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;AAMxC,IAAA,MAAM,IAAI,GAAA;;QAER,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;YAAE;QAEzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACnC,QAAA,IAAI,OAAO,CAAC,gBAAgB,EAAE;AAC5B,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;YACjB;;AAGF,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK;QAExB,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;;;YAGhC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS;;aAC/B;AACL,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI;YACtD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;AAErC,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;;AAKlB,IAAA,MAAM,IAAI,GAAA;;QAER,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;YAAE;AAC1C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI;QAEtB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACnC,QAAA,IAAI,OAAO,CAAC,gBAAgB,EAAE;AAC5B,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;YAChB;;;QAIF,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAA,EAAA,CAAI;AAC5C,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;QAE9B,qBAAqB,CAAC,MAAK;AAGzB,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;AACzB,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;IAwCnB,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,IAAI,aAAa,CAAC;AAE1E,QAAA,QACE,4DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,eAAe,EAAE,IAAI,CAAC,IAAI;gBAC1B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,aAAA,EAAA,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,CAAG,EAAA,IAAI,CAAC,WAAW,CAAA,OAAA,CAAS,EAChC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,QAAQ,EACE,eAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC5B,GAAG,IAAI,CAAC,WAAW,CAAA,QAAA,CAAU,EAAA,eAAA,EAC7B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAA,EAEpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,kBAAkB,EAAA,EAC1C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACtC,EAEN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,IAAI;gBAC7B,gCAAgC,EAAE,IAAI,CAAC,kBAAkB;AAC1D,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,YAAY,EAAE,OAAO,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,EAAA,EAC5E,WAAW,IAAI,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,eAAe,EAAG,EAAA,WAAW,CAAY,CACzE,CACF,CACA,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,eAAe,EAAE,IAAI,CAAC,uBAAuB,EAAA,EACrG,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA,QAAA,CAAU,EACjC,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,qBACI,CAAG,EAAA,IAAI,CAAC,WAAW,CAAA,OAAA,CAAS,EAAA,EAE7C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n * @prop --horizontal-padding: The horizontal padding\n */\n:host {\n  --hide-duration: var(--six-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--six-transition-medium);\n  --show-timing-function: ease;\n  --horizontal-padding: var(--six-spacing-medium);\n\n  font-family: var(--six-font-family);\n  display: block;\n}\n\n.details {\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: var(--six-border-radius-medium);\n  color: var(--six-details-color);\n  overflow-anchor: none;\n  font-size: var(--six-input-font-size-medium);\n\n  &:hover:not(.details--disabled):not(.details--open) {\n    border-color: var(--six-input-border-color-hover);\n  }\n\n  &.inline {\n    border: none;\n    color: var(--six-sidebar-color);\n\n    &:hover {\n      background-color: var(--six-sidebar-hover-background-color);\n    }\n\n    &.details--open {\n      background-color: var(--six-color-web-rock-50);\n\n      &:hover {\n        border: none;\n        box-shadow: none;\n      }\n\n      & > .details__header {\n        color: var(--six-sidebar-color);\n        font-weight: var(--six-font-weight-bold);\n        background-color: var(--six-sidebar-header-background-color);\n      }\n    }\n  }\n}\n\n.details--disabled {\n  background-color: var(--six-input-background-color-disabled);\n  border-color: var(--six-input-border-color-disabled);\n  color: var(--six-input-color-disabled);\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--six-spacing-medium) var(--horizontal-padding);\n  user-select: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n  border-width: 1px;\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.2em;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n  transform: rotate(-180deg);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\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 - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host!: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  private body?: HTMLElement;\n  private details?: HTMLElement;\n  private header?: HTMLElement;\n  private componentId = `details-${++id}`;\n  private isVisible = false;\n\n  /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */\n  @Prop() selectableEmpty = false;\n\n  /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() hasContent = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body != null) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.details == null || this.body == null) return;\n\n    focusVisible.observe(this.details);\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.details != null) {\n      focusVisible.unobserve(this.details);\n    }\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.body == null) return;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // initially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.body == null) return;\n    const body = this.body;\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    body.style.height = `${body.scrollHeight}px`;\n    body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      body.clientWidth; // force a reflow\n      body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  private handleBodyTransitionEnd = (event: TransitionEvent) => {\n    if (this.body == null) return;\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  };\n\n  private handleSummaryClick = () => {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header?.focus();\n    }\n  };\n\n  private handleSummaryKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CS9Rg27-.js

@@ -0,0 +1,76 @@
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
+import { f as focusVisible } from './p-Vw_F19Fv.js';
+import { d as defineCustomElement$1 } from './p-Bga8smgq.js';
+
+const sixIconButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;text-decoration:none;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";
+
+const SixIconButton = /*@__PURE__*/ proxyCustomElement(class SixIconButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** The icon's size. */
+        this.size = 'medium';
+        /** Set to true to disable the button. */
+        this.disabled = false;
+        this.handleClickEvent = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+    }
+    componentDidLoad() {
+        if (this.button != null) {
+            focusVisible.observe(this.button);
+        }
+    }
+    disconnectedCallback() {
+        if (this.button != null) {
+            focusVisible.unobserve(this.button);
+        }
+    }
+    render() {
+        const isLink = this.href != null;
+        const isButton = !isLink;
+        const Button = isLink ? 'a' : 'button';
+        const html = this.html && h("span", { key: 'f351c6ac9b9c3a35d1c7cdd55d3e919f070244d0', innerHTML: this.html });
+        return (h("div", { key: '3828510ea2e5a3318c4f9dc1f40f0f13ec8f5120', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h(Button, { key: '05ed661d1f708125d5353caefe236cd7bf8a427e', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
+                'icon-button': true,
+                'icon-button--disabled': this.disabled,
+            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, h("six-icon", { key: 'ba8d525d4ced58c6c93dff964738f34b3a36f067', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '8f1c47548463c556045359dc3bfaa51d14b1a6ad' }), html)));
+    }
+    static get style() { return sixIconButtonCss; }
+}, [1, "six-icon-button", {
+        "name": [513],
+        "size": [513],
+        "label": [513],
+        "disabled": [516],
+        "html": [513],
+        "href": [1],
+        "target": [1],
+        "download": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-icon-button", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-icon-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixIconButton);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixIconButton as S, defineCustomElement as d };
+//# sourceMappingURL=p-CS9Rg27-.js.map
+
+//# sourceMappingURL=p-CS9Rg27-.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CS9Rg27-.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,87CAA87C;;MCiB18C,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;;AAY2B,QAAA,IAAI,CAAA,IAAA,GAAgF,QAAQ;;AAS5F,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA4DjC,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;;AAE3B,SAAC;AACF;IApDC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIrC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;AACvB,YAAA,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;;;IAIvC,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI;AAChC,QAAA,MAAM,QAAQ,GAAG,CAAC,MAAM;QACxB,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAExD,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC5F,CAAC,CAAA,MAAM,qDACL,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACvC,aAAA,EACD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,gBACzB,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC/D,QAAQ,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACrE,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG,qBAAqB,GAAG,SAAS,EAAA,EAEtE,CAAsB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EACzC,EAAA,IAAI,CAAC,IAAI,CACD,EACX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,IAAI,CACE,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--six-border-radius-medium);\n  font-size: inherit;\n  text-decoration: none;\n  color: var(--six-input-icon-color);\n  padding: var(--six-spacing-x-small);\n  cursor: pointer;\n  transition: var(--six-transition-medium) color;\n  -webkit-appearance: none;\n\n  &:hover:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color-hover);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--six-input-icon-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.icon-button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n  transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n  transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n  transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n  //  no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n  transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement | HTMLAnchorElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type={isButton ? 'button' : undefined}\n          aria-label={this.label}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </Button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"],"version":3}

package/dist/components/p-Cc_nfyAl.js

@@ -0,0 +1,35 @@
+import { h } from './p-BAe7gBEi.js';
+
+const FormControl = (props, children) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const errorMessages = (Array.isArray(props.errorText) ? props.errorText : [props.errorText]).filter((text) => text != null && text.trim() !== '');
+    const hasLabel = props.label != null && props.label.trim() !== '' ? true : (_a = props.hasLabelSlot) !== null && _a !== void 0 ? _a : false;
+    const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : (_b = props.hasHelpTextSlot) !== null && _b !== void 0 ? _b : false;
+    const hasErrorText = (errorMessages.length > 0 || ((_c = props.hasErrorTextSlot) !== null && _c !== void 0 ? _c : false)) && ((_d = props.displayError) !== null && _d !== void 0 ? _d : false);
+    return (h("div", { part: "form-control", class: {
+            'form-control': true,
+            'form-control--small': props.size === 'small',
+            'form-control--medium': props.size === 'medium',
+            'form-control--large': props.size === 'large',
+            'form-control--has-label': hasLabel,
+            'form-control--has-help-text': hasHelpText,
+            'form-control--has-error-text': hasErrorText,
+            'form-control--disabled': (_e = props.disabled) !== null && _e !== void 0 ? _e : false,
+            'form-control--invalid': ((_f = props.displayError) !== null && _f !== void 0 ? _f : false) && !props.disabled,
+        } },
+        h("label", { part: "label", id: props.labelId, class: {
+                'form-control__label': true,
+                'form-control__label__required': (_g = props.required) !== null && _g !== void 0 ? _g : false,
+            }, htmlFor: props.inputId, "aria-hidden": hasLabel ? 'false' : 'true', onClick: props.onLabelClick },
+            h("slot", { name: "label" }, props.label)),
+        h("div", { class: "form-control__input" }, children),
+        h("div", { part: "error-text", id: props.errorTextId, class: "form-control__error-text", "aria-hidden": hasErrorText ? 'false' : 'true' },
+            h("slot", { name: "error-text" }, errorMessages.slice(0, (_h = props.errorTextCount) !== null && _h !== void 0 ? _h : 1).map((text) => (h("six-error", null, text))))),
+        h("div", { part: "help-text", id: props.helpTextId, class: "form-control__help-text", "aria-hidden": hasHelpText ? 'false' : 'true' },
+            h("slot", { name: "help-text" }, props.helpText))));
+};
+
+export { FormControl as F };
+//# sourceMappingURL=p-Cc_nfyAl.js.map
+
+//# sourceMappingURL=p-Cc_nfyAl.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Cc_nfyAl.js","mappings":"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","names":[],"sources":["src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h, VNode } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** Whether an error text slot has been provided. */\n  hasErrorTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text (if the error-text slot isn't used) */\n  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  errorTextCount?: number;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children: VNode[]) => {\n  const errorMessages = (Array.isArray(props.errorText) ? props.errorText : [props.errorText]).filter(\n    (text) => text != null && text.trim() !== ''\n  );\n\n  const hasLabel = props.label != null && props.label.trim() !== '' ? true : props.hasLabelSlot ?? false;\n  const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : props.hasHelpTextSlot ?? false;\n  const hasErrorText = (errorMessages.length > 0 || (props.hasErrorTextSlot ?? false)) && (props.displayError ?? false);\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': hasErrorText,\n        'form-control--disabled': props.disabled ?? false,\n        'form-control--invalid': (props.displayError ?? false) && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required ?? false,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={hasErrorText ? 'false' : 'true'}\n      >\n        <slot name=\"error-text\">\n          {errorMessages.slice(0, props.errorTextCount ?? 1).map((text) => (\n            <six-error>{text}</six-error>\n          ))}\n        </slot>\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"version":3}