@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-columns.js

@@ -1,40 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const swirlColumnsCss = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}";
-
-const SwirlColumns$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColumns extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.columns = "repeat(3, minmax(0, 1fr))";
-    }
-    render() {
-        return (h(Host, { key: '779371e7d28640a71aaad2d2de8d91b5b8d63e88' }, h("div", { key: 'de846647d2b436277cd2765f9814796320af071d', class: "columns", style: {
-                gridTemplateColumns: this.columns,
-                gap: `var(--s-space-${this.spacing})`,
-            } }, h("slot", { key: 'ca510de4dae9c7055d2db6e02020cdfca95e58c6' }))));
-    }
-    static get style() { return swirlColumnsCss; }
-}, [1, "swirl-columns", {
-        "columns": [1],
-        "spacing": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-columns"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-columns":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlColumns$1);
-            }
-            break;
-    } });
-}
-
-const SwirlColumns = SwirlColumns$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlColumns, defineCustomElement };
+import{proxyCustomElement as s,HTMLElement as e,h as t,Host as c,transformTag as n}from"@stencil/core/internal/client";const d=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.columns="repeat(3, minmax(0, 1fr))"}render(){return t(c,{key:"779371e7d28640a71aaad2d2de8d91b5b8d63e88"},t("div",{key:"de846647d2b436277cd2765f9814796320af071d",class:"columns",style:{gridTemplateColumns:this.columns,gap:`var(--s-space-${this.spacing})`}},t("slot",{key:"ca510de4dae9c7055d2db6e02020cdfca95e58c6"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}"}},[257,"swirl-columns",{columns:[1],spacing:[1]}]),o=d,i=function(){"undefined"!=typeof customElements&&["swirl-columns"].forEach((s=>{"swirl-columns"===s&&(customElements.get(n(s))||customElements.define(n(s),d))}))};export{o as SwirlColumns,i as defineCustomElement}

package/dist/components/swirl-console-layout.js

@@ -1,224 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as debounce, i as isMobileViewport } from './utils.js';
-import { d as defineCustomElement$4 } from './swirl-button2.js';
-import { d as defineCustomElement$3 } from './swirl-heading2.js';
-import { d as defineCustomElement$2 } from './swirl-text2.js';
-
-const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:\"content\"\n        \"footer\";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:\"app-bar\"\n    \"content\"\n    \"footer\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}";
-
-const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsoleLayout extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.backButtonClick = createEvent(this, "backButtonClick", 7);
-        this.helpButtonClick = createEvent(this, "helpButtonClick", 7);
-        this.backButonLabel = "Back";
-        this.helpButonLabel = "Help";
-        this.hideNavigationButtonLabel = "Hide main navigation";
-        this.logoText = "Admin";
-        this.navigationLabel = "Main";
-        this.showNavigationButtonLabel = "Show main navigation";
-        this.contentScrollState = {
-            scrollable: false,
-            scrolledToTop: false,
-            scrolledToBottom: false,
-        };
-        this.updateCustomAppBarStatus = () => {
-            this.hasCustomAppBar = Boolean(this.el.querySelector('[slot="app-bar"]'));
-        };
-        this.updateFooterStatus = () => {
-            this.hasFooter = Boolean(this.el.querySelector('[slot="footer"]'));
-        };
-        this.onMainScroll = debounce(() => {
-            this.updateContentScrollState();
-        }, 16);
-        this.onBackButtonClick = (event) => {
-            this.backButtonClick.emit(event);
-        };
-        this.onHelpButtonClick = (event) => {
-            this.helpButtonClick.emit(event);
-        };
-        this.onMobileNavigationToggleClick = () => {
-            this.toggleSidebar();
-        };
-        this.onClick = (event) => {
-            const target = event.target;
-            const clickOnToggle = Boolean(target.closest(".console-layout__mobile-navigation-button"));
-            const clickOnOverlay = target.closest("[slot]")?.slot === "overlays";
-            const clickInsideSidebar = event.composedPath().includes(this.sidebarEl);
-            if (!clickInsideSidebar &&
-                !clickOnToggle &&
-                !clickOnOverlay &&
-                this.sidebarActive) {
-                this.deactivateSidebar();
-            }
-        };
-        this.onKeyDown = (event) => {
-            if (event.code === "Escape" && this.sidebarActive) {
-                this.deactivateSidebar();
-            }
-        };
-    }
-    componentDidLoad() {
-        queueMicrotask(() => {
-            if (!isMobileViewport()) {
-                this.activateSidebar();
-            }
-            else {
-                this.deactivateSidebar();
-            }
-            // Update initial scroll state
-            this.updateContentScrollState();
-            // Update initial slot states
-            this.updateCustomAppBarStatus();
-            this.updateFooterStatus();
-        });
-    }
-    updateContentScrollState() {
-        if (!this.contentEl) {
-            return;
-        }
-        const newContentScrollState = {
-            scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
-            scrolledToTop: this.contentEl.scrollTop === 0,
-            scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >=
-                this.contentEl.scrollHeight,
-        };
-        if (Object.keys(newContentScrollState).some((key) => newContentScrollState[key] !== this.contentScrollState[key])) {
-            this.contentScrollState = newContentScrollState;
-        }
-    }
-    onWindowResize() {
-        const mobileViewport = isMobileViewport();
-        if (!mobileViewport && !this.sidebarActive) {
-            this.activateSidebar();
-        }
-        else if (mobileViewport) {
-            this.deactivateSidebar();
-        }
-    }
-    /**
-     * Toggle the mobile navigation visibility.
-     */
-    async toggleSidebar() {
-        if (this.sidebarActive) {
-            this.deactivateSidebar();
-        }
-        else {
-            this.activateSidebar();
-        }
-    }
-    /**
-     * Show the mobile navigation.
-     */
-    async showSidebar() {
-        if (!this.sidebarActive) {
-            this.activateSidebar();
-        }
-    }
-    /**
-     * Hide the mobile navigation.
-     */
-    async hideSidebar() {
-        if (this.sidebarActive) {
-            this.deactivateSidebar();
-        }
-    }
-    activateSidebar() {
-        this.sidebarActive = true;
-        this.sidebarEl.removeAttribute("inert");
-        if (isMobileViewport()) {
-            this.el.querySelector("swirl-tree-navigation-item")?.focus();
-        }
-    }
-    deactivateSidebar() {
-        this.sidebarActive = false;
-        if (isMobileViewport()) {
-            this.sidebarEl.setAttribute("inert", "");
-        }
-    }
-    render() {
-        const contentStyles = Boolean(this.maxContentWidth)
-            ? {
-                maxWidth: this.maxContentWidth,
-                justifySelf: "center",
-                width: "100%",
-            }
-            : undefined;
-        this.updateCustomAppBarStatus();
-        this.updateFooterStatus();
-        const className = classNames("console-layout", {
-            "console-layout--sidebar-active": this.sidebarActive,
-            "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !this.hasCustomAppBar,
-            "console-layout--has-footer": this.hasFooter,
-            "console-layout--has-custom-app-bar": this.hasCustomAppBar,
-            "console-layout--main-scrollable": this.contentScrollState.scrollable,
-            "console-layout--main-scrolled-to-top": this.contentScrollState.scrolledToTop,
-            "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
-            "console-layout--hide-content-header": this.hideContentHeader,
-        });
-        return (h(Host, { key: '15d2f52c18697e566c4dd1d3bdb9db576ad0dcec' }, h("div", { key: 'c054039010eae676edb7f10aad03fc7fa9a9a8c4', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("header", { key: '6c9a4c509e903b0e44ac05bacd9430681a64920a', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("div", { key: 'af1b7fefeac8af4efef4958c7eb730e424752932', class: "console-layout__header" }, h("div", { key: 'f5db1d27aefdf046f49dfcef3a1e9a9555ec916b', class: "console-layout__logo" }, h("svg", { key: '08f2f49df60a0587d260a3fc2304b7cee5ee3617', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4d6748b153c86e5620c4e4c59ff1dc25b7c11c8e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), h("swirl-text", { key: '970514ed57833a9529f311a5c43467c4daa672c6', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { key: '9fb6ab4b03fb2ac61117592059cb32c103024deb', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { key: '01a623e3e09bc87b0c602dcd2fa7da423fb07308', name: "navigation" })), h("div", { key: '976030dfa1856cc1dea4a5c5ff64fd1ea97d3089', class: "console-layout__user" }, h("slot", { key: '3283d6b75520d4abf292c9a5d07e2578e9cb381b', name: "user" }))), h("main", { key: 'e12320ffd46285bc10daaa7b782d776697e9ce9d', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, h("header", { key: '901d795e7ff7c56da51bd3a7dd2a0407cfa2aa82', class: "console-layout__app-bar console-layout__app-bar--custom" }, h("slot", { key: '78d1b2f14e1dd09d5cc2b5783dff3f7e994a73aa', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), h("header", { key: 'ff530c79297f657e646af25aa83578bcaae2fbb8', class: "console-layout__app-bar" }, h("span", { key: '65f29c7006a92a8fe924a8e455fa32ad0f28c4db', class: "console-layout__mobile-navigation-button" }, h("swirl-button", { key: '7218846d10839b1994da82ccfbc291b415077de4', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
-                ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
-                ? this.hideNavigationButtonLabel
-                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("div", { key: 'fbf0b8ded8f0fa74baa5b2c9acfdcdf9bcf57183', class: "console-layout__app-name" }, this.appName && (h("swirl-heading", { key: 'd982f91e9d5beb99082187e40105785c136ee38b', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (h("swirl-button", { key: '1d63dc04cb72ba2db7ab055b3d748c59abdc379f', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { key: 'ef836c5b943a749cdcee7db1a87d5bc16f5e9a27', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, h("div", { key: '36ea5994c2837090daac583ea08623b4c3c0570a', class: "console-layout__content-container" }, !this.hideContentHeader && (h("header", { key: '7dfaddb3e368d213faa55567736979710d534742', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (h("swirl-button", { key: 'adc51b4211fa79b094e80604f7d2dab126659019', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (h("div", { key: '05bbbb590b2c1fc0d495fa61c9de4bbaaf89014d', class: "console-layout__heading-container" }, h("swirl-heading", { key: '31dc5f25083685e038d1d126cb594695ec20361e', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { key: 'e27d210f844ec818be9507e5f492528f575a9969', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (h("div", { key: 'dde72801d7baade4b3537cb295fd427b7de8924f', class: "console-layout__heading-container" }, h("slot", { key: '444c84c0e8ab0c2794b22e3fbb854ae56c7866eb', name: "heading" }))), h("div", { key: 'b13f0da62021e6ae9279b392b8b3c1469f30b771', class: "console-layout__content-header-tools" }, h("slot", { key: 'e4020c482ae5c060f62d7a5b3535d43ff8e43955', name: "content-header-tools" })))), h("div", { key: '3bef306687d7786801db4a51cc3bc42c3da7040d', class: "console-layout__integration", style: contentStyles }, h("slot", { key: 'bb96d82dfceb770864dae5db21d8d4c3ab560089', name: "content" })))), h("footer", { key: '50cfb94c33f2eae3823b79a2aba1961287d5129b', class: "console-layout__footer" }, h("slot", { key: 'ef963b0a2354e05cb1a7ccbae2db12fe9bfe102e', name: "footer", onSlotchange: this.updateFooterStatus })), h("div", { key: 'b4f047c7670949069ad5f2e4b63618d267b66a80', class: "console-layout__overlays" }, h("slot", { key: 'd45aacca9d750da73294745eb8a6910e372673dd', name: "overlays" }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlConsoleLayoutCss; }
-}, [1, "swirl-console-layout", {
-        "appName": [1, "app-name"],
-        "backButonLabel": [1, "back-buton-label"],
-        "heading": [1],
-        "helpButonLabel": [1, "help-buton-label"],
-        "hideNavigationButtonLabel": [1, "hide-navigation-button-label"],
-        "logoText": [1, "logo-text"],
-        "navigationLabel": [1, "navigation-label"],
-        "maxContentWidth": [1, "max-content-width"],
-        "showBackButton": [4, "show-back-button"],
-        "showHelpButton": [4, "show-help-button"],
-        "showNavigationButtonLabel": [1, "show-navigation-button-label"],
-        "subheading": [1],
-        "hideContentHeader": [4, "hide-content-header"],
-        "sidebarActive": [32],
-        "contentScrollState": [32],
-        "hasCustomAppBar": [32],
-        "hasFooter": [32],
-        "toggleSidebar": [64],
-        "showSidebar": [64],
-        "hideSidebar": [64]
-    }, [[9, "resize", "onWindowResize"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-console-layout", "swirl-button", "swirl-heading", "swirl-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-console-layout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlConsoleLayout$1);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlConsoleLayout = SwirlConsoleLayout$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlConsoleLayout, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as o,createEvent as a,h as t,Host as s,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as n,i as d}from"./utils.js";import{d as r}from"./swirl-button2.js";import{d as c}from"./swirl-heading2.js";import{d as h}from"./swirl-text2.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=a(this,"backButtonClick",7),this.helpButtonClick=a(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=!!this.el.querySelector('[slot="app-bar"]')},this.updateFooterStatus=()=>{this.hasFooter=!!this.el.querySelector('[slot="footer"]')},this.onMainScroll=n((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=e=>{this.backButtonClick.emit(e)},this.onHelpButtonClick=e=>{this.helpButtonClick.emit(e)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=e=>{const o=e.target,a=!!o.closest(".console-layout__mobile-navigation-button"),t="overlays"===o.closest("[slot]")?.slot;e.composedPath().includes(this.sidebarEl)||a||t||!this.sidebarActive||this.deactivateSidebar()},this.onKeyDown=e=>{"Escape"===e.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{d()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const e={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(e).some((o=>e[o]!==this.contentScrollState[o]))&&(this.contentScrollState=e)}onWindowResize(){const e=d();e||this.sidebarActive?e&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive||this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),d()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,d()&&this.sidebarEl.setAttribute("inert","")}render(){const e=this.maxContentWidth?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const o=l("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!this.appName&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"console-layout--hide-content-header":this.hideContentHeader});return t(s,{key:"15d2f52c18697e566c4dd1d3bdb9db576ad0dcec"},t("div",{key:"c054039010eae676edb7f10aad03fc7fa9a9a8c4",class:o,onClick:this.onClick,onKeyDown:this.onKeyDown},t("header",{key:"6c9a4c509e903b0e44ac05bacd9430681a64920a","aria-hidden":!this.sidebarActive+"",class:"console-layout__sidebar",ref:e=>this.sidebarEl=e},t("div",{key:"af1b7fefeac8af4efef4958c7eb730e424752932",class:"console-layout__header"},t("div",{key:"f5db1d27aefdf046f49dfcef3a1e9a9555ec916b",class:"console-layout__logo"},t("svg",{key:"08f2f49df60a0587d260a3fc2304b7cee5ee3617",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 301 460",width:"16",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"4d6748b153c86e5620c4e4c59ff1dc25b7c11c8e","fill-rule":"evenodd","clip-rule":"evenodd",d:"M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z",fill:"#2151F5"})),t("swirl-text",{key:"970514ed57833a9529f311a5c43467c4daa672c6",class:"console-layout__logo-text",weight:"medium"},this.logoText))),t("nav",{key:"9fb6ab4b03fb2ac61117592059cb32c103024deb","aria-label":this.navigationLabel,class:"console-layout__navigation"},t("slot",{key:"01a623e3e09bc87b0c602dcd2fa7da423fb07308",name:"navigation"})),t("div",{key:"976030dfa1856cc1dea4a5c5ff64fd1ea97d3089",class:"console-layout__user"},t("slot",{key:"3283d6b75520d4abf292c9a5d07e2578e9cb381b",name:"user"}))),t("main",{key:"e12320ffd46285bc10daaa7b782d776697e9ce9d","aria-labelledby":this.appName?"app-name":void 0,class:"console-layout__main"},t("header",{key:"901d795e7ff7c56da51bd3a7dd2a0407cfa2aa82",class:"console-layout__app-bar console-layout__app-bar--custom"},t("slot",{key:"78d1b2f14e1dd09d5cc2b5783dff3f7e994a73aa",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),t("header",{key:"ff530c79297f657e646af25aa83578bcaae2fbb8",class:"console-layout__app-bar"},t("span",{key:"65f29c7006a92a8fe924a8e455fa32ad0f28c4db",class:"console-layout__mobile-navigation-button"},t("swirl-button",{key:"7218846d10839b1994da82ccfbc291b415077de4",swirlAriaExpanded:this.sidebarActive+"",hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),t("div",{key:"fbf0b8ded8f0fa74baa5b2c9acfdcdf9bcf57183",class:"console-layout__app-name"},this.appName&&t("swirl-heading",{key:"d982f91e9d5beb99082187e40105785c136ee38b",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&t("swirl-button",{key:"1d63dc04cb72ba2db7ab055b3d748c59abdc379f",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),t("section",{key:"ef836c5b943a749cdcee7db1a87d5bc16f5e9a27","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:e=>this.contentEl=e},t("div",{key:"36ea5994c2837090daac583ea08623b4c3c0570a",class:"console-layout__content-container"},!this.hideContentHeader&&t("header",{key:"7dfaddb3e368d213faa55567736979710d534742",class:"console-layout__content-header",style:e},this.showBackButton&&t("swirl-button",{key:"adc51b4211fa79b094e80604f7d2dab126659019",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),!!this.heading&&t("div",{key:"05bbbb590b2c1fc0d495fa61c9de4bbaaf89014d",class:"console-layout__heading-container"},t("swirl-heading",{key:"31dc5f25083685e038d1d126cb594695ec20361e",as:this.appName?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&t("swirl-text",{key:"e27d210f844ec818be9507e5f492528f575a9969",class:"console-layout__subheading",color:"subdued"},this.subheading)),!this.heading&&t("div",{key:"dde72801d7baade4b3537cb295fd427b7de8924f",class:"console-layout__heading-container"},t("slot",{key:"444c84c0e8ab0c2794b22e3fbb854ae56c7866eb",name:"heading"})),t("div",{key:"b13f0da62021e6ae9279b392b8b3c1469f30b771",class:"console-layout__content-header-tools"},t("slot",{key:"e4020c482ae5c060f62d7a5b3535d43ff8e43955",name:"content-header-tools"}))),t("div",{key:"3bef306687d7786801db4a51cc3bc42c3da7040d",class:"console-layout__integration",style:e},t("slot",{key:"bb96d82dfceb770864dae5db21d8d4c3ab560089",name:"content"})))),t("footer",{key:"50cfb94c33f2eae3823b79a2aba1961287d5129b",class:"console-layout__footer"},t("slot",{key:"ef963b0a2354e05cb1a7ccbae2db12fe9bfe102e",name:"footer",onSlotchange:this.updateFooterStatus})),t("div",{key:"b4f047c7670949069ad5f2e4b63618d267b66a80",class:"console-layout__overlays"},t("slot",{key:"d45aacca9d750da73294745eb8a6910e372673dd",name:"overlays"})))))}get el(){return this}static get style(){return':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"         "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"     "navigation"     "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"     "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"     "content"     "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}'}},[257,"swirl-console-layout",{appName:[1,"app-name"],backButonLabel:[1,"back-buton-label"],heading:[1],helpButonLabel:[1,"help-buton-label"],hideNavigationButtonLabel:[1,"hide-navigation-button-label"],logoText:[1,"logo-text"],navigationLabel:[1,"navigation-label"],maxContentWidth:[1,"max-content-width"],showBackButton:[4,"show-back-button"],showHelpButton:[4,"show-help-button"],showNavigationButtonLabel:[1,"show-navigation-button-label"],subheading:[1],hideContentHeader:[4,"hide-content-header"],sidebarActive:[32],contentScrollState:[32],hasCustomAppBar:[32],hasFooter:[32],toggleSidebar:[64],showSidebar:[64],hideSidebar:[64]},[[9,"resize","onWindowResize"]]]),u=b,p=function(){"undefined"!=typeof customElements&&["swirl-console-layout","swirl-button","swirl-heading","swirl-text"].forEach((e=>{switch(e){case"swirl-console-layout":customElements.get(i(e))||customElements.define(i(e),b);break;case"swirl-button":customElements.get(i(e))||r();break;case"swirl-heading":customElements.get(i(e))||c();break;case"swirl-text":customElements.get(i(e))||h()}}))};export{u as SwirlConsoleLayout,p as defineCustomElement}

package/dist/components/swirl-data-cell-stack.js

@@ -1,59 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { v as v4 } from './v4.js';
-
-const swirlDataCellStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l)\n    var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)\n    var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}";
-
-const SwirlDataCellStack$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDataCellStack extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.hideLabel = false;
-        this.headerId = `data-cell-stack-header-${v4()}`;
-        this.onSlotChange = (event) => {
-            const slot = event.target;
-            const elements = slot.assignedElements();
-            const invalidElements = elements.filter((el) => el.tagName !== "SWIRL-DATA-CELL");
-            if (invalidElements.length > 0) {
-                console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.");
-            }
-        };
-    }
-    render() {
-        const hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
-        const showLabel = Boolean(this.label) && !this.hideLabel;
-        const className = classNames("data-cell-stack", {
-            "data-cell-stack--has-cta": hasCta,
-        });
-        const labelId = showLabel ? `${this.headerId}-label` : undefined;
-        const descriptionId = this.description
-            ? `${this.headerId}-description`
-            : undefined;
-        return (h(Host, { key: 'b699f4036da82002d83aafcba421523936ec01cd' }, h("div", { key: 'a72785f24af710084dae83529406cea580fce841', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (h("header", { key: '583c5ae964fbb28b527fecf802bc0f7e5d3b2f22', class: "data-cell-stack__header", id: this.headerId }, h("div", { key: '8296166c92bf0039b7b59eb887f19feaa87dfd57', class: "data-cell-stack__header-content" }, showLabel && (h("h3", { key: 'befe65355c1e42714569955357c8db92672da70c', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (h("p", { key: '884f3e3ed32809dbe809464f2dd4f03b72b593ae', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (h("div", { key: '951b59742fab091af29357cbe095875364f8ec3a', class: "data-cell-stack__cta" }, h("slot", { key: '1be6442250d78bd59e52108486fbf7e862373ba5', name: "cta" }))))), h("div", { key: 'afa76e23b15515ee2844ae267d62ffa51f32c93f', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, h("slot", { key: '10fd21cd5d44004810c3d52c282698753f259bd5', onSlotchange: this.onSlotChange })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlDataCellStackCss; }
-}, [1, "swirl-data-cell-stack", {
-        "description": [1],
-        "hideLabel": [4, "hide-label"],
-        "label": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-data-cell-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-data-cell-stack":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlDataCellStack$1);
-            }
-            break;
-    } });
-}
-
-const SwirlDataCellStack = SwirlDataCellStack$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlDataCellStack, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as a,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{v as c}from"./v4.js";const r=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+c(),this.onSlotChange=e=>{e.target.assignedElements().filter((e=>"SWIRL-DATA-CELL"!==e.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const e=!!this.el.querySelector('[slot="cta"]'),a=!!this.label&&!this.hideLabel,l=d("data-cell-stack",{"data-cell-stack--has-cta":e}),c=a?this.headerId+"-label":void 0,r=this.description?this.headerId+"-description":void 0;return t(s,{key:"b699f4036da82002d83aafcba421523936ec01cd"},t("div",{key:"a72785f24af710084dae83529406cea580fce841",class:l,part:"data-cell-stack",role:"group"},(a||this.description||e)&&t("header",{key:"583c5ae964fbb28b527fecf802bc0f7e5d3b2f22",class:"data-cell-stack__header",id:this.headerId},t("div",{key:"8296166c92bf0039b7b59eb887f19feaa87dfd57",class:"data-cell-stack__header-content"},a&&t("h3",{key:"befe65355c1e42714569955357c8db92672da70c",class:"data-cell-stack__label",id:c},this.label),this.description&&t("p",{key:"884f3e3ed32809dbe809464f2dd4f03b72b593ae",class:"data-cell-stack__description",id:r},this.description)),e&&t("div",{key:"951b59742fab091af29357cbe095875364f8ec3a",class:"data-cell-stack__cta"},t("slot",{key:"1be6442250d78bd59e52108486fbf7e862373ba5",name:"cta"}))),t("div",{key:"afa76e23b15515ee2844ae267d62ffa51f32c93f",class:"data-cell-stack__cells",role:"list","aria-labelledby":c||void 0,"aria-describedby":r||void 0},t("slot",{key:"10fd21cd5d44004810c3d52c282698753f259bd5",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l)     var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)     var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}"}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),i=r,o=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((e=>{"swirl-data-cell-stack"===e&&(customElements.get(l(e))||customElements.define(l(e),r))}))};export{i as SwirlDataCellStack,o as defineCustomElement}

package/dist/components/swirl-data-cell.js

@@ -1,95 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-info2.js';
-import { d as defineCustomElement$3 } from './swirl-stack2.js';
-import { d as defineCustomElement$2 } from './swirl-tooltip2.js';
-import { v as v4 } from './v4.js';
-
-const swirlDataCellCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);background-color:var(--s-surface-raised-50-default);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--swirl-tag-background-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%}.data-cell__input ::slotted(swirl-form-control){--swirl-form-control-label-background-color:var(\n      --swirl-data-cell-input-background,\n      var(--s-surface-default)\n    )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}";
-
-const SwirlDataCell$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDataCell extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.intent = "default";
-        this.vertical = false;
-        this.elementId = `data-cell-${v4()}`;
-        this.handleRadioClick = (event) => {
-            const target = event.target;
-            const radio = this.el.querySelector('swirl-radio[slot="content"]');
-            const hasRadio = target.contains(radio);
-            if (hasRadio) {
-                const radioInput = radio?.querySelector('input[type="radio"]');
-                radioInput.click();
-            }
-        };
-        this.handleClick = (event) => {
-            this.handleRadioClick(event);
-            this.valueChange.emit(event);
-        };
-    }
-    render() {
-        const hasMedia = Boolean(this.el.querySelector('[slot="media"]'));
-        const hasSuffix = Boolean(this.el.querySelector('[slot="suffix"]'));
-        const hasLabel = Boolean(this.label);
-        const hasContent = Boolean(this.el.querySelector('[slot="content"]'));
-        const hasCheckbox = Boolean(this.el.querySelector('swirl-checkbox[slot="content"]'));
-        const hasRadio = Boolean(this.el.querySelector('swirl-radio[slot="content"]'));
-        const className = classNames("data-cell", {
-            "data-cell--vertical": this.vertical,
-            "data-cell--has-media": hasMedia,
-            "data-cell--has-suffix": hasSuffix,
-            "data-cell--has-content": hasContent,
-            "data-cell--no-label": !hasLabel,
-            "data-cell--interactive": hasCheckbox || hasRadio,
-            [`data-cell--intent-${this.intent}`]: this.intent,
-        });
-        const labelId = `${this.elementId}-label`;
-        const valueId = `${this.elementId}-value`;
-        const labelContent = (h("swirl-stack", { key: '50f07c51bcfe3e83c78bb6f179286dfe17aceeaf', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '04fafed59910699fcad92b6f5b672707e13c144e', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: 'e1e89d973b13d20f6232e806916d0b40048e42fe', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '91c40500d5b3887957f7ea7f933564ede5bb5499', size: 16, tabIndex: 0 })))));
-        return (h(Host, { key: '781582fc8949d5afa4c9caeb8b7f28eaf56ac7f2', role: "group" }, h("div", { key: 'c24a2767aa0d148c89e240ead4a8c664533b47b0', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: hasCheckbox || hasRadio ? "button" : undefined, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (h("div", { key: '9477f2dc6a775c8edcb2cec8fefab73d492e56d9', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: 'a9241bf20ad4bfdfb464d1dbd9b6dea6b45f27a9', name: "media" }))), h("div", { key: 'd9a730c16edf962966f54f3eea645397e3920cb5', class: "data-cell__content" }, hasLabel && (h("div", { key: '8d32d2b51041f3f18ea2d30f4dcdbbe0424a48ed', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: '08af41680b17a5e86e8ab1657371a0720a65662e', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '039aeea6e36d0a0e553a3eaca3379fdfee76bc9f', class: "data-cell__suffix" }, h("slot", { key: 'e097a14cb98397094ec402947c7efd377776a4fc', name: "suffix" }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlDataCellCss; }
-}, [1, "swirl-data-cell", {
-        "intent": [1],
-        "label": [1],
-        "tooltip": [1],
-        "value": [1],
-        "vertical": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-data-cell", "swirl-icon-info", "swirl-stack", "swirl-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-data-cell":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlDataCell$1);
-            }
-            break;
-        case "swirl-icon-info":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlDataCell = SwirlDataCell$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlDataCell, defineCustomElement };
+import{proxyCustomElement as a,HTMLElement as e,createEvent as l,h as t,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c}from"./index2.js";import{d as r}from"./swirl-icon-info2.js";import{d}from"./swirl-stack2.js";import{d as o}from"./swirl-tooltip2.js";import{v as n}from"./v4.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.valueChange=l(this,"valueChange",7),this.intent="default",this.vertical=!1,this.elementId="data-cell-"+n(),this.handleRadioClick=a=>{const e=a.target,l=this.el.querySelector('swirl-radio[slot="content"]');if(e.contains(l)){const a=l?.querySelector('input[type="radio"]');a.click()}},this.handleClick=a=>{this.handleRadioClick(a),this.valueChange.emit(a)}}render(){const a=!!this.el.querySelector('[slot="media"]'),e=!!this.el.querySelector('[slot="suffix"]'),l=!!this.label,s=!!this.el.querySelector('[slot="content"]'),r=!!this.el.querySelector('swirl-checkbox[slot="content"]'),d=!!this.el.querySelector('swirl-radio[slot="content"]'),o=c("data-cell",{"data-cell--vertical":this.vertical,"data-cell--has-media":a,"data-cell--has-suffix":e,"data-cell--has-content":s,"data-cell--no-label":!l,"data-cell--interactive":r||d,["data-cell--intent-"+this.intent]:this.intent}),n=this.elementId+"-label",f=this.elementId+"-value",u=t("swirl-stack",{key:"50f07c51bcfe3e83c78bb6f179286dfe17aceeaf",orientation:"horizontal",align:"center",spacing:"4"},t("span",{key:"04fafed59910699fcad92b6f5b672707e13c144e",class:"data-cell__label",id:n,role:"term"},this.label),this.tooltip&&t("swirl-tooltip",{key:"e1e89d973b13d20f6232e806916d0b40048e42fe",class:"data-cell__tooltip",content:this.tooltip,position:"right"},t("swirl-icon-info",{key:"91c40500d5b3887957f7ea7f933564ede5bb5499",size:16,tabIndex:0})));return t(i,{key:"781582fc8949d5afa4c9caeb8b7f28eaf56ac7f2",role:"group"},t("div",{key:"c24a2767aa0d148c89e240ead4a8c664533b47b0",class:o,part:"data-cell",onClick:r||d?this.handleClick:void 0,role:r||d?"button":void 0,tabIndex:r||d?0:void 0},a&&t("div",{key:"9477f2dc6a775c8edcb2cec8fefab73d492e56d9",class:"data-cell__media","aria-hidden":"true"},t("slot",{key:"a9241bf20ad4bfdfb464d1dbd9b6dea6b45f27a9",name:"media"})),t("div",{key:"d9a730c16edf962966f54f3eea645397e3920cb5",class:"data-cell__content"},l&&t("div",{key:"8d32d2b51041f3f18ea2d30f4dcdbbe0424a48ed",class:"data-cell__label-wrapper"},u),(s||this.value||e)&&t("div",{key:"08af41680b17a5e86e8ab1657371a0720a65662e",class:"data-cell__value-wrapper",role:"definition","aria-labelledby":l?n:void 0,id:f},s?t("div",{class:"data-cell__input"},t("slot",{name:"content"})):this.value&&t("div",{class:"data-cell__value"},this.value))),e&&t("div",{key:"039aeea6e36d0a0e553a3eaca3379fdfee76bc9f",class:"data-cell__suffix"},t("slot",{key:"e097a14cb98397094ec402947c7efd377776a4fc",name:"suffix"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);background-color:var(--s-surface-raised-50-default);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--swirl-tag-background-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%}.data-cell__input ::slotted(swirl-form-control){--swirl-form-control-label-background-color:var(       --swirl-data-cell-input-background,       var(--s-surface-default)     )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}"}},[257,"swirl-data-cell",{intent:[1],label:[1],tooltip:[1],value:[1],vertical:[4]}]),u=f,b=function(){"undefined"!=typeof customElements&&["swirl-data-cell","swirl-icon-info","swirl-stack","swirl-tooltip"].forEach((a=>{switch(a){case"swirl-data-cell":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-icon-info":customElements.get(s(a))||r();break;case"swirl-stack":customElements.get(s(a))||d();break;case"swirl-tooltip":customElements.get(s(a))||o()}}))};export{u as SwirlDataCell,b as defineCustomElement}