@zanichelli/albe-web-components 19.2.6-RC2 → 19.2.7

package/dist/esm/z-toggle-switch.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-DPdXlnVe.js';
 import { k as LabelPosition } from './index-BKCj6NR2.js';
-import { r as randomId } from './utils-0PByxJyN.js';
+import { r as randomId } from './utils-DYd3kO0P.js';
 import './breakpoints-Q-tWjk7P.js';
 
 const stylesCss = () => `.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}`;
@@ -32,14 +32,14 @@ const ZToggleSwitch = class {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: 'a71496b0436b37aaf6b0af879bae53be6a627efa' }, h("input", { key: '716eec97479d25139fe00b144a58d26941ded2a3', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '8907147d34ed7b1c944936e1c3e73519ef77f00b', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'd31f156ba646f113f8f2509afdaee3e79fdb33f7' }, h("input", { key: '48a3963dd555c00867816af0169ed677dc4ccc68', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '3872377775f759727b62288794555cd84e60b12c', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'c3a9dc659fee0c089799a011568b2df707f62c34' }, h("slot", { key: '68be5cec64b7d973bd40d59be54580170bd7ec5e' })), h("span", { key: '206640ff4c480d2923f8c99b80093b8bf08ee68a', class: {
+            } }, h("span", { key: 'b46cb8e359cdb11e696a116661659c9872d49a1e' }, h("slot", { key: '42fc26c0ced09c5fdda062735fe543b8cb57a658' })), h("span", { key: 'b55f0fbd2ff23f01c1ac0b845c6af5571d81c13f', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '31d158040dfc2cb2e605ee5271cd1b992016c1e2', class: "circle" }, this.checked && (h("z-icon", { key: '2d45f7c22746d2db091e0ee2096b3f580064e8aa', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '87bc69be905d84458fec5384f756348a94e446fe', class: "circle" }, this.checked && (h("z-icon", { key: '4464b2bf8aa91a7c0c5c9e2bff26e84ff7c34be2', width: 12, height: 12, name: "checkmark" })))))));
     }
 };
 ZToggleSwitch.style = stylesCss();

package/dist/esm/z-tool.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DPdXlnVe.js';
 import { P as PopoverPosition, g as KeyboardCode } from './index-BKCj6NR2.js';
-import { a as containsElement } from './utils-0PByxJyN.js';
+import { a as containsElement } from './utils-DYd3kO0P.js';
 import './breakpoints-Q-tWjk7P.js';
 
 const stylesCss = () => `:host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}`;
