@zanichelli/albe-web-components 19.1.4-RC1 → 19.2.0

package/dist/collection/components/z-tool/index.js

@@ -1,15 +1,19 @@
 import { Host, h } from "@stencil/core";
-import { PopoverPosition } from "../../beans";
+import { KeyboardCode, PopoverPosition } from "../../beans";
+import { containsElement } from "../../utils/utils";
 /**
- * ZTool component.
- * @slot - Optional slot for nested content (e.g., a secondary z-toolbar) that appears when the tool is open/clicked.
+ * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.
+ * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.
  */
 export class ZTool {
     constructor() {
-        this.handleTooltipOpen = () => {
-            //This.isNested check prevents tooltips from showing on nested tools, e.g. inside submenus
-            //This control will be removed in future versions when nested tooltips will be supported
-            if (!this.tooltip || this.isNested) {
+        /** Indicates if the tool is nested inside another tool. */
+        this.isNested = false;
+        /**
+         * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.
+         */
+        this.handleTooltipOpen = (ev) => {
+            if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target)) {
                 return;
             }
             clearTimeout(this.hoverDelay);
@@ -17,23 +21,46 @@ export class ZTool {
                 this.tooltipOpen = true;
             }, 1000);
         };
-        this.handleTooltipClose = () => {
-            if (!this.tooltip) {
+        /**
+         * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.
+         */
+        this.handleTooltipClose = (ev) => {
+            var _a;
+            if (!this.tooltip || ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.closest("z-tooltip")) === this.tooltipRef) {
                 return;
             }
             clearTimeout(this.hoverDelay);
             this.tooltipOpen = false;
         };
+        /**
+         * Handles click events on the tool's button element.
+         * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,
+         * or the first item if no active/selected item is found.
+         */
         this.handleClick = () => {
-            if (this.disabled) {
+            if (this.disabled || !this.hasSlottedContent) {
                 return;
             }
-            if (this.hasSlottedContent) {
-                this.open = !this.open;
-                if (this.open) {
-                    this.focusNestedToolbar();
+            this.open = !this.open;
+            if (this.open) {
+                const colorPicker = this.hostElement.querySelector(":scope > z-color-picker");
+                if (colorPicker) {
+                    colorPicker.setFocus();
+                    return;
                 }
+                // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.
+                const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)") || this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)"));
+                firstActiveOrEnabledNestedTool === null || firstActiveOrEnabledNestedTool === void 0 ? void 0 : firstActiveOrEnabledNestedTool.setFocus();
+            }
+        };
+        /**
+         * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).
+         */
+        this.onTooltipOpenChange = (event) => {
+            if (event.target === this.tooltipRef) {
+                return;
             }
+            this.tooltipOpen = event.detail.open;
         };
         this.icon = undefined;
         this.tooltip = undefined;
@@ -42,61 +69,133 @@ export class ZTool {
         this.active = false;
         this.disabled = false;
         this.open = false;
+        this.indicatorColor = undefined;
         this.tooltipOpen = false;
         this.hasSlottedContent = false;
-        this.isNested = false;
+        this.isMobile = false;
+        this.hasNestedOpenTools = false;
     }
     handleOpenChange() {
         this.toggleSubmenu.emit(this.open);
     }
-    focusNestedToolbar() {
-        requestAnimationFrame(() => {
-            var _a;
-            const nestedToolbar = this.hostElement.querySelector("z-toolbar");
-            if (nestedToolbar) {
-                const firstTool = nestedToolbar.querySelector("z-tool");
-                if (firstTool) {
-                    const button = (_a = firstTool.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
-                    if (button) {
-                        button.focus();
-                    }
+    handleTooltipOpenChange() {
+        this.toggleTooltip.emit(this.tooltipOpen);
+    }
+    /**
+     * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.
+     */
+    handleKeyDown(event) {
+        if (!this.open || this.hasNestedOpenTools) {
+            return;
+        }
+        switch (event.key) {
+            case KeyboardCode.ESC:
+                event.stopPropagation();
+                this.open = false;
+                this.setFocus();
+                break;
+            case KeyboardCode.TAB:
+                if (event.shiftKey && event.target.closest("z-tool:not(:scope)") === this.hostElement) {
+                    this.open = false;
                 }
-            }
-        });
+                break;
+        }
     }
-    checkIfNested() {
-        let parent = this.hostElement.parentElement;
-        while (parent) {
-            if (parent.tagName.toLowerCase() === "z-tool") {
-                return true;
-            }
-            parent = parent.parentElement;
+    /**
+     * Close the popover on clicks outside the component, only if there are no nested open tools.
+     * In that case any outside click should close the nested submenu(s) first.
+     */
+    onOutsideClick(event) {
+        const target = event.composedPath()[0];
+        if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {
+            return;
+        }
+        this.open = false;
+    }
+    onNestedToolToggle(ev) {
+        if (ev.target === this.hostElement) {
+            return;
+        }
+        if (ev.detail === true) {
+            this.hasNestedOpenTools = true;
+            return;
         }
-        return false;
+        this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll("z-tool")).some((tool) => tool.open);
+    }
+    /**
+     * Handles the `colorSelected` event from a nested `z-color-picker` component.
+     * Updates the `indicatorColor` and closes the tool's popover.
+     */
+    handleColorSelected(event) {
+        if (!Array.from(this.hostElement.children).includes(event.target)) {
+            return;
+        }
+        this.indicatorColor = event.detail;
+        this.open = false;
+        this.setFocus();
+    }
+    /**
+     * Close the submenu when focus moves outside the tool.
+     */
+    handleExternalFocusin(ev) {
+        const target = ev.target;
+        if (!containsElement(this.hostElement, target)) {
+            this.open = false;
+        }
+    }
+    /** Focuses the tool's button element. */
+    async setFocus() {
+        if (this.disabled) {
+            return;
+        }
+        setTimeout(() => {
+            var _a;
+            (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 50);
+    }
+    /** Sets the tab index of the tool's internal button element. */
+    async setTabIndex(value) {
+        if (!this.buttonRef) {
+            return;
+        }
+        this.buttonRef.tabIndex = this.disabled ? -1 : value;
+    }
+    /** Closes the tooltip. */
+    async closeTooltip() {
+        clearTimeout(this.hoverDelay);
+        this.tooltipOpen = false;
     }
     componentWillLoad() {
         this.hasSlottedContent = this.hostElement.children.length > 0;
-        this.isNested = this.checkIfNested();
+        this.isNested = !!this.hostElement.closest("z-tool:not(:scope)");
+        this.mainToolbar = this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)");
+        this.hasNestedOpenTools = !!this.hostElement.querySelector("z-tool[open]");
+        this.mql = matchMedia("(max-width: 767px)");
+        this.onMobileViewChange = (e) => (this.isMobile = e.matches);
+        this.mql.addEventListener("change", this.onMobileViewChange);
+        this.isMobile = this.mql.matches;
     }
     disconnectedCallback() {
+        var _a;
         clearTimeout(this.hoverDelay);
+        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (h(Host, { key: '29475c2061b8031c6d742e0b67bdcaa657acf269', nested: this.isNested }, h("button", { key: '7b2c77c12e7d62a0560a8c71d8660e45927d4024', class: "z-tool", type: "button", "aria-pressed": this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : 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: '4c4b2d93bb5d8869cff58970f6c1a52ae82041e9', ref: (el) => (this.iconRef = el), name: this.icon })), this.tooltip && !this.isNested && (h("z-popover", { key: '87078924f19cbd8ec1efeaa460fad64d3d45701d', class: "z-tool-tooltip", bindTo: this.iconRef, open: this.tooltipOpen, position: this.tooltipPosition, showArrow: true, center: true, closable: false }, h("span", { key: 'a11623609058d4106f18ed8d523e32ee102afaa7', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("div", { key: 'c22cf9f4ffe622afc11be4e94722d5232df7dd58', class: {
-                "z-tool-submenu": true,
-                "z-tool-submenu-open": this.open,
-            } }, h("slot", { key: '0e789c315bbcdc50c6ffbb32d225be7f12b9cd59' })))));
+        return (h(Host, { key: '81b929ee3738e7533405c8ea47535d7fb52bfb92', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '1b68af441ac69dbdf805b823b852c093b944e586', 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: '580cf2210393974cb2300ea6e50018149f6ef123', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '9b0e197d25135e1a0016fbbdca48751e8350be7b', 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: 'd6580708f0b79853cc3644cb6ea61b64cbe73a21', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '121b6662678738de67739beb733edfe94a6df3f6', 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: '6bb4815374940bd0ce6dc21bf38a1372454bf830' })))));
     }
     static get is() { return "z-tool"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../tokens/typography.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../tokens/typography.css"]
         };
     }
     static get properties() {
@@ -105,9 +204,15 @@ export class ZTool {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"text\" | \"email\" | \"checkbox\" | \"search\" | \"map\" | \"bold\" | \"link\" | \"upload\" | \"image-add\" | \"app-switcher\" | \"arrow-counterclockwise-down-left\" | \"arrow-simple-down\" | \"arrow-counterclockwise-up-left\" | \"arrow-square-left\" | \"arrow-square-north-east\" | \"arrow-simple-north-east\" | \"arrow-square-north-west\" | \"arrow-simple-north-west\" | \"arrow-clockwise-up-right\" | \"arrow-square-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-square-south-east\" | \"arrow-simple-south-east\" | \"arrow-square-south-west\" | \"arrow-simple-south-west\" | \"arrow-simple-up\" | \"artworks\" | \"support\" | \"circle-black\" | \"nib\" | \"sun-with-rays-black\" | \"book-plus\" | \"book-minus\" | \"shopping-cart\" | \"checkbox-checked\" | \"chevron-circle-down\" | \"chevron-circle-left\" | \"chevron-circle-right\" | \"chevron-circle-up\" | \"checkmark-circle\" | \"multiply-circled-filled\" | \"multiply-circled\" | \"plus-circled\" | \"exclamation-circle\" | \"multiply\" | \"cloud-delete\" | \"suit-club\" | \"suit-diamond\" | \"document\" | \"index-down\" | \"caret-down\" | \"caret-up-down\" | \"image-edit\" | \"light-bulb\" | \"login\" | \"logout\" | \"arrow-quad-down\" | \"arrow-quad-left\" | \"arrow-quad-north-east\" | \"arrow-quad-right\" | \"image\" | \"suit-heart\" | \"helm\" | \"home\" | \"info\" | \"index-left\" | \"bulleted-list-square\" | \"square-black\" | \"square-white\" | \"burger-menu\" | \"folder\" | \"lock-open\" | \"projection-room\" | \"question-mark-circle\" | \"index-right\" | \"suit-spade\" | \"strikethrough-text\" | \"index-up\" | \"user-avatar\" | \"circle-white\" | \"diamond-white\" | \"workspace-zanichelli\" | \"image-add-filled\" | \"arrow-counterclockwise-down-left-filled\" | \"arrow-simple-down-filled\" | \"arrow-counterclockwise-up-left-filled\" | \"arrow-square-left-filled\" | \"arrow-simple-north-east-filled\" | \"arrow-square-north-east-filled\" | \"arrow-simple-north-west-filled\" | \"arrow-square-north-west-filled\" | \"arrow-clockwise-up-right-filled\" | \"arrow-square-right-filled\" | \"arrow-left-filled\" | \"arrow-right-filled\" | \"arrow-simple-south-east-filled\" | \"arrow-square-south-east-filled\" | \"arrow-simple-south-west-filled\" | \"arrow-square-south-west-filled\" | \"arrow-simple-up-filled\" | \"artworks-filled\" | \"circle-black-filled\" | \"nib-filled\" | \"sun-with-rays-black-filled\" | \"chevron-circle-down-filled\" | \"chevron-circle-left-filled\" | \"chevron-circle-right-filled\" | \"chevron-circle-up-filled\" | \"cloud-delete-filled\" | \"suit-club-filled\" | \"suit-diamond-filled\" | \"document-filled\" | \"index-down-filled\" | \"image-edit-filled\" | \"light-bulb-filled\" | \"image-filled\" | \"suit-heart-filled\" | \"helm-filled\" | \"home-filled\" | \"info-filled\" | \"index-left-filled\" | \"bulleted-list-square-filled\" | \"square-black-filled\" | \"square-white-filled\" | \"folder-filled\" | \"lock-open-filled\" | \"projection-room-filled\" | \"index-right-filled\" | \"suit-spade-filled\" | \"strikethrough-text-filled\" | \"index-up-filled\" | \"circle-white-filled\" | \"diamond-white-filled\" | \"workspace-zanichelli-filled\" | \"burger-menu-mobile\" | \"burger-menu-mobile-filled\" | \"bg-color\" | \"font-color\" | \"picker-color\" | \"stroke-color\" | \"bg-color-filled\" | \"font-color-filled\" | \"picker-color-filled\" | \"stroke-color-filled\" | \"blockquote\" | \"code\" | \"switch\" | \"view\" | \"math\" | \"download\" | \"target\" | \"chevron-right\" | \"pdf\" | \"reload\" | \"accessibility\" | \"close\" | \"event\" | \"chevron-up\" | \"chevron-down\" | \"copy\" | \"pause\" | \"play\" | \"minus-circled\" | \"book\" | \"contextual-menu\" | \"expand\" | \"chevron-left\" | \"play-filled\" | \"view-filled\" | \"view-off-filled\" | \"radio-button-checked\" | \"radio-button\" | \"informationsource\" | \"multiply-circle-filled\" | \"caret-up\" | \"multiply-circle\" | \"checkmark-circle-filled\" | \"left-magnifying-glass\" | \"teacher\" | \"collezioni\" | \"dictonary\" | \"exercises-online\" | \"interactives-maps\" | \"textual-analysis\" | \"checkmark\" | \"gear\" | \"burger-menu-filled\" | \"add-image\" | \"app-switcher-button\" | \"arrow-clockwise-down-left\" | \"arrow-down\" | \"arrow-left-rounded\" | \"arrow-left-square\" | \"arrow-north-east-square\" | \"arrow-north-east\" | \"arrow-north-west-square\" | \"arrow-north-west\" | \"arrow-right-rounded\" | \"arrow-right-square\" | \"arrow-small-left\" | \"arrow-small-right\" | \"arrow-south-east-square\" | \"arrow-south-east\" | \"arrow-south-west-square\" | \"arrow-south-west\" | \"arrow-up-and-down\" | \"arrow-up\" | \"artwork\" | \"ask-your-manager\" | \"black-circle\" | \"black-nib\" | \"black-sun-with-rays\" | \"book-add\" | \"book-delete\" | \"cart\" | \"checkbox-selected\" | \"checkbox-unchecked\" | \"chevron-down-circle\" | \"chevron-left-circle\" | \"chevron-right-circle\" | \"chevron-up-circle\" | \"circle-check\" | \"circle-chevron-down\" | \"circle-chevron-left\" | \"circle-chevron-up\" | \"circle-cross-fill\" | \"circle-cross-stroke\" | \"circle-cross\" | \"circle-plus\" | \"circle-warning\" | \"cloud-x\" | \"club-black-suit\" | \"cross\" | \"diamond-black-suit\" | \"document-with-text\" | \"down-white-index\" | \"drop-down\" | \"drop-up-down\" | \"edit-picture\" | \"electric-light-bulb\" | \"enter\" | \"exit\" | \"external-link-down\" | \"external-link-left\" | \"external-link-right-up\" | \"external-link-right\" | \"frame-with-picture\" | \"heart-black-suit\" | \"helmsymbol\" | \"house\" | \"left-white-index\" | \"list-bulleted-square\" | \"medium-black-square\" | \"medium-white-square\" | \"menu-burger\" | \"open-file-folder\" | \"open-lock\" | \"projection\" | \"question-mark\" | \"right-white-index\" | \"spade-black-suit\" | \"strike-through-text\" | \"up-white-index\" | \"user\" | \"white-circle\" | \"white-diamond\" | \"workplace-zanichelli\" | \"add-image-filled\" | \"arrow-clockwise-down-left-filled\" | \"arrow-down-filled\" | \"arrow-left-rounded-filled\" | \"arrow-left-square-filled\" | \"arrow-north-east-filled\" | \"arrow-north-east-square-filled\" | \"arrow-north-west-filled\" | \"arrow-north-west-square-filled\" | \"arrow-right-rounded-filled\" | \"arrow-right-square-filled\" | \"arrow-small-left-filled\" | \"arrow-small-right-filled\" | \"arrow-south-east-filled\" | \"arrow-south-east-square-filled\" | \"arrow-south-west-filled\" | \"arrow-south-west-square-filled\" | \"arrow-up-and-down-filled\" | \"arrow-up-filled\" | \"artwork-filled\" | \"black-circle-filled\" | \"black-nib-filled\" | \"black-sun-with-rays-filled\" | \"chevron-down-circle-filled\" | \"chevron-left-circle-filled\" | \"chevron-right-circle-filled\" | \"chevron-up-circle-filled\" | \"cloud-x-filled\" | \"club-black-suit-filled\" | \"diamond-black-suit-filled\" | \"document-with-text-filled\" | \"down-white-index-filled\" | \"edit-picture-filled\" | \"electric-light-bulb-filled\" | \"frame-with-picture-filled\" | \"heart-black-suit-filled\" | \"helmsymbol-filled\" | \"house-filled\" | \"informationsource-filled\" | \"left-white-index-filled\" | \"list-bulleted-square-filled\" | \"medium-black-square-filled\" | \"medium-white-square-filled\" | \"open-file-folder-filled\" | \"open-lock-filled\" | \"projection-filled\" | \"right-white-index-filled\" | \"spade-black-suit-filled\" | \"strike-through-text-filled\" | \"up-white-index-filled\" | \"white-circle-filled\" | \"white-diamond-filled\" | \"workplace-zanichelli-filled\" | \"assign-task-button\" | \"atom-button\" | \"burger-menu-booktab-button\" | \"check-task-button\" | \"checkmark-square-button\" | \"code-button\" | \"cursor-index-button\" | \"document-button\" | \"excel-doc-button\" | \"exercises-interactive-button\" | \"exercises-online-button\" | \"exercises-plus-button\" | \"file-zip-button\" | \"film-frames-button\" | \"geogebra-button\" | \"go-page-button\" | \"headphone-button\" | \"image-button\" | \"interactives-maps-button\" | \"lecture-button\" | \"link-button\" | \"login-button\" | \"multi-marks-button\" | \"pdf-button\" | \"periodic-table-button\" | \"play-button\" | \"pointer-button\" | \"powerpoint-button\" | \"python-code-button\" | \"show-video-button\" | \"textual-analysis-button\" | \"virtual-reality-button\" | \"word-button\" | \"accessibility-filled\" | \"active-note-filled\" | \"add-note-filled\" | \"ai-filled\" | \"ai-tips-filled\" | \"app-switcher-filled\" | \"arrow-clockwise-down-right-filled\" | \"arrow-clockwise-up-left-filled\" | \"arrow-counterclockwise-up-right-filled\" | \"arrow-left-right-filled\" | \"arrow-quad-down-filled\" | \"arrow-quad-left-filled\" | \"arrow-quad-north-east-filled\" | \"arrow-quad-north-west-filled\" | \"arrow-quad-right-filled\" | \"arrow-quad-south-east-filled\" | \"arrow-quad-south-west-filled\" | \"arrow-quad-up-filled\" | \"arrow-simple-left-filled\" | \"arrow-simple-right-filled\" | \"arrow-square-down-filled\" | \"arrow-style-filled\" | \"arrow-style-line-filled\" | \"arrow-up-down-double-filled\" | \"arrow-up-down-filled\" | \"arrow-up-rounded-filled\" | \"arrow-up-square-filled\" | \"arrows-to-dot-filled\" | \"art-filled\" | \"artist-filled\" | \"artist-quote-filled\" | \"artistic-education-filled\" | \"assign-task-filled\" | \"atom-filled\" | \"back-filled\" | \"back-top-filled\" | \"barrage-questions-filled\" | \"biology-filled\" | \"black-diamond-filled\" | \"blockquote-filled\" | \"bold-filled\" | \"book-author-filled\" | \"book-filled\" | \"book-minus-filled\" | \"book-plus-filled\" | \"book-view-filled\" | \"bookmark-filled\" | \"breaking-line-filled\" | \"bulleted-list-filled\" | \"bulls-eye-filled\" | \"burger-menu-booktab-filled\" | \"c-circled-filled\" | \"c-square-filled\" | \"calligraphic-filled\" | \"camera-filled\" | \"caret-down-filled\" | \"caret-up-down-filled\" | \"caret-up-filled\" | \"catalog-card-filled\" | \"chapter-filled\" | \"character-panel-filled\" | \"check-task-filled\" | \"checkbox-checked-filled\" | \"checkbox-filled\" | \"checkmark-filled\" | \"checkmark-square-filled\" | \"chemistry-filled\" | \"chevron-down-filled\" | \"chevron-left-filled\" | \"chevron-right-filled\" | \"chevron-up-filled\" | \"cinese-filled\" | \"civics-filled\" | \"class-assign-filled\" | \"clean-filled\" | \"cloud-download-filled\" | \"code-filled\" | \"collezioni-filled\" | \"color-selected-filled\" | \"communication-filled\" | \"compare-filled\" | \"compress-filled\" | \"contextual-menu-filled\" | \"copy-filled\" | \"copy-to-clipboard-filled\" | \"copyright-filled\" | \"course-filled\" | \"cursor-index-filled\" | \"curved-line-filled\" | \"dagger-filled\" | \"daggerdbl-filled\" | \"deactivate-note-filled\" | \"decrease-indentation-filled\" | \"delete-filled\" | \"dictionary-switch-filled\" | \"dictonary-filled\" | \"disegno-arrow-filled\" | \"disegno-colours-intersection-filled\" | \"disegno-compass-filled\" | \"disegno-curve-filled\" | \"disegno-ellipsis-filled\" | \"disegno-grid-settings-filled\" | \"disegno-half-line-filled\" | \"disegno-hide-tools-filled\" | \"disegno-irregular-polygon-filled\" | \"disegno-levels-filled\" | \"disegno-poly-line-filled\" | \"disegno-polygon-vertices-filled\" | \"disegno-protractor-filled\" | \"disegno-regular-polygon-filled\" | \"disegno-ruler-filled\" | \"disegno-segment-filled\" | \"disegno-straight-line-filled\" | \"download-filled\" | \"draft-filled\" | \"drag-drop-filled\" | \"drag-indicator-filled\" | \"economic-filled\" | \"edit-field-filled\" | \"edit-filled\" | \"electrical-engineering-filled\" | \"email-filled\" | \"english-filled\" | \"erase-tool-filled\" | \"event-cancelled-filled\" | \"event-filled\" | \"excel-doc-filled\" | \"exclamation-circle-filled\" | \"exclamation-square-filled\" | \"exercises-filled\" | \"exercises-interactive-filled\" | \"exercises-online-filled\" | \"exercises-plus-filled\" | \"expand-filled\" | \"extra-filled\" | \"facebook-filled\" | \"favorites-filled\" | \"feed-filled\" | \"file-zip-filled\" | \"fill-blanks-filled\" | \"fill-choice-filled\" | \"film-frames-filled\" | \"find-error-filled\" | \"fit-height-view-filled\" | \"fit-width-view-filled\" | \"font-book-filled\" | \"french-filled\" | \"fun-filled\" | \"gap-filled\" | \"gear-filled\" | \"geogebra-filled\" | \"geographical-map-filled\" | \"geography-filled\" | \"german-filled\" | \"go-page-filled\" | \"golden-pen-filled\" | \"grades-filled\" | \"graphic-filled\" | \"greek-filled\" | \"headphone-filled\" | \"highlights-filled\" | \"history-filled\" | \"history-next-filled\" | \"history-previous-filled\" | \"hourglass-flowing-filled\" | \"hourglass-half-bottom-filled\" | \"human-sciences-filled\" | \"image-jpg-filled\" | \"image-png-filled\" | \"image-tiff-filled\" | \"immersive-reading-filled\" | \"inbox-tray-filled\" | \"increase-indentation-filled\" | \"indeterminated-checkbox-filled\" | \"informatics-filled\" | \"interactive-glossaries-filled\" | \"interactives-maps-filled\" | \"italian-filled\" | \"italic-filled\" | \"laboratory-filled\" | \"land-management-filled\" | \"latin-filled\" | \"law-filled\" | \"lecture-filled\" | \"left-magnifying-glass-filled\" | \"link-filled\" | \"liquid-version-filled\" | \"location-filled\" | \"lock-filled\" | \"login-filled\" | \"logout-filled\" | \"lozenge-filled\" | \"magnfying-glass-filled\" | \"map-filled\" | \"math-filled\" | \"mechanics-filled\" | \"minus-circled-filled\" | \"minus-filled\" | \"minus-square-filled\" | \"monospace-filled\" | \"multi-marks-filled\" | \"multiple-choice-filled\" | \"multiply-filled\" | \"multiply-square-filled\" | \"music-filled\" | \"my-data-filled\" | \"natural-science-filled\" | \"next-text-to-speech-filled\" | \"nobel-filled\" | \"note-filled\" | \"notification-filled\" | \"notification-new-filled\" | \"notification-off-filled\" | \"numbered-list-filled\" | \"nutritional-sciences-filled\" | \"open-answer-filled\" | \"oval-filled\" | \"paragraph-filled\" | \"pause-filled\" | \"pdf-filled\" | \"pen-thickness-filled\" | \"people-filled\" | \"periodic-table-filled\" | \"philosophy-filled\" | \"physics-filled\" | \"plus-circled-filled\" | \"plus-filled\" | \"plus-square-filled\" | \"pointer-filled\" | \"powerpoint-filled\" | \"previous-text-to-speech-filled\" | \"print-filled\" | \"progress-percentage-filled\" | \"python-code-filled\" | \"qrcode-filled\" | \"quad-filled\" | \"question-mark-circle-filled\" | \"question-mark-square-filled\" | \"quick-assign-filled\" | \"quiz-filled\" | \"radio-button-checked-filled\" | \"radio-button-filled\" | \"reading-settings-filled\" | \"recently-viewed-filled\" | \"redo-filled\" | \"reduce-screen-filled\" | \"registro-filter-filled\" | \"reload-filled\" | \"remove-formatting-filled\" | \"russian-filled\" | \"sans-serif-filled\" | \"save-filled\" | \"school-filled\" | \"science-earth-filled\" | \"science-filled\" | \"screenfull-filled\" | \"search-filled\" | \"send-filled\" | \"serif-filled\" | \"share-filled\" | \"shopping-cart-filled\" | \"short-cut-filled\" | \"show-video-filled\" | \"site-resources-filled\" | \"skip-back-by-10-filled\" | \"skip-back-filled\" | \"skip-forward-by-10-filled\" | \"skip-forward-filled\" | \"smartphone-filled\" | \"snap-grid-filled\" | \"snap-grid-off-filled\" | \"spanish-filled\" | \"speaker-off-filled\" | \"speaker-on-filled\" | \"speech-synthesis-filled\" | \"sport-sciences-filled\" | \"star-empty-filled\" | \"star-full-filled\" | \"story-filled\" | \"straight-line-filled\" | \"stroke-size-filled\" | \"stroke-size-large-filled\" | \"stroke-size-medium-filled\" | \"stroke-size-small-filled\" | \"stroke-solid-dash-filled\" | \"stroke-solid-dot-filled\" | \"stroke-solid-filled\" | \"stroke-style-filled\" | \"student-filled\" | \"subscript-filled\" | \"sun-with-rays-filled\" | \"support-filled\" | \"supscript-filled\" | \"switch-filled\" | \"synchronize-filled\" | \"table-insert-filled\" | \"target-filled\" | \"teacher-filled\" | \"technique-filled\" | \"technology-filled\" | \"text-align-center-filled\" | \"text-align-justify-filled\" | \"text-align-left-filled\" | \"text-align-right-filled\" | \"text-filled\" | \"text-large-filled\" | \"text-medium-filled\" | \"text-scale-filled\" | \"text-small-filled\" | \"text-to-speech-filled\" | \"textual-analysis-filled\" | \"theory-help-filled\" | \"thumbnail-filled\" | \"thumbs-down-filled\" | \"thumbs-up-filled\" | \"ticket-filled\" | \"timeline-filled\" | \"timer-clock-filled\" | \"topic-filled\" | \"topography-filled\" | \"tourist-technique-filled\" | \"translation-filled\" | \"true-false-filled\" | \"u-circle-filled\" | \"u-square-filled\" | \"underlined-text-filled\" | \"undo-filled\" | \"upload-filled\" | \"user-avatar-filled\" | \"view-double-page-filled\" | \"view-options-filled\" | \"view-single-page-filled\" | \"virtual-class-filled\" | \"virtual-reality-filled\" | \"word-filled\" | \"working-bag-filled\" | \"youtube-filled\" | \"zoom-in-filled\" | \"zoom-out-filled\" | \"zte-filled\" | \"active-note\" | \"add-note\" | \"ai\" | \"ai-tips\" | \"arrow-clockwise-down-right\" | \"arrow-clockwise-up-left\" | \"arrow-counterclockwise-up-right\" | \"arrow-left-right\" | \"arrow-quad-north-west\" | \"arrow-quad-south-east\" | \"arrow-quad-south-west\" | \"arrow-quad-up\" | \"arrow-simple-left\" | \"arrow-simple-right\" | \"arrow-square-down\" | \"arrow-style\" | \"arrow-style-line\" | \"arrow-up-down\" | \"arrow-up-down-double\" | \"arrow-up-rounded\" | \"arrow-up-square\" | \"arrows-to-dot\" | \"art\" | \"artist\" | \"artist-quote\" | \"artistic-education\" | \"assign-task\" | \"atom\" | \"back\" | \"back-top\" | \"barrage-questions\" | \"biology\" | \"black-diamond\" | \"book-author\" | \"book-view\" | \"bookmark\" | \"breaking-line\" | \"bulleted-list\" | \"bulls-eye\" | \"burger-menu-booktab\" | \"c-circled\" | \"c-square\" | \"calligraphic\" | \"camera\" | \"catalog-card\" | \"chapter\" | \"character-panel\" | \"check-task\" | \"checkmark-square\" | \"chemistry\" | \"cinese\" | \"civics\" | \"class-assign\" | \"clean\" | \"cloud-download\" | \"color-selected\" | \"communication\" | \"compare\" | \"compress\" | \"copy-to-clipboard\" | \"copyright\" | \"course\" | \"cursor-index\" | \"curved-line\" | \"dagger\" | \"daggerdbl\" | \"deactivate-note\" | \"decrease-indentation\" | \"delete\" | \"dictionary-switch\" | \"disegno-arrow\" | \"disegno-colours-intersection\" | \"disegno-compass\" | \"disegno-curve\" | \"disegno-ellipsis\" | \"disegno-grid-settings\" | \"disegno-half-line\" | \"disegno-hide-tools\" | \"disegno-irregular-polygon\" | \"disegno-levels\" | \"disegno-poly-line\" | \"disegno-polygon-vertices\" | \"disegno-protractor\" | \"disegno-regular-polygon\" | \"disegno-ruler\" | \"disegno-segment\" | \"disegno-straight-line\" | \"draft\" | \"drag-drop\" | \"drag-indicator\" | \"economic\" | \"edit\" | \"edit-field\" | \"electrical-engineering\" | \"english\" | \"erase-tool\" | \"event-cancelled\" | \"excel-doc\" | \"exclamation-square\" | \"exercises\" | \"exercises-interactive\" | \"exercises-plus\" | \"extra\" | \"facebook\" | \"favorites\" | \"feed\" | \"file-zip\" | \"fill-blanks\" | \"fill-choice\" | \"film-frames\" | \"find-error\" | \"fit-height-view\" | \"fit-width-view\" | \"font-book\" | \"french\" | \"fun\" | \"gap\" | \"geogebra\" | \"geographical-map\" | \"geography\" | \"german\" | \"go-page\" | \"golden-pen\" | \"grades\" | \"graphic\" | \"greek\" | \"headphone\" | \"highlights\" | \"history\" | \"history-next\" | \"history-previous\" | \"hourglass-flowing\" | \"hourglass-half-bottom\" | \"human-sciences\" | \"image-jpg\" | \"image-png\" | \"image-tiff\" | \"immersive-reading\" | \"inbox-tray\" | \"increase-indentation\" | \"indeterminated-checkbox\" | \"informatics\" | \"interactive-glossaries\" | \"italian\" | \"italic\" | \"laboratory\" | \"land-management\" | \"latin\" | \"law\" | \"lecture\" | \"liquid-version\" | \"location\" | \"lock\" | \"lozenge\" | \"magnfying-glass\" | \"mechanics\" | \"minus\" | \"minus-square\" | \"monospace\" | \"multi-marks\" | \"multiple-choice\" | \"multiply-square\" | \"music\" | \"my-data\" | \"natural-science\" | \"next-text-to-speech\" | \"nobel\" | \"note\" | \"notification\" | \"notification-new\" | \"notification-off\" | \"nutritional-sciences\" | \"numbered-list\" | \"open-answer\" | \"oval\" | \"paragraph\" | \"pen-thickness\" | \"people\" | \"periodic-table\" | \"philosophy\" | \"physics\" | \"plus\" | \"plus-square\" | \"pointer\" | \"powerpoint\" | \"previous-text-to-speech\" | \"print\" | \"progress-percentage\" | \"python-code\" | \"qrcode\" | \"quad\" | \"question-mark-square\" | \"quick-assign\" | \"quiz\" | \"reading-settings\" | \"recently-viewed\" | \"redo\" | \"reduce-screen\" | \"registro-filter\" | \"remove-formatting\" | \"russian\" | \"sans-serif\" | \"save\" | \"school\" | \"science\" | \"science-earth\" | \"screenfull\" | \"send\" | \"serif\" | \"share\" | \"short-cut\" | \"show-video\" | \"site-resources\" | \"skip-back\" | \"skip-back-by-10\" | \"skip-forward\" | \"skip-forward-by-10\" | \"smartphone\" | \"snap-grid\" | \"snap-grid-off\" | \"spanish\" | \"speaker-off\" | \"speaker-on\" | \"speech-synthesis\" | \"sport-sciences\" | \"star-empty\" | \"star-full\" | \"story\" | \"straight-line\" | \"stroke-size\" | \"stroke-size-large\" | \"stroke-size-medium\" | \"stroke-size-small\" | \"stroke-solid\" | \"stroke-solid-dash\" | \"stroke-solid-dot\" | \"stroke-style\" | \"student\" | \"subscript\" | \"sun-with-rays\" | \"supscript\" | \"synchronize\" | \"table-insert\" | \"technique\" | \"technology\" | \"text-align-center\" | \"text-align-justify\" | \"text-align-left\" | \"text-align-right\" | \"text-large\" | \"text-medium\" | \"text-scale\" | \"text-small\" | \"text-to-speech\" | \"theory-help\" | \"thumbnail\" | \"thumbs-down\" | \"thumbs-up\" | \"ticket\" | \"timeline\" | \"timer-clock\" | \"topic\" | \"topography\" | \"tourist-technique\" | \"translation\" | \"true-false\" | \"u-circle\" | \"u-square\" | \"underlined-text\" | \"undo\" | \"view-double-page\" | \"view-off\" | \"view-options\" | \"view-single-page\" | \"virtual-class\" | \"virtual-reality\" | \"word\" | \"working-bag\" | \"youtube\" | \"zoom-in\" | \"zoom-out\" | \"zte\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../constants/iconset",
+                            "id": "src/constants/iconset.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -188,7 +293,7 @@ export class ZTool {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual selected state."
+                    "text": "Visual active state."
                 },
                 "attribute": "active",
                 "reflect": true,
@@ -229,6 +334,23 @@ export class ZTool {
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "indicatorColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Color to use to fill the icon's color indicator, if it has one.\nCan be any valid value for the `fill` svg attribute.\nThe value of this prop is passed down to the `z-icon` component inside the tool.\n\nIf `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\nto automatically update `indicatorColor` and change the color of the icon indicator accordingly."
+                },
+                "attribute": "indicator-color",
+                "reflect": false
             }
         };
     }
@@ -236,7 +358,8 @@ export class ZTool {
         return {
             "tooltipOpen": {},
             "hasSlottedContent": {},
-            "isNested": {}
+            "isMobile": {},
+            "hasNestedOpenTools": {}
         };
     }
     static get events() {
@@ -255,13 +378,123 @@ export class ZTool {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "toggleTooltip",
+                "name": "toggleTooltip",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tooltip open state changes."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the tool's button element.",
+                    "tags": []
+                }
+            },
+            "setTabIndex": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the tab index of the tool's internal button element.",
+                    "tags": []
+                }
+            },
+            "closeTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the tooltip.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
+            }, {
+                "propName": "tooltipOpen",
+                "methodName": "handleTooltipOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "onOutsideClick",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "toggleSubmenu",
+                "method": "onNestedToolToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "colorSelected",
+                "method": "handleColorSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "handleExternalFocusin",
+                "target": "body",
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/z-tool/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tool/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../beans\";\n\n/**\n * ZTool component.\n * @slot - Optional slot for nested content (e.g., a secondary z-toolbar) that appears when the tool is open/clicked.\n */\n@Component({\n  tag: \"z-tool\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTool {\n  @Element() hostElement: HTMLZToolElement;\n\n  /** Tool icon */\n  @Prop()\n  icon: string;\n\n  /** Text displayed inside the tooltip. */\n  @Prop()\n  tooltip?: string;\n\n  /** Preferred tooltip position. Defaults to true. */\n  @Prop()\n  tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n  /** Accessible label for the tool trigger. Falls back to tooltip content. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Visual selected state. */\n  @Prop({reflect: true})\n  active = false;\n\n  /** Disabled state. */\n  @Prop({reflect: true})\n  disabled = false;\n\n  /** Open state. */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  @State()\n  tooltipOpen = false;\n\n  @State()\n  hasSlottedContent = false;\n\n  @State()\n  isNested = false;\n\n  /** Emitted when the open state changes. */\n  @Event()\n  toggleSubmenu: EventEmitter;\n\n  private iconRef?: HTMLElement;\n\n  private hoverDelay?: ReturnType<typeof setTimeout>;\n\n  @Watch(\"open\")\n  handleOpenChange(): void {\n    this.toggleSubmenu.emit(this.open);\n  }\n\n  private handleTooltipOpen = (): void => {\n    //This.isNested check prevents tooltips from showing on nested tools, e.g. inside submenus\n    //This control will be removed in future versions when nested tooltips will be supported\n    if (!this.tooltip || this.isNested) {\n      return;\n    }\n    clearTimeout(this.hoverDelay);\n    this.hoverDelay = setTimeout(() => {\n      this.tooltipOpen = true;\n    }, 1000);\n  };\n\n  private handleTooltipClose = (): void => {\n    if (!this.tooltip) {\n      return;\n    }\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  };\n\n  private handleClick = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSlottedContent) {\n      this.open = !this.open;\n      if (this.open) {\n        this.focusNestedToolbar();\n      }\n    }\n  };\n\n  private focusNestedToolbar(): void {\n    requestAnimationFrame(() => {\n      const nestedToolbar = this.hostElement.querySelector(\"z-toolbar\");\n      if (nestedToolbar) {\n        const firstTool = nestedToolbar.querySelector(\"z-tool\");\n        if (firstTool) {\n          const button = firstTool.shadowRoot?.querySelector(\"button\");\n          if (button) {\n            button.focus();\n          }\n        }\n      }\n    });\n  }\n\n  private checkIfNested(): boolean {\n    let parent = this.hostElement.parentElement;\n    while (parent) {\n      if (parent.tagName.toLowerCase() === \"z-tool\") {\n        return true;\n      }\n      parent = parent.parentElement;\n    }\n\n    return false;\n  }\n\n  componentWillLoad(): void {\n    this.hasSlottedContent = this.hostElement.children.length > 0;\n    this.isNested = this.checkIfNested();\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.hoverDelay);\n  }\n\n  render(): HTMLZToolElement {\n    return (\n      <Host nested={this.isNested}>\n        <button\n          class=\"z-tool\"\n          type=\"button\"\n          aria-pressed={this.active ? \"true\" : \"false\"}\n          aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n          aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleTooltipOpen}\n          onMouseLeave={this.handleTooltipClose}\n          onFocus={this.handleTooltipOpen}\n          onBlur={this.handleTooltipClose}\n        >\n          <z-icon\n            ref={(el) => (this.iconRef = el)}\n            name={this.icon}\n          ></z-icon>\n        </button>\n        {this.tooltip && !this.isNested && (\n          <z-popover\n            class=\"z-tool-tooltip\"\n            bindTo={this.iconRef}\n            open={this.tooltipOpen}\n            position={this.tooltipPosition}\n            showArrow\n            center\n            closable={false}\n          >\n            <span class=\"body-4\">{this.tooltip}</span>\n          </z-popover>\n        )}\n        {this.hasSlottedContent && (\n          <div\n            class={{\n              \"z-tool-submenu\": true,\n              \"z-tool-submenu-open\": this.open,\n            }}\n          >\n            <slot></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tool/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {ZColorPickerCustomEvent, ZToolCustomEvent, ZTooltipCustomEvent} from \"../../components\";\nimport {IconName} from \"../../constants/iconset\";\nimport {containsElement} from \"../../utils/utils\";\n\n/**\n * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.\n * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.\n */\n@Component({\n  tag: \"z-tool\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZTool {\n  @Element() hostElement: HTMLZToolElement;\n\n  /** Tool icon */\n  @Prop()\n  icon: IconName;\n\n  /** Text displayed inside the tooltip. */\n  @Prop()\n  tooltip?: string;\n\n  /** Preferred tooltip position. Defaults to true. */\n  @Prop()\n  tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n  /** Accessible label for the tool trigger. Falls back to tooltip content. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Visual active state. */\n  @Prop({reflect: true})\n  active = false;\n\n  /** Disabled state. */\n  @Prop({reflect: true})\n  disabled = false;\n\n  /** Open state. */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * The value of this prop is passed down to the `z-icon` component inside the tool.\n   *\n   * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n   * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n   */\n  @Prop({mutable: true})\n  indicatorColor?: string;\n\n  @State()\n  tooltipOpen = false;\n\n  @State()\n  hasSlottedContent = false;\n\n  @State()\n  isMobile = false;\n\n  /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n  @State()\n  hasNestedOpenTools = false;\n\n  /** Emitted when the open state changes. */\n  @Event()\n  toggleSubmenu: EventEmitter;\n\n  /** Emitted when the tooltip open state changes. */\n  @Event()\n  toggleTooltip: EventEmitter;\n\n  private buttonRef?: HTMLButtonElement;\n\n  private iconRef?: HTMLElement;\n\n  private tooltipRef?: HTMLZTooltipElement;\n\n  private hoverDelay?: ReturnType<typeof setTimeout>;\n\n  /** Indicates if the tool is nested inside another tool. */\n  private isNested = false;\n\n  /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n  private mainToolbar?: HTMLZToolbarElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /**\n   * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n   */\n  private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.hoverDelay = setTimeout(() => {\n      this.tooltipOpen = true;\n    }, 1000);\n  };\n\n  /**\n   * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n   */\n  private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  };\n\n  /**\n   * Handles click events on the tool's button element.\n   * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n   * or the first item if no active/selected item is found.\n   */\n  private handleClick = (): void => {\n    if (this.disabled || !this.hasSlottedContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n      if (colorPicker) {\n        colorPicker.setFocus();\n\n        return;\n      }\n\n      // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n      const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n        \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n      ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n      firstActiveOrEnabledNestedTool?.setFocus();\n    }\n  };\n\n  /**\n   * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n   */\n  private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n    if ((event.target as HTMLElement) === this.tooltipRef) {\n      return;\n    }\n\n    this.tooltipOpen = event.detail.open;\n  };\n\n  @Watch(\"open\")\n  handleOpenChange(): void {\n    this.toggleSubmenu.emit(this.open);\n  }\n\n  @Watch(\"tooltipOpen\")\n  handleTooltipOpenChange(): void {\n    this.toggleTooltip.emit(this.tooltipOpen);\n  }\n\n  /**\n   * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open || this.hasNestedOpenTools) {\n      return;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ESC:\n        event.stopPropagation();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.TAB:\n        if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n          this.open = false;\n        }\n        break;\n    }\n  }\n\n  /**\n   * Close the popover on clicks outside the component, only if there are no nested open tools.\n   * In that case any outside click should close the nested submenu(s) first.\n   */\n  @Listen(\"click\", {target: \"body\"})\n  onOutsideClick(event: MouseEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  @Listen(\"toggleSubmenu\")\n  onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n    if (ev.target === this.hostElement) {\n      return;\n    }\n\n    if (ev.detail === true) {\n      this.hasNestedOpenTools = true;\n\n      return;\n    }\n\n    this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n  }\n\n  /**\n   * Handles the `colorSelected` event from a nested `z-color-picker` component.\n   * Updates the `indicatorColor` and closes the tool's popover.\n   */\n  @Listen(\"colorSelected\")\n  handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n    if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n      return;\n    }\n\n    this.indicatorColor = event.detail;\n    this.open = false;\n    this.setFocus();\n  }\n\n  /**\n   * Close the submenu when focus moves outside the tool.\n   */\n  @Listen(\"focusin\", {target: \"body\", passive: true})\n  handleExternalFocusin(ev: FocusEvent): void {\n    const target = ev.target as Node;\n    if (!containsElement(this.hostElement, target)) {\n      this.open = false;\n    }\n  }\n\n  /** Focuses the tool's button element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.disabled) {\n      return;\n    }\n\n    setTimeout(() => {\n      this.buttonRef?.focus();\n    }, 50);\n  }\n\n  /** Sets the tab index of the tool's internal button element. */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    if (!this.buttonRef) {\n      return;\n    }\n\n    this.buttonRef.tabIndex = this.disabled ? -1 : value;\n  }\n\n  /** Closes the tooltip. */\n  @Method()\n  async closeTooltip(): Promise<void> {\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  }\n\n  componentWillLoad(): void {\n    this.hasSlottedContent = this.hostElement.children.length > 0;\n    this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n    this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n    this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.hoverDelay);\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  render(): HTMLZToolElement {\n    return (\n      <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n        <button\n          class=\"z-tool\"\n          type=\"button\"\n          ref={(el) => (this.buttonRef = el)}\n          aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n          aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n          aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n          aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleTooltipOpen}\n          onMouseLeave={this.handleTooltipClose}\n          onFocus={this.handleTooltipOpen}\n          onBlur={this.handleTooltipClose}\n        >\n          <z-icon\n            ref={(el) => (this.iconRef = el)}\n            name={this.icon}\n            indicatorColor={this.indicatorColor}\n          ></z-icon>\n        </button>\n        {this.tooltip && (\n          <z-tooltip\n            class=\"z-tool-tooltip\"\n            ref={(el) => (this.tooltipRef = el)}\n            bindTo={this.iconRef}\n            open={this.tooltipOpen && !this.open}\n            position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n            dark\n            onMouseLeave={this.handleTooltipClose}\n            onBlur={this.handleTooltipClose}\n            onOpenChange={this.onTooltipOpenChange}\n          >\n            <span class=\"body-4\">{this.tooltip}</span>\n          </z-tooltip>\n        )}\n        {this.hasSlottedContent && (\n          <z-popover\n            class=\"z-tool-submenu\"\n            open={this.open}\n            bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n            center\n            /* disable auto-close to prevent unwanted close behaviors on mobile,\n            when the bound element is the main toolbar */\n            closable={false}\n            position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n          >\n            <slot></slot>\n          </z-popover>\n        )}\n      </Host>\n    );\n  }\n}\n"]}