@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

package/dist/docs/grid/index.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import "./index.stories.css";
+export default {
+    title: "Grid",
+    tags: ["!autodocs"],
+};
+export const Grid = {
+    render: () => html `
+    <div class="grid-story body-1">
+      <p>This story highlights z-grid column responsive CSS classes from albe-design-tokens grid system.</p>
+      <p>Changing the viewport size will change the grid layout.</p>
+      <p>Try changing viewport size using Storybook preview tool on Canvas tab.</p>
+      <div class="container">
+        <h3>Responsive columns</h3>
+        <div class="z-grid">
+          <div class="wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2">
+            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2
+          </div>
+          <div class="ghost-grid z-grid">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/docs/grid/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/grid/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCjB;CACF,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Grid\",\n  tags: [\"!autodocs\"],\n};\n\nexport const Grid = {\n  render: () => html`\n    <div class=\"grid-story body-1\">\n      <p>This story highlights z-grid column responsive CSS classes from albe-design-tokens grid system.</p>\n      <p>Changing the viewport size will change the grid layout.</p>\n      <p>Try changing viewport size using Storybook preview tool on Canvas tab.</p>\n      <div class=\"container\">\n        <h3>Responsive columns</h3>\n        <div class=\"z-grid\">\n          <div class=\"wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-6 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\">\n            wide-col-4 desktop-col-4 tablet-col-3 mobile-col-2\n          </div>\n          <div class=\"ghost-grid z-grid\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n};\n"]}

package/dist/docs/iconset/index.stories.js

@@ -0,0 +1,32 @@
+import { html } from "lit";
+import "../../src/components/z-accordion/index";
+import "../../src/components/z-icon/index";
+import { BUTTON_ICONS, FILLED_ICONS, LEGACY_ICONS, STROKE_ICONS } from "../../src/constants/iconset";
+import "./index.stories.css";
+export default {
+    title: "Iconset",
+    tags: ["!autodocs"],
+};
+export const Iconset = {
+    render: () => html `<div class="icons-list">
+      ${[STROKE_ICONS, FILLED_ICONS, BUTTON_ICONS, LEGACY_ICONS].map((iconsGroup, index) => html ` <z-accordion
+            open
+            shadow
+            highlight=${true}
+            variant="background"
+            label="${["Stroke icons", "Filled icons", "Button icons", "Legacy icon names"][index]} - (${Object.keys(iconsGroup).length})"
+          >
+            <ol class="icons-container">
+              ${Object.keys(iconsGroup)
+        .sort()
+        .map((iconName) => html `
+                    <li class="icon-box">
+                      <z-icon name=${iconName}></z-icon>
+                      <div class="icon-name">${iconName}</div>
+                    </li>
+                  `)}
+            </ol>
+          </z-accordion>`)}
+    </div>`,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/docs/iconset/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/iconset/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,wCAAwC,CAAC;AAChD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAC,MAAM,6BAA6B,CAAC;AACnG,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,CAAC,WAAW,CAAC;CACL,CAAC;AAEjB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;QACA,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,GAAG,CAC5D,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CACpB,IAAI,CAAA;;;wBAGU,IAAI;;qBAEP,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC,KAAK,CAAC,OAAO,MAAM,CAAC,IAAI,CACrG,UAAU,CACX,CAAC,MAAM;;;gBAGJ,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;SACtB,IAAI,EAAE;SACN,GAAG,CACF,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;;qCAEC,QAAQ;+CACE,QAAQ;;mBAEpC,CACF;;yBAEQ,CAClB;WACI;CACS,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"../../src/components/z-accordion/index\";\nimport \"../../src/components/z-icon/index\";\nimport {BUTTON_ICONS, FILLED_ICONS, LEGACY_ICONS, STROKE_ICONS} from \"../../src/constants/iconset\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Iconset\",\n  tags: [\"!autodocs\"],\n} satisfies Meta;\n\nexport const Iconset = {\n  render: () =>\n    html`<div class=\"icons-list\">\n      ${[STROKE_ICONS, FILLED_ICONS, BUTTON_ICONS, LEGACY_ICONS].map(\n        (iconsGroup, index) =>\n          html` <z-accordion\n            open\n            shadow\n            highlight=${true}\n            variant=\"background\"\n            label=\"${[\"Stroke icons\", \"Filled icons\", \"Button icons\", \"Legacy icon names\"][index]} - (${Object.keys(\n              iconsGroup\n            ).length})\"\n          >\n            <ol class=\"icons-container\">\n              ${Object.keys(iconsGroup)\n                .sort()\n                .map(\n                  (iconName) => html`\n                    <li class=\"icon-box\">\n                      <z-icon name=${iconName}></z-icon>\n                      <div class=\"icon-name\">${iconName}</div>\n                    </li>\n                  `\n                )}\n            </ol>\n          </z-accordion>`\n      )}\n    </div>`,\n} satisfies StoryObj;\n"]}