@@ -187,10 +187,10 @@ const ZTool = class {
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (h(Host, { key: '1a87f70e20dca23bc4207f03aa1cd933c5fa668e', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: 'df7f4ad8a47dee955b9c4c249354fa114410409d', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, h("z-icon", { key: '43bd668b9d58377caa755e7eeaf68e3381b036f0', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: 'a86766b86ee4cf878f5a48f48e135b8cd3092f3a', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: '91ddd32599a6a6a3b4fbf34fb69fdabff0dbbda9', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: 'ec7b937f451db4a1b206b386d6f199b5cf71117d', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+        return (h(Host, { key: 'f5da5cd309607dc94dd12a28596b2ea02d28ba4c', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: 'be63d078b5035ba1f08c480c8c08f365b3115191', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, h("z-icon", { key: 'a08b5432871a1522374633050a835bb18001a6d6', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '9e0fa11a43662f333404543e315b097aa96ab08c', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: 'bfc2be83824830ed05b70f423e9f044015624f49', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '717697756e5333f066f96c96695cd9741b006e93', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
             /* disable auto-close to prevent unwanted close behaviors on mobile,
             when the bound element is the main toolbar */
-            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: '85e016cb92ce6c7356afa7f93bbdd278ab3ff88e' })))));
+            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: 'd151d02e38fb7a0941012ec969b6cea647721846' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-toolbar.entry.js

@@ -129,7 +129,7 @@ const ZToolbar = class {
         }
     }
     render() {
-        return (h(Host, { key: 'd766b9377953f92994c693221a9ea7c5104cd1c6', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '37d3079836475575d0267725589798a39025a517', onSlotchange: () => {
+        return (h(Host, { key: '9f77e33a2a5e3566137ca23c4a41526b58b46515', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: 'a62af35ef54781baee92f865a969a8642ce58703', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));

package/dist/esm/z-tooltip.entry.js

@@ -26,7 +26,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: '21236ca0162a4ce1c7d1c6adfd052332e8a566b8', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: 'fb78016230d9246043c60bd22e1ed7c6baa4d78d' })));
+        return (h("z-popover", { key: '0cc1e8ea0e6896f5031309a5984c09df4b095d8b', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: 'a0548343b099fe7986066d821a455f1092428b38' })));
     }
 };
 ZTooltip.style = stylesCss();

package/dist/esm/z-tr.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DPdXlnVe.js';
-import { r as randomId } from './utils-0PByxJyN.js';
+import { r as randomId } from './utils-DYd3kO0P.js';
 import './z-td.entry.js';
 import './z-th.entry.js';
 import './index-BKCj6NR2.js';

package/dist/types/components/z-searchbar/index.d.ts

@@ -6,13 +6,14 @@ import { ButtonVariant, ControlSize, SearchbarItem } from "../../beans";
  * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);
  */
 export declare class ZSearchbar implements ComponentInterface {
-    /** the id of the searchbar element */
+    host: HTMLZSearchbarElement;
+    /** The id of the searchbar element */
     htmlid: string;
     /** Prevent submit action */
     preventSubmit?: boolean;
-    /** the input label */
+    /** The input label */
     label?: string;
-    /** the input aria-label */
+    /** The input aria-label */
     htmlAriaLabel?: string;
     /** Input search string */
     value?: string;
@@ -22,7 +23,7 @@ export declare class ZSearchbar implements ComponentInterface {
     autocomplete?: boolean;
     /** Minimun number of characters to dispatch typing event */
     autocompleteMinChars?: number;
-    /** Number of results shown - default all */
+    /** Number of results shown. Default: all */
     resultsCount?: number;
     /** Search helper text */
     searchHelperLabel?: string;
@@ -32,55 +33,50 @@ export declare class ZSearchbar implements ComponentInterface {
     sortResultsItems?: boolean;
     /** Show submit button */
     showSearchButton?: boolean;
-    /** Set button icon without label*/
+    /** Hide the label of the submit button, showing only the icon */
     searchButtonIconOnly?: boolean;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    /** Size of the `z-input` and submit `z-button` */
     size?: ControlSize;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
+    /** Submit `z-button` variant */
     variant?: ButtonVariant;
     searchString: string;
-    currResultsCount: number;
+    currResultsCount: number | undefined;
     showResults: boolean;
     isMobile: boolean;
     selectedItem?: SearchbarItem;
-    element: HTMLZSearchbarElement;
     private resultsItemsList;
     private inputRef;
-    private resizeObserver;
-    private items;
+    /** Media query list for detecting mobile view. */
+    private mql?;
+    /** Listener for changes in the mobile view media query. */
+    private onMobileViewChange?;
     /** Emitted on search submit, return search string */
     searchSubmit: EventEmitter<string>;
-    private emitSearchSubmit;
     /** Emitted on search typing, return search string */
     searchTyping: EventEmitter<string>;
-    private emitSearchTyping;
     /** Emitted on search result click, return item */
     searchItemClick: EventEmitter<SearchbarItem>;
     private emitSearchItemClick;
+    private emitSearchSubmit;
     watchItems(): void;
     watchResultsCount(): void;
     watchValue(): void;
     watchSearchString(): void;
-    watchShowResults(): void;
-    disconnectedCallback(): void;
-    componentDidLoad(): void;
-    componentWillLoad(): void;
     private getResultsItemsList;
     private getGroupedItems;
-    private checkResultsCount;
+    private onListItemKeyDown;
+    private onSearchHelperKeyDown;
+    private handleArrowsNavigation;
     private handleStopTyping;
     private handleSubmit;
     private handleOutsideClick;
-    private renderInput;
-    private renderButton;
-    private renderResults;
-    private renderResultsList;
-    private renderItems;
-    private handleArrowsNavigation;
-    private renderItem;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
     private renderItemLabel;
-    private renderItemCategory;
-    private renderSearchHelper;
-    private renderShowAllResults;
+    private renderItem;
+    /**
+     * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.
+     */
+    private renderItemGroups;
     render(): HTMLZSearchbarElement;
 }

package/dist/types/components.d.ts

@@ -2100,16 +2100,16 @@ export namespace Components {
          */
         "autocompleteMinChars"?: number;
         /**
-          * the input aria-label
+          * The input aria-label
          */
         "htmlAriaLabel"?: string;
         /**
-          * the id of the searchbar element
+          * The id of the searchbar element
           * @default `searchbar-${randomId()}`
          */
         "htmlid": string;
         /**
-          * the input label
+          * The input label
          */
         "label"?: string;
         /**
@@ -2122,7 +2122,7 @@ export namespace Components {
          */
         "preventSubmit"?: boolean;
         /**
-          * Number of results shown - default all
+          * Number of results shown. Default: all
          */
         "resultsCount"?: number;
         /**
@@ -2130,7 +2130,7 @@ export namespace Components {
          */
         "resultsItems"?: SearchbarItem[] | string;
         /**
-          * Set button icon without label
+          * Hide the label of the submit button, showing only the icon
           * @default false
          */
         "searchButtonIconOnly"?: boolean;
@@ -2145,7 +2145,7 @@ export namespace Components {
          */
         "showSearchButton"?: boolean;
         /**
-          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+          * Size of the `z-input` and submit `z-button`
           * @default ControlSize.BIG
          */
         "size"?: ControlSize;
@@ -2159,7 +2159,7 @@ export namespace Components {
          */
         "value"?: string;
         /**
-          * Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`.
+          * Submit `z-button` variant
           * @default ButtonVariant.PRIMARY
          */
         "variant"?: ButtonVariant;
@@ -6519,16 +6519,16 @@ declare namespace LocalJSX {
          */
         "autocompleteMinChars"?: number;
         /**
-          * the input aria-label
+          * The input aria-label
          */
         "htmlAriaLabel"?: string;
         /**
-          * the id of the searchbar element
+          * The id of the searchbar element
           * @default `searchbar-${randomId()}`
          */
         "htmlid"?: string;
         /**
-          * the input label
+          * The input label
          */
         "label"?: string;
         /**
@@ -6553,7 +6553,7 @@ declare namespace LocalJSX {
          */
         "preventSubmit"?: boolean;
         /**
-          * Number of results shown - default all
+          * Number of results shown. Default: all
          */
         "resultsCount"?: number;
         /**
@@ -6561,7 +6561,7 @@ declare namespace LocalJSX {
          */
         "resultsItems"?: SearchbarItem[] | string;
         /**
-          * Set button icon without label
+          * Hide the label of the submit button, showing only the icon
           * @default false
          */
         "searchButtonIconOnly"?: boolean;
@@ -6576,7 +6576,7 @@ declare namespace LocalJSX {
          */
         "showSearchButton"?: boolean;
         /**
-          * Available sizes: `big`, `small` and `x-small`. Defaults to `big`.
+          * Size of the `z-input` and submit `z-button`
           * @default ControlSize.BIG
          */
         "size"?: ControlSize;
@@ -6590,7 +6590,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`.
+          * Submit `z-button` variant
           * @default ButtonVariant.PRIMARY
          */
         "variant"?: ButtonVariant;