npm - @zanichelli/albe-web-components - Versions diffs - 16.3.0-rc1 → 16.3.1 - Mend

@zanichelli/albe-web-components 16.3.0-rc1 → 16.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1111) hide show

package/www/index.html CHANGED Viewed

@@ -1 +1,3 @@
-<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-0cd14493.css"> <link rel="modulepreload" href="/build/p-db1c4375.js"><link rel="modulepreload" href="/build/p-2c184714.js"><link rel="modulepreload" href="/build/p-2c886e8b.js"><link rel="modulepreload" href="/build/p-6037cdf3.js"><link rel="modulepreload" href="/build/p-cfa39bd3.js"><script type="module" src="/build/p-db1c4375.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> </body></html>
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-ae0a33a2.css"> <link rel="modulepreload" href="/build/p-ae5cec65.js"><link rel="modulepreload" href="/build/p-5145a606.js"><link rel="modulepreload" href="/build/p-6037cdf3.js"><link rel="modulepreload" href="/build/p-67e5e8ed.js"><link rel="modulepreload" href="/build/p-75c4a726.js"><script type="module" src="/build/p-ae5cec65.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> <style>body {
+      margin: 0;
+    }</style> </body></html>

package/dist/.storybook/elements/args-controls.js DELETED Viewed

@@ -1,78 +0,0 @@
-/** @jsx React.createElement */
-/** @jsxFrag React.Fragment */
-import { PureArgsTable } from "@storybook/blocks";
-import { Badge, Spaced } from "@storybook/components";
-import { includeConditionalArg } from "@storybook/csf";
-import { useArgTypes, useArgs, useGlobals, useParameter, useStorybookState } from "@storybook/manager-api";
-import { styled } from "@storybook/theming";
-import React, { useEffect, useState } from "react";
-export const ADDON_ID = "args-controls";
-export const PARAM_KEY = "addon-args-controls";
-/**
- * Filter argTypes to only include those listed in the story args.
- */
-const getFilteredArgTypes = () => {
-    const argTypes = useArgTypes();
-    const args = useArgs()[0];
-    return Object.entries(argTypes).reduce((acc, [key, argType]) => {
-        var _a, _b, _c;
-        if (key in args) {
-            if (argType.table && !argType.table.category) {
-                // set a category for the "auxiliary" args that are not part of the component but are used for demo purposes
-                argType.table.category = "Story controls";
-            }
-            if (((_a = argType.table) === null || _a === void 0 ? void 0 : _a.category) === "css custom properties" && ((_b = argType.control) === null || _b === void 0 ? void 0 : _b["type"]) === "object") {
-                // fix control type for css custom properties. set text instead of the `object` automatically inferred by storybook
-                argType.control = Object.assign((_c = argType.control) !== null && _c !== void 0 ? _c : {}, { type: "text" });
-            }
-            acc[key] = argType;
-        }
-        return acc;
-    }, {});
-};
-/**
- * Custom title for the panel. Include controls count badge.
- */
-export const ArgsControlsTitle = (() => {
-    const args = getFilteredArgTypes();
-    // TODO: sometimes the controlsCount is not accurate, because the ArgsTable use different condition to filter the args, especially when the args are conditional
-    const controlsCount = Object.values(args).filter((arg) => { var _a; return (arg === null || arg === void 0 ? void 0 : arg.control) && !((_a = arg.table) === null || _a === void 0 ? void 0 : _a.disable) && includeConditionalArg(arg, args, {}); }).length;
-    return (React.createElement("div", null, React.createElement(Spaced, { col: 1 }, React.createElement("span", { style: { display: "inline-block", verticalAlign: "middle" } }, "Controls"), controlsCount === 0 ? "" : React.createElement(Badge, { status: "neutral" }, controlsCount))));
-});
-const AddonWrapper = styled.div({
-    display: "grid",
-    gridTemplateRows: "1fr 39px",
-    height: "100%",
-    maxHeight: "100vh",
-    overflowY: "auto",
-});
-/**
- * Custom controls panel that only shows controls for the args of the current Story.
- */
-export const ArgsControls = (() => {
-    const [isLoading, setIsLoading] = useState(true);
-    const [args, updateArgs, resetArgs] = useArgs();
-    const [globals] = useGlobals();
-    const { expanded, sort, presetColors } = useParameter("args-controls", {});
-    const { path, previewInitialized } = useStorybookState();
-    const rows = getFilteredArgTypes();
-    // If the story is prepared, then show the controls table
-    // and reset the loading states
-    useEffect(() => {
-        if (previewInitialized) {
-            setIsLoading(false);
-        }
-    }, [previewInitialized]);
-    const hasControls = Object.values(rows).some((arg) => arg === null || arg === void 0 ? void 0 : arg.control);
-    const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
-        const control = arg === null || arg === void 0 ? void 0 : arg.control;
-        if (typeof control !== "object" || (control === null || control === void 0 ? void 0 : control.type) !== "color" || (control === null || control === void 0 ? void 0 : control.presetColors)) {
-            acc[key] = arg;
-        }
-        else
-            acc[key] = Object.assign(Object.assign({}, arg), { control: Object.assign(Object.assign({}, control), { presetColors }) });
-        return acc;
-    }, {});
-    return (React.createElement(AddonWrapper, null, React.createElement(PureArgsTable, { key: path, compact: !expanded && hasControls, rows: withPresetColors, args: args, globals: globals, updateArgs: updateArgs, resetArgs: resetArgs, inAddonPanel: true, sort: sort, isLoading: isLoading })));
-});
-//# sourceMappingURL=args-controls.js.map

