@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

package/dist/components/z-color-picker.js

@@ -1,234 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a0 as ColorPickerPalette } from './index2.js';
-import { a as containsElement } from './utils.js';
-
-const stylesCss = ":host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color=\"#FFFFFF00\"]{position:relative}button[data-color=\"#FFFFFF00\"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );border-radius:var(--border-radius);content:\"\"}button[aria-selected=\"true\"]{box-shadow:0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color=\"#FFFFFF00\"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color=\"#FFFFFF00\"]:disabled .color-swatch{background-color:var(--color-disabled02)}";
-const ZColorPickerStyle0 = stylesCss;
-
-const LOCALES = {
-    it: {
-        "Select a color": "Seleziona un colore",
-        "Color swatch": "Campione di colore",
-    },
-    en: {
-        "Select a color": "Select a color",
-        "Color swatch": "Color swatch",
-    },
-};
-/** Number of colors in each group (column) of the grid. */
-const COLOR_GROUP_SIZE = 5;
-/** Number of color groups (columns) in the grid. */
-const COLOR_GROUPS = 9;
-const ZColorPicker$1 = /*@__PURE__*/ proxyCustomElement(class ZColorPicker extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.colorSelected = createEvent(this, "colorSelected", 7);
-        /**
-         * The color keys arranged in row-major order for rendering and navigation.
-         */
-        this.colorKeysByRow = [];
-        this._colorButtons = [];
-        this.selectedColor = undefined;
-        this.lng = "it";
-        this.htmlAriaLabel = undefined;
-        this.disableTransparent = false;
-    }
-    get colorButtons() {
-        if (!this._colorButtons.length) {
-            this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll("button"));
-        }
-        return this._colorButtons;
-    }
-    /**
-     * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).
-     * This ensures button indices in the DOM match their visual position in the grid.
-     */
-    sortColorKeysByRow() {
-        const allKeys = Object.keys(ColorPickerPalette);
-        const ordered = [];
-        // Iterate through visual positions (row by row, left to right)
-        for (let row = 0; row < COLOR_GROUP_SIZE; row++) {
-            for (let col = 0; col < COLOR_GROUPS; col++) {
-                const columnMajorIndex = col * COLOR_GROUP_SIZE + row;
-                if (columnMajorIndex < allKeys.length) {
-                    ordered.push(allKeys[columnMajorIndex]);
-                }
-            }
-        }
-        return ordered;
-    }
-    /** Move focus to the specified color button by index. */
-    moveFocusTo(index) {
-        // Reset tabindex of other buttons and set tabindex to 0 on selected button
-        this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));
-        this.colorButtons[index].focus();
-    }
-    validateTransparentSelection() {
-        if (this.disableTransparent && this.selectedColor === "#FFFFFF00") {
-            this.selectedColor = "#333333"; // Default to dark gray 2 if transparent is disabled and currently selected
-        }
-    }
-    emitColorSelected() {
-        this.colorSelected.emit(this.selectedColor);
-    }
-    /**
-     * Focuses the selected or first enabled color button and makes the container non-tabbable.
-     */
-    async setFocus() {
-        // Reset tabindex of all buttons
-        this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
-        const firstSelectedOrEnabled = this.colorButtons.find((btn) => btn.ariaSelected === "true") || this.colorButtons.find((btn) => !btn.disabled);
-        if (!firstSelectedOrEnabled) {
-            return;
-        }
-        firstSelectedOrEnabled.tabIndex = 0;
-        setTimeout(() => {
-            firstSelectedOrEnabled.focus();
-        }, 50);
-        // Set container as non-tabbable
-        this.host.tabIndex = -1;
-    }
-    /**
-     * Compute next index in row-major grid according to keyboard direction.
-     */
-    getNextIndexByKey(currentIndex, key, totalColors) {
-        const row = Math.floor(currentIndex / COLOR_GROUPS);
-        const col = currentIndex % COLOR_GROUPS;
-        let newIndex = currentIndex;
-        switch (key) {
-            case "ArrowRight": {
-                const newCol = col + 1;
-                const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;
-                newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);
-                if (newIndex >= totalColors) {
-                    newIndex = 0; // Wrap to first item
-                }
-                break;
-            }
-            case "ArrowLeft": {
-                const newCol = col - 1;
-                const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;
-                newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);
-                if (newIndex >= totalColors) {
-                    newIndex = totalColors - 1; // Wrap to last item
-                }
-                break;
-            }
-            case "ArrowDown": {
-                let newRow = row + 1;
-                let newCol = col;
-                if (newRow >= COLOR_GROUP_SIZE) {
-                    // Wrap to first item of next column
-                    newRow = 0;
-                    newCol = (col + 1) % COLOR_GROUPS;
-                }
-                newIndex = newRow * COLOR_GROUPS + newCol;
-                if (newIndex >= totalColors) {
-                    newIndex = 0; // Wrap to first item
-                }
-                break;
-            }
-            case "ArrowUp": {
-                let newRow = row - 1;
-                let newCol = col;
-                if (newRow < 0) {
-                    // Wrap to last item of previous column
-                    newRow = COLOR_GROUP_SIZE - 1;
-                    newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;
-                }
-                newIndex = newRow * COLOR_GROUPS + newCol;
-                if (newIndex >= totalColors) {
-                    newIndex = totalColors - 1; // Wrap to last item
-                }
-                break;
-            }
-        }
-        return newIndex;
-    }
-    /**
-     * Handle keyboard navigation within the color picker.
-     * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.
-     */
-    handleKeyDown(event) {
-        var _a, _b;
-        const target = event.composedPath()[0];
-        if (!target.dataset.color) {
-            return;
-        }
-        const currentIndex = this.colorButtons.indexOf(target);
-        const totalColors = this.colorButtons.length;
-        if (currentIndex < 0 || !["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(event.key)) {
-            return;
-        }
-        let newIndex = currentIndex;
-        let attempts = 0;
-        do {
-            newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);
-            attempts++;
-        } while (attempts < totalColors && ((_a = this.colorButtons[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled));
-        if (newIndex !== currentIndex &&
-            newIndex >= 0 &&
-            newIndex < totalColors &&
-            !((_b = this.colorButtons[newIndex]) === null || _b === void 0 ? void 0 : _b.disabled)) {
-            this.moveFocusTo(newIndex);
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    /**
-     * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.
-     */
-    handleBlur(event) {
-        const relatedTarget = event.relatedTarget;
-        if (!containsElement(this.host, relatedTarget)) {
-            this.host.tabIndex = 0;
-            this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
-        }
-    }
-    componentWillLoad() {
-        this.colorKeysByRow = this.sortColorKeysByRow();
-    }
-    render() {
-        return (h(Host, { key: '24f0e76aecda9731ed826e8228f49ca5e08a14a5', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
-            var _a;
-            return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
-        })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "disableTransparent": ["validateTransparentSelection"],
-        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
-    }; }
-    static get style() { return ZColorPickerStyle0; }
-}, [1, "z-color-picker", {
-        "selectedColor": [1025, "selected-color"],
-        "lng": [1],
-        "htmlAriaLabel": [1, "html-aria-label"],
-        "disableTransparent": [4, "disable-transparent"],
-        "setFocus": [64]
-    }, [[0, "focus", "setFocus"], [0, "keydown", "handleKeyDown"], [0, "blur", "handleBlur"]], {
-        "disableTransparent": ["validateTransparentSelection"],
-        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-color-picker"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-color-picker":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZColorPicker$1);
-            }
-            break;
-    } });
-}
-
-const ZColorPicker = ZColorPicker$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZColorPicker, defineCustomElement };
-
-//# sourceMappingURL=z-color-picker.js.map
+import{proxyCustomElement as t,HTMLElement as r,createEvent as e,h as o,Host as a,transformTag as s}from"@stencil/core/internal/client";import{a0 as i}from"./index2.js";import{a as l}from"./utils.js";const c={it:{"Select a color":"Seleziona un colore","Color swatch":"Campione di colore"},en:{"Select a color":"Select a color","Color swatch":"Color swatch"}},n=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.colorSelected=e(this,"colorSelected",7),this.lng="it",this.disableTransparent=!1,this.colorKeysByRow=[],this._colorButtons=[]}get colorButtons(){return this._colorButtons.length||(this._colorButtons=Array.from(this.host.shadowRoot.querySelectorAll("button"))),this._colorButtons}sortColorKeysByRow(){const t=Object.keys(i),r=[];for(let e=0;e<5;e++)for(let o=0;o<9;o++){const a=5*o+e;a<t.length&&r.push(t[a])}return r}moveFocusTo(t){this.colorButtons.forEach(((r,e)=>r.tabIndex=e===t?0:-1)),this.colorButtons[t].focus()}validateTransparentSelection(){this.disableTransparent&&"#FFFFFF00"===this.selectedColor&&(this.selectedColor="#333333")}emitColorSelected(){this.colorSelected.emit(this.selectedColor)}async setFocus(){this.colorButtons.forEach((t=>t.tabIndex=-1));const t=this.colorButtons.find((t=>"true"===t.ariaSelected))||this.colorButtons.find((t=>!t.disabled));t&&(t.tabIndex=0,setTimeout((()=>{t.focus()}),50),this.host.tabIndex=-1)}getNextIndexByKey(t,r,e){const o=Math.floor(t/9),a=t%9;let s=t;switch(r){case"ArrowRight":{const t=a+1;s=9*(t>=9?(o+1)%5:o)+t%9,s>=e&&(s=0);break}case"ArrowLeft":{const t=a-1;s=9*(t<0?(o-1+5)%5:o)+(t+9)%9,s>=e&&(s=e-1);break}case"ArrowDown":{let t=o+1,r=a;t>=5&&(t=0,r=(a+1)%9),s=9*t+r,s>=e&&(s=0);break}case"ArrowUp":{let t=o-1,r=a;t<0&&(t=4,r=(a-1+9)%9),s=9*t+r,s>=e&&(s=e-1);break}}return s}handleKeyDown(t){var r,e;const o=t.composedPath()[0];if(!o.dataset.color)return;const a=this.colorButtons.indexOf(o),s=this.colorButtons.length;if(a<0||!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(t.key))return;let i=a,l=0;do{i=this.getNextIndexByKey(i,t.key,s),l++}while(l<s&&(null===(r=this.colorButtons[i])||void 0===r?void 0:r.disabled));i!==a&&i>=0&&i<s&&!(null===(e=this.colorButtons[i])||void 0===e?void 0:e.disabled)&&(this.moveFocusTo(i),t.preventDefault(),t.stopPropagation())}handleBlur(t){l(this.host,t.relatedTarget)||(this.host.tabIndex=0,this.colorButtons.forEach((t=>t.tabIndex=-1)))}componentWillLoad(){this.colorKeysByRow=this.sortColorKeysByRow()}render(){return o(a,{key:"c834820884acc8c3bdf4571379cbe6da74e7ea89",role:"listbox","aria-label":this.htmlAriaLabel||c[this.lng]["Select a color"],tabIndex:0},this.colorKeysByRow.map((t=>{var r;return o("button",{class:"color-swatch","data-color":t,role:"option","aria-selected":(null===(r=this.selectedColor)||void 0===r?void 0:r.toUpperCase())===t.toUpperCase()?"true":"false",tabIndex:-1,onClick:()=>this.selectedColor=t,disabled:this.disableTransparent&&"#FFFFFF00"===t},o("div",{class:"color-swatch",role:"img","aria-roledescription":c[this.lng]["Color swatch"],"aria-label":i[t][this.lng],title:i[t][this.lng],style:{backgroundColor:t}}))})))}get host(){return this}static get watchers(){return{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}}static get style(){return':host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color="#FFFFFF00"]{position:relative}button[data-color="#FFFFFF00"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(     -45deg,     transparent 48%,     var(--border-color) 48%,     var(--border-color) 52%,     transparent 52%   );border-radius:var(--border-radius);content:""}button[aria-selected="true"]{box-shadow:0 0 0 1px var(--color-white),     0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color="#FFFFFF00"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color="#FFFFFF00"]:disabled .color-swatch{background-color:var(--color-disabled02)}'}},[1,"z-color-picker",{selectedColor:[1025,"selected-color"],lng:[1],htmlAriaLabel:[1,"html-aria-label"],disableTransparent:[4,"disable-transparent"],setFocus:[64]},[[0,"focus","setFocus"],[0,"keydown","handleKeyDown"],[0,"blur","handleBlur"]],{disableTransparent:[{validateTransparentSelection:0}],selectedColor:[{validateTransparentSelection:0},{emitColorSelected:0}]}]),d=n,h=function(){"undefined"!=typeof customElements&&["z-color-picker"].forEach((t=>{"z-color-picker"===t&&(customElements.get(s(t))||customElements.define(s(t),n))}))};export{d as ZColorPicker,h as defineCustomElement}