package/dist/docs/themes/index.stories.js

@@ -0,0 +1,87 @@
+import { html } from "lit";
+import "../../src/components/z-section-title/index";
+import { getPalettes, getThemesColorTokens } from "../../src/utils/storybook-utils";
+import "./index.stories.css";
+export default {
+    title: "Colors",
+    argTypes: {
+        theme: {
+            control: {
+                type: "inline-radio",
+            },
+            options: ["default", "theme-black-yellow", "theme-dark"],
+        },
+    },
+    args: {
+        theme: "default",
+    },
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["!autodocs"],
+};
+export const Themes = {
+    render: (args) => html `
+    <div class="colors-story themes ${args.theme}">
+      <p>
+        Currently available color themes: <strong>default</strong>, <strong>black-yellow</strong>, <strong>dark</strong>
+      </p>
+      <p>On this page you can see the value of the color tokens for each theme, by switching it from the controls.</p>
+      <div class="tokens-container">
+        <z-section-title divider-position="after">
+          <div slot="primary-title">Color tokens</div>
+        </z-section-title>
+        <ul>
+          ${getThemesColorTokens()
+        .sort()
+        .map((token) => html `
+                <li>
+                  <span class="token-name">${token}</span>
+                  <div class="color">
+                    <div
+                      class="color-box"
+                      style="background-color: var(${token})"
+                    ></div>
+                    <div class="interactive-2">
+                      ${getComputedStyle(document.documentElement).getPropertyValue(token)}
+                    </div>
+                  </div>
+                </li>
+              `)}
+        </ul>
+      </div>
+    </div>
+  `,
+};
+const palettes = getPalettes();
+export const Palettes = {
+    render: () => html `
+    <div class="colors-story palettes">
+      ${Object.keys(palettes).map((paletteName) => html `<div class="tokens-container">
+            <z-section-title
+              divider-position="after"
+              style="--z-section-title--divider-color: var(${palettes[paletteName].find((token) => token.includes("500"))})"
+            >
+              <div slot="primary-title">${paletteName}</div>
+            </z-section-title>
+            <ul>
+              ${palettes[paletteName].map((token) => html `
+                  <li>
+                    <span class="token-name">${token}</span>
+                    <div class="color">
+                      <div
+                        class="color-box"
+                        style="background-color: var(${token})"
+                      ></div>
+                      <div class="interactive-2">
+                        ${getComputedStyle(document.documentElement).getPropertyValue(token)}
+                      </div>
+                    </div>
+                  </li>
+                `)}
+            </ul>
+          </div>`)}
+    </div>
+  `,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/docs/themes/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../docs/themes/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,4CAA4C,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AAClF,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,oBAAoB,EAAE,YAAY,CAAC;SACzD;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;KACjB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE,CAAC,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;sCACc,IAAI,CAAC,KAAK;;;;;;;;;;YAUpC,oBAAoB,EAAE;SACrB,IAAI,EAAE;SACN,GAAG,CACF,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;6CAEgB,KAAK;;;;qDAIG,KAAK;;;wBAGlC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;eAI3E,CACF;;;;GAIV;CACiB,CAAC;AAErB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;QAEZ,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CACzB,CAAC,WAAW,EAAE,EAAE,CACd,IAAI,CAAA;;;6DAG+C,QAAQ,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAClF,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CACtB;;0CAE2B,WAAW;;;gBAGrC,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CACzB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+CAEgB,KAAK;;;;uDAIG,KAAK;;;0BAGlC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;;;;iBAI3E,CACF;;iBAEE,CACV;;GAEJ;CACiB,CAAC","sourcesContent":["import {StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport \"../../src/components/z-section-title/index\";\nimport {getPalettes, getThemesColorTokens} from \"../../src/utils/storybook-utils\";\nimport \"./index.stories.css\";\n\nexport default {\n  title: \"Colors\",\n  argTypes: {\n    theme: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: [\"default\", \"theme-black-yellow\", \"theme-dark\"],\n    },\n  },\n  args: {\n    theme: \"default\",\n  },\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  tags: [\"!autodocs\"],\n};\n\nexport const Themes = {\n  render: (args) => html`\n    <div class=\"colors-story themes ${args.theme}\">\n      <p>\n        Currently available color themes: <strong>default</strong>, <strong>black-yellow</strong>, <strong>dark</strong>\n      </p>\n      <p>On this page you can see the value of the color tokens for each theme, by switching it from the controls.</p>\n      <div class=\"tokens-container\">\n        <z-section-title divider-position=\"after\">\n          <div slot=\"primary-title\">Color tokens</div>\n        </z-section-title>\n        <ul>\n          ${getThemesColorTokens()\n            .sort()\n            .map(\n              (token) => html`\n                <li>\n                  <span class=\"token-name\">${token}</span>\n                  <div class=\"color\">\n                    <div\n                      class=\"color-box\"\n                      style=\"background-color: var(${token})\"\n                    ></div>\n                    <div class=\"interactive-2\">\n                      ${getComputedStyle(document.documentElement).getPropertyValue(token)}\n                    </div>\n                  </div>\n                </li>\n              `\n            )}\n        </ul>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj;\n\nconst palettes = getPalettes();\n\nexport const Palettes = {\n  render: () => html`\n    <div class=\"colors-story palettes\">\n      ${Object.keys(palettes).map(\n        (paletteName) =>\n          html`<div class=\"tokens-container\">\n            <z-section-title\n              divider-position=\"after\"\n              style=\"--z-section-title--divider-color: var(${palettes[paletteName].find((token) =>\n                token.includes(\"500\")\n              )})\"\n            >\n              <div slot=\"primary-title\">${paletteName}</div>\n            </z-section-title>\n            <ul>\n              ${palettes[paletteName].map(\n                (token) => html`\n                  <li>\n                    <span class=\"token-name\">${token}</span>\n                    <div class=\"color\">\n                      <div\n                        class=\"color-box\"\n                        style=\"background-color: var(${token})\"\n                      ></div>\n                      <div class=\"interactive-2\">\n                        ${getComputedStyle(document.documentElement).getPropertyValue(token)}\n                      </div>\n                    </div>\n                  </li>\n                `\n              )}\n            </ul>\n          </div>`\n      )}\n    </div>\n  `,\n} satisfies StoryObj;\n"]}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,5 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };
+
+//# sourceMappingURL=app-globals-0f993ce5.js.map

