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

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

@@ -0,0 +1,234 @@
+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: '4fabea9e988ceec44c05e5885aa4ad0eb0ad5076', 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

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

@@ -0,0 +1 @@
+{"file":"z-color-picker.js","mappings":"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","names":["ZColorPicker"],"sources":["src/components/z-color-picker/styles.css?tag=z-color-picker&encapsulation=shadow","src/components/z-color-picker/index.tsx"],"sourcesContent":[":host {\n  display: grid;\n  width: fit-content;\n  padding: calc(var(--space-unit) * 2);\n  background: var(--color-surface01);\n  gap: var(--space-unit);\n  grid-template-columns: repeat(9, calc(var(--space-unit) * 3));\n  grid-template-rows: repeat(5, calc(var(--space-unit) * 3));\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  --border-color: var(--color-surface05);\n\n  padding: 0;\n  border: none;\n  appearance: none;\n  background: none;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\nbutton[data-color=\"#FFFFFF00\"] {\n  position: relative;\n}\n\n/* draw a diagonal line from top right corner */\nbutton[data-color=\"#FFFFFF00\"]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );\n  border-radius: var(--border-radius);\n  content: \"\";\n}\n\nbutton[aria-selected=\"true\"] {\n  box-shadow:\n    0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary);\n}\n\nbutton:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton .color-swatch {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--border-color);\n  border-radius: var(--border-radius);\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled {\n  --border-color: var(--color-disabled01-icon);\n\n  cursor: not-allowed;\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled .color-swatch {\n  background-color: var(--color-disabled02);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst LOCALES = {\n  it: {\n    \"Select a color\": \"Seleziona un colore\",\n    \"Color swatch\": \"Campione di colore\",\n  },\n  en: {\n    \"Select a color\": \"Select a color\",\n    \"Color swatch\": \"Color swatch\",\n  },\n} as const;\n\n/** Number of colors in each group (column) of the grid. */\nconst COLOR_GROUP_SIZE = 5;\n\n/** Number of color groups (columns) in the grid. */\nconst COLOR_GROUPS = 9;\n\n/**\n * Color picker component.\n * This component allows the user to pick a color from a predefined set.\n */\n@Component({\n  tag: \"z-color-picker\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZColorPicker {\n  @Element() host: HTMLZColorPickerElement;\n\n  /**\n   * The selected color to highlight.\n   */\n  @Prop({mutable: true})\n  selectedColor: ColorPickerPalette;\n\n  /**\n   * The language for the aria labels inside the color picker.\n   */\n  @Prop()\n  lng: \"it\" | \"en\" = \"it\";\n\n  /**\n   * The aria-label for the color picker, e.g. \"Select a background color for the label\".\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /**\n   * Disables the transparent color option.\n   * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\").\n   */\n  @Prop()\n  disableTransparent = false;\n\n  /**\n   * Event emitted when a color is selected.\n   */\n  @Event()\n  colorSelected: EventEmitter<ColorPickerPalette>;\n\n  /**\n   * The color keys arranged in row-major order for rendering and navigation.\n   */\n  private colorKeysByRow: ColorPickerPalette[] = [];\n\n  private _colorButtons: HTMLButtonElement[] = [];\n\n  private get colorButtons(): HTMLButtonElement[] {\n    if (!this._colorButtons.length) {\n      this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll(\"button\")) as HTMLButtonElement[];\n    }\n\n    return this._colorButtons;\n  }\n\n  /**\n   * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).\n   * This ensures button indices in the DOM match their visual position in the grid.\n   */\n  private sortColorKeysByRow(): ColorPickerPalette[] {\n    const allKeys = Object.keys(ColorPickerPalette) as ColorPickerPalette[];\n    const ordered: ColorPickerPalette[] = [];\n\n    // Iterate through visual positions (row by row, left to right)\n    for (let row = 0; row < COLOR_GROUP_SIZE; row++) {\n      for (let col = 0; col < COLOR_GROUPS; col++) {\n        const columnMajorIndex = col * COLOR_GROUP_SIZE + row;\n        if (columnMajorIndex < allKeys.length) {\n          ordered.push(allKeys[columnMajorIndex]);\n        }\n      }\n    }\n\n    return ordered;\n  }\n\n  /** Move focus to the specified color button by index. */\n  private moveFocusTo(index: number): void {\n    // Reset tabindex of other buttons and set tabindex to 0 on selected button\n    this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));\n    this.colorButtons[index].focus();\n  }\n\n  @Watch(\"disableTransparent\")\n  @Watch(\"selectedColor\")\n  validateTransparentSelection(): void {\n    if (this.disableTransparent && this.selectedColor === \"#FFFFFF00\") {\n      this.selectedColor = \"#333333\"; // Default to dark gray 2 if transparent is disabled and currently selected\n    }\n  }\n\n  @Watch(\"selectedColor\")\n  emitColorSelected(): void {\n    this.colorSelected.emit(this.selectedColor);\n  }\n\n  /**\n   * Focuses the selected or first enabled color button and makes the container non-tabbable.\n   */\n  @Listen(\"focus\")\n  @Method()\n  async setFocus(): Promise<void> {\n    // Reset tabindex of all buttons\n    this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    const firstSelectedOrEnabled =\n      this.colorButtons.find((btn) => btn.ariaSelected === \"true\") || this.colorButtons.find((btn) => !btn.disabled);\n    if (!firstSelectedOrEnabled) {\n      return;\n    }\n\n    firstSelectedOrEnabled.tabIndex = 0;\n    setTimeout(() => {\n      firstSelectedOrEnabled.focus();\n    }, 50);\n    // Set container as non-tabbable\n    this.host.tabIndex = -1;\n  }\n\n  /**\n   * Compute next index in row-major grid according to keyboard direction.\n   */\n  private getNextIndexByKey(currentIndex: number, key: string, totalColors: number): number {\n    const row = Math.floor(currentIndex / COLOR_GROUPS);\n    const col = currentIndex % COLOR_GROUPS;\n    let newIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowRight\": {\n        const newCol = col + 1;\n        const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowLeft\": {\n        const newCol = col - 1;\n        const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n      case \"ArrowDown\": {\n        let newRow = row + 1;\n        let newCol = col;\n        if (newRow >= COLOR_GROUP_SIZE) {\n          // Wrap to first item of next column\n          newRow = 0;\n          newCol = (col + 1) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowUp\": {\n        let newRow = row - 1;\n        let newCol = col;\n        if (newRow < 0) {\n          // Wrap to last item of previous column\n          newRow = COLOR_GROUP_SIZE - 1;\n          newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n    }\n\n    return newIndex;\n  }\n\n  /**\n   * Handle keyboard navigation within the color picker.\n   * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!target.dataset.color) {\n      return;\n    }\n\n    const currentIndex = this.colorButtons.indexOf(target as HTMLButtonElement);\n    const totalColors = this.colorButtons.length;\n    if (currentIndex < 0 || ![\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) {\n      return;\n    }\n\n    let newIndex = currentIndex;\n    let attempts = 0;\n\n    do {\n      newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);\n      attempts++;\n    } while (attempts < totalColors && this.colorButtons[newIndex]?.disabled);\n\n    if (\n      newIndex !== currentIndex &&\n      newIndex >= 0 &&\n      newIndex < totalColors &&\n      !this.colorButtons[newIndex]?.disabled\n    ) {\n      this.moveFocusTo(newIndex);\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.\n   */\n  @Listen(\"blur\")\n  handleBlur(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (!containsElement(this.host, relatedTarget)) {\n      this.host.tabIndex = 0;\n      this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    }\n  }\n\n  componentWillLoad(): void {\n    this.colorKeysByRow = this.sortColorKeysByRow();\n  }\n\n  render(): HTMLZColorPickerElement {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-label={this.htmlAriaLabel || LOCALES[this.lng][\"Select a color\"]}\n        tabIndex={0}\n      >\n        {this.colorKeysByRow.map((colorKey: ColorPickerPalette) => (\n          <button\n            class=\"color-swatch\"\n            data-color={colorKey}\n            role=\"option\"\n            aria-selected={this.selectedColor?.toUpperCase() === colorKey.toUpperCase() ? \"true\" : \"false\"}\n            tabIndex={-1}\n            onClick={() => (this.selectedColor = colorKey)}\n            disabled={this.disableTransparent && colorKey === \"#FFFFFF00\"}\n          >\n            <div\n              class=\"color-swatch\"\n              role=\"img\"\n              aria-roledescription={LOCALES[this.lng][\"Color swatch\"]}\n              aria-label={ColorPickerPalette[colorKey][this.lng]}\n              title={ColorPickerPalette[colorKey][this.lng]}\n              style={{backgroundColor: colorKey}}\n            ></div>\n          </button>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"version":3}