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

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 14.5.1 (2024-06-17)
+
 ## 14.5.0 (2024-06-13)
 
 ### 14.4.2 (2024-06-13)

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

@@ -0,0 +1,78 @@
+/** @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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,11 @@
+/** @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

@@ -0,0 +1 @@
+{"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/app-globals-3a1e7e63.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+
+//# sourceMappingURL=app-globals-3a1e7e63.js.map

package/dist/cjs/app-globals-3a1e7e63.js.map

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

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

@@ -1 +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 {mobileBreakpoint, tabletBreakpoint, desktopBreakpoint};\n"],"version":3}
+{"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-19279b08.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const index = require('./index-5dc4a8de.js');
+
+const stylesCss = ":host{display:block;box-sizing:border-box}";
+const ZTbodyStyle0 = stylesCss;
+
+const ZTbody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '82690ddf3bdd8b742cadcf45a75778892d15c5bf', role: "rowgroup" }, index.h("slot", { key: '6b1a45b35318f6df0966ee67aa60f33aa32c5751' })));
+    }
+};
+ZTbody.style = ZTbodyStyle0;
+
+exports.ZTbody = ZTbody;
+
+//# sourceMappingURL=index-19279b08.js.map

package/dist/cjs/index-19279b08.js.map

@@ -0,0 +1 @@
+{"file":"index-19279b08.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,4CAA4C,CAAC;AAC/D,qBAAe,SAAS;;MCUX,MAAM;;;;IACjB,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACnBD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"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}

package/dist/cjs/index-1ebcef6a.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const index = require('./index-5dc4a8de.js');
+const index$1 = require('./index-39ce4edf.js');
+
+const stylesCss = ":host{position:relative;display:flex;min-width:128px;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)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:\"\";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}: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}@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.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: 'b0b39511d34b7f04a8a21c22ad4a8f967c200529', role: "cell", "menu-open": this.isMenuOpen }, index.h("slot", { key: '93467b923af5d4145dc81c025c261a880c57e2bb' }), this.showMenu && (index.h("div", { key: '158f04cdf214db6813b70bdbfa384e4627320b17', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: '71f7d601c03a61e091b28e79f6198dcb91da9621', 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: '00cf3359460a45552b1a720d2f50679cad1b2671', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, index.h("slot", { key: '7e04b722b396abc56dc5494130d78861731bb526', name: "contextual-menu" }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "colspan": ["updateColspan"]
+    }; }
+};
+ZTd.style = ZTdStyle0;
+
+exports.ZTd = ZTd;
+
+//# sourceMappingURL=index-1ebcef6a.js.map

package/dist/cjs/index-1ebcef6a.js.map

@@ -0,0 +1 @@
+{"file":"index-1ebcef6a.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ghCAAghC,CAAC;AACniC,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;0BAMvB,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,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1BD,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,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,IAE9DA,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACI,EACP;KACH;;;;;;;;;;","names":["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, 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   * 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        <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              ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n              bindTo={this.menuTrigger as HTMLElement}\n              onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n            >\n              <slot name=\"contextual-menu\"></slot>\n            </z-popover>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/index-42d4c304.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const index = require('./index-5dc4a8de.js');
+const index$1 = require('./index-39ce4edf.js');
+
+const stylesCss = ":host{position:relative;display:flex;min-width:128px;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)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:\"\";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}: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}@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{background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th--sort-button:focus{box-shadow:var(--shadow-focus-primary);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.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.
+     * @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,
+        });
+    }
+    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: '6d7379e559b77ea796584c9cdc49be8dabb3cd67', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, index.h("slot", { key: 'e21bf2439c1061cf7acaeddb6a3afe8818112493' }), this.sortDirection && (index.h("button", { key: 'e65ed301cea08cb0cdaf3ce2b13cb06dc61705ea', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, index.h("z-icon", { key: '1768ea275af78502035d66fb2a4f80fff68bc6e0', name: this.sortDirection === index$1.SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (index.h("div", { key: 'b516e407bc90fa95fa1ae914a344cdcd89f38336', class: "cell--menu-container" }, index.h("z-button", { key: '4f76bb047c904a88d2e78117811932b9cc9b409d', 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: '08fcadf9b57a3184f8fceef2925c19ef3d9f659e', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, index.h("slot", { key: '4f2ad7d81457d1132d3b156368bd96813994fc3c', name: "contextual-menu" }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "colspan": ["updateColspan"]
+    }; }
+};
+ZTh.style = ZThStyle0;
+
+exports.ZTh = ZTh;
+
+//# sourceMappingURL=index-42d4c304.js.map

package/dist/cjs/index-42d4c304.js.map

@@ -0,0 +1 @@
+{"file":"index-42d4c304.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,m2CAAm2C,CAAC;AACt3C,kBAAe,SAAS;;MCYX,GAAG;;;;;wBAekB,IAAI;sBAM3B,KAAK;;+BAaIA,uBAAe,CAAC,IAAI;0BAMzB,KAAK;;;;;IAiBlB,IAAY,iBAAiB;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAI,CAAC,aAAa,KAAKC,qBAAa,CAAC,GAAG,GAAG,WAAW,GAAG,YAAY,CAAC;KAC9E;;;;;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAKA,qBAAa,CAAC,GAAG,GAAGA,qBAAa,CAAC,IAAI,GAAGA,qBAAa,CAAC,GAAG,CAAC;QACvG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YACb,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CAAC,CAAC;KACJ;IAGS,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;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,UAAU,eACf,IAAI,CAAC,iBAAiB,IAEjCD,oEAAa,EACZ,IAAI,CAAC,aAAa,KACjBA,qEACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAEnCA,qEACE,IAAI,EAAE,IAAI,CAAC,aAAa,KAAKD,qBAAa,CAAC,GAAG,GAAG,iBAAiB,GAAG,mBAAmB,EACxF,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,EACA,IAAI,CAAC,QAAQ,KACZC,kEAAK,KAAK,EAAC,sBAAsB,IAC/BA,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,EAAiB,CAAC,EACnD,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAC3D,EACFH,wEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,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,CACI,EACP;KACH;;;;;;;;;;","names":["PopoverPosition","SortDirection","h","Host","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  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: 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--sort-button:focus {\n  box-shadow: var(--shadow-focus-primary);\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   * 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   * @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    this.sort.emit({\n      sortDirection: this.sortDirection,\n    });\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        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n      >\n        <slot></slot>\n        {this.sortDirection && (\n          <button\n            class=\"z-th--sort-button\"\n            type=\"button\"\n            onClick={this.handleSort.bind(this)}\n          >\n            <z-icon\n              name={this.sortDirection === SortDirection.ASC ? \"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      </Host>\n    );\n  }\n}\n"],"version":3}