package/dist/.storybook/elements/args-controls.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"args-controls.js","sourceRoot":"","sources":["../../../.storybook/elements/args-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx React.createElement */\n/** @jsxFrag React.Fragment */\n\nimport {PresetColor, PureArgsTable, SortType} from \"@storybook/blocks\";\nimport {Badge, Spaced} from \"@storybook/components\";\nimport {includeConditionalArg} from \"@storybook/csf\";\nimport {useArgTypes, useArgs, useGlobals, useParameter, useStorybookState} from \"@storybook/manager-api\";\nimport {styled} from \"@storybook/theming\";\nimport {type ArgTypes} from \"@storybook/web-components\";\nimport React, {useEffect, useState} from \"react\";\n\nexport const ADDON_ID = \"args-controls\";\nexport const PARAM_KEY = \"addon-args-controls\";\n\ninterface ControlsParameters {\n sort?: SortType;\n expanded?: boolean;\n presetColors?: PresetColor[];\n}\n\n/**\n * Filter argTypes to only include those listed in the story args.\n */\nconst getFilteredArgTypes = () => {\n const argTypes = useArgTypes();\n const args = useArgs()[0];\n\n return Object.entries(argTypes).reduce((acc, [key, argType]) => {\n if (key in args) {\n if (argType.table && !argType.table.category) {\n // set a category for the \"auxiliary\" args that are not part of the component but are used for demo purposes\n argType.table.category = \"Story controls\";\n }\n\n if (argType.table?.category === \"css custom properties\" && argType.control?.[\"type\"] === \"object\") {\n // fix control type for css custom properties. set text instead of the `object` automatically inferred by storybook\n argType.control = Object.assign(argType.control ?? {}, {type: \"text\"});\n }\n acc[key] = argType;\n }\n\n return acc;\n }, {} as ArgTypes);\n};\n\n/**\n * Custom title for the panel. Include controls count badge.\n */\nexport const ArgsControlsTitle = (() => {\n const args = getFilteredArgTypes();\n // TODO: sometimes the controlsCount is not accurate, because the ArgsTable use different condition to filter the args, especially when the args are conditional\n const controlsCount = Object.values(args).filter(\n (arg) => arg?.control && !arg.table?.disable && includeConditionalArg(arg, args, {})\n ).length;\n\n return (\n <div>\n <Spaced col={1}>\n <span style={{display: \"inline-block\", verticalAlign: \"middle\"}}>Controls</span>\n {controlsCount === 0 ? \"\" : <Badge status=\"neutral\">{controlsCount}</Badge>}\n </Spaced>\n </div>\n );\n}) satisfies React.FC;\n\nconst AddonWrapper = styled.div({\n display: \"grid\",\n gridTemplateRows: \"1fr 39px\",\n height: \"100%\",\n maxHeight: \"100vh\",\n overflowY: \"auto\",\n});\n\n/**\n * Custom controls panel that only shows controls for the args of the current Story.\n */\nexport const ArgsControls = (() => {\n const [isLoading, setIsLoading] = useState(true);\n const [args, updateArgs, resetArgs] = useArgs();\n const [globals] = useGlobals();\n const {expanded, sort, presetColors} = useParameter<ControlsParameters>(\"args-controls\", {});\n const {path, previewInitialized} = useStorybookState();\n const rows = getFilteredArgTypes();\n\n // If the story is prepared, then show the controls table\n // and reset the loading states\n useEffect(() => {\n if (previewInitialized) {\n setIsLoading(false);\n }\n }, [previewInitialized]);\n\n const hasControls = Object.values(rows).some((arg) => arg?.control);\n\n const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {\n const control = arg?.control;\n if (typeof control !== \"object\" || control?.type !== \"color\" || control?.presetColors) {\n acc[key] = arg;\n } else acc[key] = {...arg, control: {...control, presetColors}};\n\n return acc;\n }, {} as ArgTypes);\n\n return (\n <AddonWrapper>\n <PureArgsTable\n key={path} // resets state when switching stories\n compact={!expanded && hasControls}\n rows={withPresetColors}\n args={args}\n globals={globals}\n updateArgs={updateArgs}\n resetArgs={resetArgs}\n inAddonPanel\n sort={sort}\n isLoading={isLoading}\n />\n </AddonWrapper>\n );\n}) satisfies React.FC;\n"]}