package/dist/esm/app-globals-0f993ce5.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-0f993ce5.js","mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}

package/dist/esm/breakpoints-680e0e56.js.map

@@ -1 +1 @@
-{"file":"breakpoints-680e0e56.js","mappings":"MAAM,gBAAgB,GAAG,IAAI;MACvB,gBAAgB,GAAG,KAAK;MACxB,iBAAiB,GAAG;;;;","names":[],"sources":["src/constants/breakpoints.ts"],"sourcesContent":["const mobileBreakpoint = 767;\nconst tabletBreakpoint = 1052;\nconst desktopBreakpoint = 1365;\n\nexport {mobileBreakpoint, tabletBreakpoint, desktopBreakpoint};\n"],"version":3}
+{"file":"breakpoints-680e0e56.js","mappings":"MAAM,gBAAgB,GAAG,IAAI;MACvB,gBAAgB,GAAG,KAAK;MACxB,iBAAiB,GAAG;;;;","names":[],"sources":["src/constants/breakpoints.ts"],"sourcesContent":["const mobileBreakpoint = 767;\nconst tabletBreakpoint = 1052;\nconst desktopBreakpoint = 1365;\n\nexport {desktopBreakpoint, mobileBreakpoint, tabletBreakpoint};\n"],"version":3}

package/dist/esm/index-2f0ea8a1.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-ab5f1eaa.js';
+import { r as randomId } from './utils-7983d02c.js';
+import './index-e194f4a7.js';
+import './index-db930fad.js';
+
+const stylesCss = ":host{--columns:1;display:grid;min-width:max-content;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
+const ZTrStyle0 = stylesCss;
+
+const ZTr = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.expand = createEvent(this, "expand", 7);
+        this.expandable = false;
+        this.expanded = false;
+        this.expandableContentId = undefined;
+    }
+    updateColumns() {
+        const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
+        if (this.expandable) {
+            cells.pop();
+        }
+        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+        this.host.style.setProperty("--columns", `${columns}`);
+        if (this.expandable) {
+            const expandableContent = cells.pop();
+            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
+            this.expandableContentId = expandableContent.id;
+        }
+    }
+    /**
+     * Handle click on row.
+     * Skip expansion if the click is on a element with `prevent-expand` css class.
+     */
+    onRowClick(event) {
+        const preventExpand = event.target.closest(".prevent-expand");
+        if (!this.expandable || preventExpand) {
+            return;
+        }
+        this.expanded = !this.expanded;
+        this.expand.emit({ expanded: this.expanded });
+    }
+    componentWillLoad() {
+        this.updateColumns();
+    }
+    render() {
+        return (h(Host, { key: 'a7834f72abcf18e74ff16ff9dbbcb4e987f673df', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'badaec159c7abf449da9c7015fb2fa240ce14377', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '6e312e5e8f907d05968b636f6368cda6397214eb', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'e054cb205c4a81e1e88509300976133c21f27d0f', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '95b75f93a1c27d6245e8993dcdfeef3f614c1843', onSlotchange: this.updateColumns.bind(this) })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "expandable": ["updateColumns"]
+    }; }
+};
+ZTr.style = ZTrStyle0;
+
+export { ZTr as Z };
+
+//# sourceMappingURL=index-2f0ea8a1.js.map