package/dist/.storybook/elements/docs-template.js DELETED Viewed

@@ -1,11 +0,0 @@
-/** @jsx React.createElement */
-/** @jsxFrag React.Fragment */
-import { ArgTypes, Description, Meta, Stories, Title, useOf } from "@storybook/blocks";
-import * as React from "react";
-export default (() => {
-    const resolvedOf = useOf("meta", ["meta"]);
-    const { meta, moduleExports } = resolvedOf.csfFile;
-    const component = meta.component;
-    return (React.createElement(React.Fragment, null, React.createElement(Meta, { of: moduleExports || {} }), React.createElement(Title, null), React.createElement(Description, { of: moduleExports || {} }), React.createElement(Stories, null), React.createElement(ArgTypes, { of: component || "" })));
-});
-//# sourceMappingURL=docs-template.js.map

package/dist/.storybook/elements/docs-template.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"docs-template.js","sourceRoot":"","sources":["../../../.storybook/elements/docs-template.tsx"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,8BAA8B;AAE9B,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACrF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAe,CAAC,GAAG,EAAE;IACnB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C,MAAM,EAAC,IAAI,EAAE,aAAa,EAAC,GAAG,UAAU,CAAC,OAAO,CAAC;IACjD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IAEjC,OAAO,CACL;QACE,oBAAC,IAAI,IAAC,EAAE,EAAE,aAAa,IAAI,EAAE,GAAI;QACjC,oBAAC,KAAK,OAAG;QACT,oBAAC,WAAW,IAAC,EAAE,EAAE,aAAa,IAAI,EAAE,GAAI;QACxC,oBAAC,OAAO,OAAG;QACX,oBAAC,QAAQ,IAAC,EAAE,EAAE,SAAS,IAAI,EAAE,GAAI,CAChC,CACJ,CAAC;AACJ,CAAC,CAAa,CAAC","sourcesContent":["/** @jsx React.createElement */\n/** @jsxFrag React.Fragment */\n\nimport {ArgTypes, Description, Meta, Stories, Title, useOf} from \"@storybook/blocks\";\nimport * as React from \"react\";\n\nexport default (() => {\n const resolvedOf = useOf(\"meta\", [\"meta\"]);\n const {meta, moduleExports} = resolvedOf.csfFile;\n const component = meta.component;\n\n return (\n <>\n <Meta of={moduleExports || {}} />\n <Title />\n <Description of={moduleExports || {}} />\n <Stories />\n <ArgTypes of={component || \"\"} />\n </>\n );\n}) as React.FC;\n"]}