package/dist/esm/index-2f0ea8a1.js.map

@@ -0,0 +1 @@
+{"file":"index-2f0ea8a1.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ykDAAykD,CAAC;AAC5lD,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n  /* number of columns of the row. will be set in component's ts code */\n  --columns: 1;\n\n  display: grid;\n  min-width: max-content;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n  border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n  --show-expandable-button: visible;\n\n  cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n  grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n  border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n  border-left: 0;\n  grid-column: 1 / span calc(var(--columns) + 1);\n  grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n  display: none;\n}\n\n:host([expanded]) {\n  margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n  box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n  background-color: var(--color-surface02);\n}\n\n.z-tr--expand-button-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: auto;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        onClick={this.onRowClick.bind(this)}\n        expanded={this.expanded}\n      >\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/index-41ee4016.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, a as Host } from './index-ab5f1eaa.js';
+
+const stylesCss = ":host{display:block;box-sizing:border-box}";
+const ZTbodyStyle0 = stylesCss;
+
+const ZTbody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '82690ddf3bdd8b742cadcf45a75778892d15c5bf', role: "rowgroup" }, h("slot", { key: '6b1a45b35318f6df0966ee67aa60f33aa32c5751' })));
+    }
+};
+ZTbody.style = ZTbodyStyle0;
+
+export { ZTbody as Z };
+
+//# sourceMappingURL=index-41ee4016.js.map

package/dist/esm/index-41ee4016.js.map

@@ -0,0 +1 @@
+{"file":"index-41ee4016.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4CAA4C,CAAC;AAC/D,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACnB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}