package/dist/cjs/breakpoints-5c22092a.js DELETED Viewed

@@ -1,11 +0,0 @@
-'use strict';
-const mobileBreakpoint = 767;
-const tabletBreakpoint = 1052;
-const desktopBreakpoint = 1365;
-exports.desktopBreakpoint = desktopBreakpoint;
-exports.mobileBreakpoint = mobileBreakpoint;
-exports.tabletBreakpoint = tabletBreakpoint;
-//# sourceMappingURL=breakpoints-5c22092a.js.map

package/dist/cjs/breakpoints-5c22092a.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"breakpoints-5c22092a.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/cjs/index-6994b9af.js DELETED Viewed

@@ -1,75 +0,0 @@
-'use strict';
-const index = require('./index-e801ae96.js');
-const index$1 = require('./index-bab7a651.js');
-const stylesCss = ":host{position:relative;display:flex;max-width:100%;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}.cell--content-container{display:flex;width:100%;height:100%;align-items:center}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}:host{z-index:1;box-sizing:border-box;padding:0;background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sticky]){background-color:var(--color-surface02)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:none}:host(:hover) .z-th--sort-button,:host .sort-active{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th-content-container{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between}:host>.zth-body{display:flex;width:100%;height:100%;box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) * 2)}.zth-body:focus{border:2px solid var(--blue800);outline:none}";
-const ZThStyle0 = stylesCss;
-const ZTh = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.sort = index.createEvent(this, "sort", 7);
-        this.colspan = undefined;
-        this.showMenu = null;
-        this.showSorting = null;
-        this.sticky = false;
-        this.sortDirection = undefined;
-        this.popoverPosition = index$1.PopoverPosition.AUTO;
-        this.isMenuOpen = false;
-    }
-    /**
-     * Get the value to set to the `aria-sort` attribute based on the current sort direction.
-     */
-    get ariaSortDirection() {
-        if (!this.sortDirection) {
-            return null;
-        }
-        return this.sortDirection === index$1.SortDirection.ASC ? "ascending" : "descending";
-    }
-    /**
-     * Handle the click on the sort button.
-     * This method will also handle the z-index logic.
-     * @fires sort
-     */
-    handleSort() {
-        if (!this.sortDirection) {
-            return;
-        }
-        this.sortDirection = this.sortDirection === index$1.SortDirection.ASC ? index$1.SortDirection.DESC : index$1.SortDirection.ASC;
-        this.sort.emit({ sortDirection: this.sortDirection });
-        const row = this.host.parentElement;
-        if (row) {
-            const zThElements = Array.from(row.querySelectorAll("z-th"));
-            zThElements.forEach((th) => (th.style.zIndex = "1"));
-        }
-        this.host.style.zIndex = "2";
-    }
-    updateColspan() {
-        if (this.colspan) {
-            this.host.style.gridColumn = `span ${this.colspan}`;
-        }
-        else {
-            this.host.style.removeProperty("grid-column");
-        }
-    }
-    componentWillLoad() {
-        this.updateColspan();
-    }
-    render() {
-        return (index.h(index.Host, { key: '660ca313ef9c4f960f44e39d388ee68383aa0014', tabIndex: "0", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, index.h("div", { key: 'd9632f0eb358056fe457d4a7e0850573ed302e1e', tabIndex: 1, class: "zth-body", onClick: () => {
-                if (this.showSorting) {
-                    this.handleSort();
-                }
-            } }, index.h("div", { key: '30f60a7650a81da5a54406169e2f837b20ce0192', class: "z-th-content-container" }, index.h("slot", { key: 'f1627b5eddc86e537b246b6c5b49f8e84d6df93e' }), this.showSorting && (index.h("button", { key: '16c4514224423893aa4c433464af81669ab1d8d6', class: { "z-th--sort-button": true, "sort-active": this.showSorting === index$1.VisibilityCondition.ALWAYS }, type: "button", onClick: this.handleSort.bind(this) }, index.h("z-icon", { key: '362508e690d2772ec2683e37e015faada3e6c8b7', name: this.sortDirection === index$1.SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (index.h("div", { key: '8cea76eff8e0a693ca7edcffbf236434bfd62ec0', class: "cell--menu-container" }, index.h("z-button", { key: 'f8eb6c03f1f247c34854dad68ee2528df0315076', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), index.h("z-popover", { key: '2e0fa31ad07bea35043f229429dccc1e1cb692d9', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: 'f4587b5003987af9498bcf99ac126e63e8c86ba3', name: "contextual-menu" }))))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-};
-ZTh.style = ZThStyle0;
-exports.ZTh = ZTh;
-//# sourceMappingURL=index-6994b9af.js.map

package/dist/cjs/index-6994b9af.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-6994b9af.js","mappings":"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","names":["PopoverPosition","SortDirection","h","Host","VisibilityCondition","ButtonVariant","ControlSize"],"sources":["src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n\n:host {\n z-index: 1;\n box-sizing: border-box;\n padding: 0;\n background-color: var(--color-surface02);\n font-weight: var(--font-sb);\n}\n\n:host([sticky]) {\n background-color: var(--color-surface02);\n}\n\n:host([sortable]) {\n cursor: pointer;\n}\n\n.z-th--sort-button {\n display: none;\n}\n\n:host(:hover) .z-th--sort-button,\n:host .sort-active {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin-top: auto;\n background-color: transparent;\n cursor: pointer;\n}\n\n.z-th-content-container {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: space-between;\n}\n\n:host > .zth-body {\n display: flex;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n padding: calc(var(--space-unit) * 2);\n}\n\n.zth-body:focus {\n border: 2px solid var(--blue800);\n outline: none;\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n tag: \"z-th\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTh {\n @Element() host: HTMLZThElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Enables the sorting button.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the sort button.\n */\n @Prop({reflect: true})\n showSorting: VisibilityCondition = null;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Current sorting direction.\n * Set `SortDirection.ASC` or `SortDirection.DESC` to show the sort icon.\n */\n @Prop({mutable: true})\n sortDirection?: SortDirection;\n\n /**\n * Set popover position.\n */\n @Prop()\n popoverPosition = PopoverPosition.AUTO;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n /**\n * Sort event fired when the user clicks on the sort button.\n * The sorting logic must be implemented by the app.\n * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n */\n @Event()\n private sort: EventEmitter;\n\n private menuTrigger: HTMLElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n */\n private get ariaSortDirection(): string {\n if (!this.sortDirection) {\n return null;\n }\n\n return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n }\n\n /**\n * Handle the click on the sort button.\n * This method will also handle the z-index logic.\n * @fires sort\n */\n private handleSort(): void {\n if (!this.sortDirection) {\n return;\n }\n\n this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n\n this.sort.emit({sortDirection: this.sortDirection});\n\n const row = this.host.parentElement;\n if (row) {\n const zThElements = Array.from(row.querySelectorAll(\"z-th\"));\n zThElements.forEach((th) => (th.style.zIndex = \"1\"));\n }\n\n this.host.style.zIndex = \"2\";\n }\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZThElement {\n return (\n <Host\n tabIndex=\"0\"\n menu-open={this.isMenuOpen}\n aria-sort={this.ariaSortDirection}\n sortable={this.showSorting}\n >\n <div\n tabIndex={1}\n class=\"zth-body\"\n onClick={() => {\n if (this.showSorting) {\n this.handleSort();\n }\n }}\n >\n <div class=\"z-th-content-container\">\n <slot></slot>\n {this.showSorting && (\n <button\n class={{\"z-th--sort-button\": true, \"sort-active\": this.showSorting === VisibilityCondition.ALWAYS}}\n type=\"button\"\n onClick={this.handleSort.bind(this)}\n >\n <z-icon\n name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n width={14}\n height={14}\n />\n </button>\n )}\n {this.showMenu && (\n <div class=\"cell--menu-container\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLElement)}\n onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/index-b695a167.js DELETED Viewed

@@ -1,47 +0,0 @@
-'use strict';
-const index = require('./index-e801ae96.js');
-const index$1 = require('./index-bab7a651.js');
-const stylesCss = ":host{position:relative;display:flex;max-width:100%;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}.cell--content-container{display:flex;width:100%;height:100%;align-items:center}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}";
-const ZTdStyle0 = stylesCss;
-const ZTd = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.colspanChange = index.createEvent(this, "colspanChange", 6);
-        this.colspan = undefined;
-        this.sticky = false;
-        this.showMenu = null;
-        this.popoverPosition = index$1.PopoverPosition.AUTO;
-        this.isMenuOpen = false;
-    }
-    updateColspan() {
-        if (this.colspan) {
-            this.host.style.gridColumn = `span ${this.colspan}`;
-        }
-        else {
-            this.host.style.removeProperty("grid-column");
-        }
-        this.colspanChange.emit(this.colspan || 1);
-    }
-    onMenuButtonClick(ev) {
-        ev.stopPropagation();
-        this.popoverEl.open = !this.popoverEl.open;
-    }
-    componentWillLoad() {
-        this.updateColspan();
-    }
-    render() {
-        return (index.h(index.Host, { key: '36a62d2c751b3b889c7f69280418e95ff02192d5', role: "cell", "menu-open": this.isMenuOpen }, index.h("div", { key: '82adb24df4f465535b30f5a0ba10c452efeb174e', class: "cell--content-container", style: this.showMenu && { justifyContent: "space-between" } }, index.h("slot", { key: 'c8696269f69dd2a177857fec6edd6ed3d09000ef' }), this.showMenu && (index.h("div", { key: '1d4f2f1c37aa62ed345d42bd13bb675008e657db', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: 'f49b61b2eccd54fc3acd39deaa59641d105034c8', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: 'a029ccdd0100543058c01f84d0454bb9b5e40cd2', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: '90c964239ee1b578d3e566c5658dab44768ddeae', name: "contextual-menu" })))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-};
-ZTd.style = ZTdStyle0;
-exports.ZTd = ZTd;
-//# sourceMappingURL=index-b695a167.js.map

package/dist/cjs/index-b695a167.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-b695a167.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,s4BAAs4B,CAAC;AACz5B,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMAA,uBAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1BD,kEACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAC,cAAc,EAAE,eAAe,EAAC,IAEzDA,oEAAa,EACZ,IAAI,CAAC,QAAQ,KACZA,kEAAK,KAAK,EAAC,qCAAqC,IAC9CA,uEACE,OAAO,EAAEE,qBAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAEC,mBAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACFH,wEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9BA,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":["PopoverPosition","h","Host","ButtonVariant","ControlSize"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Set the popover position, the default is \"auto\".\n */\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <div\n class=\"cell--content-container\"\n style={this.showMenu && {justifyContent: \"space-between\"}}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n class=\"cell-popover\"\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/index-c234bc14.js DELETED Viewed

@@ -1,59 +0,0 @@
-'use strict';
-const index = require('./index-e801ae96.js');
-const utils = require('./utils-6bd8c55e.js');
-require('./index-b695a167.js');
-require('./index-6994b9af.js');
-const stylesCss = ":host{--columns:1;display:grid;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) {
-        index.registerInstance(this, hostRef);
-        this.expand = index.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-${utils.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 (index.h(index.Host, { key: '4c47e5b949ba00727a524d2fe43897e908fc93db', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, index.h("div", { key: '78b358626d679a394b40e73c4ebf75c960599e1e', class: "z-tr--expand-button-container" }, this.expandable && (index.h("button", { key: '76f6b63a082e1f1631048f2d28261b7e4911be3d', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, index.h("z-icon", { key: 'cc71d3040278fc21df718d68ec762f6ea4710245', name: this.expanded ? "minus-circled" : "plus-circled" })))), index.h("slot", { key: '72fe314d209f884fc303036667632b502b5fff6e', onSlotchange: this.updateColumns.bind(this) })));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "expandable": ["updateColumns"]
-    }; }
-};
-ZTr.style = ZTrStyle0;
-exports.ZTr = ZTr;
-//# sourceMappingURL=index-c234bc14.js.map

package/dist/cjs/index-c234bc14.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"index-c234bc14.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,mjDAAmjD,CAAC;AACtkD,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,2BAA2BA,cAAQ,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,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBD,kEAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACdA,sFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEbA,qEAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACNA,mEAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":["randomId","h","Host"],"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 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}