@nanahoshi/mona-ui 0.18.6 → 0.20.0

package/fesm2022/nanahoshi-mona-ui-check-box.mjs

@@ -8,7 +8,7 @@ import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 const checkboxInputThemeVariants = cva(`sr-only appearance-none outline-none peer`);
 const checkmarkThemeVariants = cva(`
         flex items-center justify-center
-        h-4.5 w-4.5 pl-0.25
+        h-4.5 w-4.5 ps-0.25
         cursor-pointer overflow-hidden
         ${themeControlSurfaceClasses}
         border border-input-border

package/fesm2022/nanahoshi-mona-ui-chip.mjs

@@ -5,11 +5,16 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 import { LucideCircleX } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { fromEvent, filter } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
+const CHIP_DEFAULT_MESSAGES = {
+    removeLabel: (label) => (label ? `Remove, ${label}` : "Remove, item")
+};
+
 /**
  * @description Apply to an `<ng-template>` directly inside `<mona-chip>` to render prefix content
  * (e.g., an avatar or icon) before the chip label or projected content. The template receives no context.
@@ -320,10 +325,12 @@ const chipThemeVariants = cva(`
 class ChipComponent {
     #destroyRef;
     #elementRef;
+    #i18n;
     #routerLink;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#elementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#routerLink = inject(RouterLink, { optional: true });
         this.ariaChecked = computed(() => {
             if (!this.toggleable()) {
@@ -388,6 +395,7 @@ class ChipComponent {
         ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
         this.isLink = computed(() => !!this.#routerLink, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("chip", CHIP_DEFAULT_MESSAGES);
         this.prefixTemplate = contentChild(ChipPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.role = computed(() => {
             if (this.toggleable()) {
@@ -532,7 +540,7 @@ class ChipComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? messages().removeLabel(label());\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
@@ -543,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.role]": "role()",
                         "[attr.aria-checked]": "ariaChecked()",
                         "[attr.aria-label]": "effectiveAriaLabel()"
-                    }, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n" }]
+                    }, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? messages().removeLabel(label());\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], contentClick: [{ type: i0.Output, args: ["contentClick"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removeTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeTabIndex", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /*
@@ -554,5 +562,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ChipComponent, ChipPrefixTemplateDirective };
+export { CHIP_DEFAULT_MESSAGES, ChipComponent, ChipPrefixTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-chip.mjs.map

package/fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs

@@ -22,9 +22,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 const circularProgressBarBaseThemeVariants = cva(`
         relative flex items-center justify-center select-none
         text-foreground
-        [&_svg]:absolute [&_svg]:top-1/2 [&_svg]:left-1/2
+        [&_svg]:absolute [&_svg]:inset-0
         [&_svg]:h-full [&_svg]:w-full
-        [&_svg]:-translate-x-1/2 [&_svg]:-translate-y-1/2
         [&_svg_circle]:origin-center
         [&_svg_circle]:-rotate-90
         [&_svg_circle]:transition-[stroke-dashoffset,stroke] duration-(--mona-motion-fast) ease-in

package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs

@@ -10,9 +10,24 @@ import { DropdownButtonComponent, DropdownButtonItemComponent } from '@nanahoshi
 import { NumericTextBoxComponent, NumericTextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/numeric-text-box';
 import { SliderComponent } from '@nanahoshi/mona-ui/slider';
 import { TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Subject, fromEvent, switchMap, takeUntil, distinctUntilChanged } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
+const COLOR_GRADIENT_DEFAULT_MESSAGES = {
+    apply: "Apply",
+    cancel: "Cancel",
+    clearColor: "Clear color",
+    copyAsHex: "Copy as HEX",
+    copyAsRgb: "Copy as RGB",
+    copyColor: "Copy color",
+    currentColor: "Current color",
+    previousColor: "Previous color",
+    saturationAndValue: "Color saturation and value",
+    saturationAndValueText: (saturation, value) => `Saturation ${saturation}%, Value ${value}%`,
+    switchColorMode: "Switch color mode"
+};
+
 const colorGradientBaseThemeVariants = cva(`
         flex flex-col min-w-64
         gap-2 p-2
@@ -86,6 +101,7 @@ const colorGradientSliderHandleThemeVariants = cva(`
 class ColorGradientComponent {
     #clipboard;
     #destroyRef;
+    #i18n;
     #injector;
     #valueChange$;
     #viewReady;
@@ -95,6 +111,7 @@ class ColorGradientComponent {
     constructor() {
         this.#clipboard = inject(Clipboard);
         this.#destroyRef = inject(DestroyRef);
+        this.#i18n = inject(MonaI18nService);
         this.#injector = inject(Injector);
         this.#valueChange$ = new Subject();
         this.#viewReady = signal(false, /* @ts-ignore */
@@ -145,12 +162,12 @@ class ColorGradientComponent {
             {
                 type: "current",
                 color: this.selectedColor(),
-                title: "Current color"
+                title: this.messages().currentColor
             },
             {
                 type: "last",
                 color: this.lastSelectedColor(),
-                title: "Previous color",
+                title: this.messages().previousColor,
                 onClick: () => this.onResetColorClick()
             }
         ], /* @ts-ignore */
@@ -200,6 +217,7 @@ class ColorGradientComponent {
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.lastSelectedColor = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastSelectedColor" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("colorGradient", COLOR_GRADIENT_DEFAULT_MESSAGES);
         this.rgb = signal({ r: 255, g: 255, b: 255 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rgb" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
@@ -766,7 +784,7 @@ class ColorGradientComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"'Color saturation and value'\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    aria-label=\"Switch color mode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        label=\"Copy as HEX\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        label=\"Copy as RGB\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-r border-r-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 me-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
@@ -787,7 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-disabled]": "disabled()",
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null"
-                    }, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"'Color saturation and value'\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 mr-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    aria-label=\"Switch color mode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" aria-label=\"Copy color\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        label=\"Copy as HEX\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        label=\"Copy as RGB\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">Apply</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">Cancel</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-r border-r-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n" }]
+                    }, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 me-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { hsvHandle: [{ type: i0.ViewChild, args: ["hsvPointer", { isSignal: true }] }], hsvRectangle: [{ type: i0.ViewChild, args: ["hsvRectangle", { isSignal: true }] }], apply: [{ type: i0.Output, args: ["apply"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], showHexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHexInput", required: false }] }], showColorInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColorInputs", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*
@@ -798,5 +816,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ColorGradientComponent };
+export { COLOR_GRADIENT_DEFAULT_MESSAGES, ColorGradientComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-color-gradient.mjs.map

package/fesm2022/nanahoshi-mona-ui-color-palette.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, computed, signal, input, output, model, Component } from '@angular/core';
+import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { count } from '@mirei/ts-collections';
 import { cva } from 'class-variance-authority';
 
@@ -41,6 +42,11 @@ const colorPaletteItemThemeVariants = cva(`
     }
 });
 
+const COLOR_PALETTE_DEFAULT_MESSAGES = {
+    color: (color) => `Color ${color}`,
+    colorPalette: "Color palette"
+};
+
 const flatColorScheme = {
     name: "flat",
     columns: 20,
@@ -668,11 +674,26 @@ const websafeColorScheme = {
 
 class ColorPaletteComponent {
     constructor() {
+        this.#direction = injectComponentDirection();
         this.#elementRef = inject((ElementRef));
+        this.#i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+        this.activeColorIndex = computed(() => this.focusedColorIndex() === -1 ? 0 : this.focusedColorIndex(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeColorIndex" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
             return colorPaletteBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.colorRows = computed(() => {
+            const { colors, columns } = this.colorScheme();
+            const rows = [];
+            for (let i = 0; i < colors.length; i += columns) {
+                rows.push(colors.slice(i, i + columns));
+            }
+            return rows;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorRows" }] : /* istanbul ignore next */ []));
         this.colorScheme = computed(() => {
             const palette = this.palette();
             const columns = this.columns();
@@ -693,26 +714,21 @@ class ColorPaletteComponent {
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colorScheme" }] : /* istanbul ignore next */ []));
+        this.focusedColorIndex = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedColorIndex" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("colorPalette", COLOR_PALETTE_DEFAULT_MESSAGES);
         this.paletteItemClasses = computed(() => {
             const rounded = this.rounded();
             return colorPaletteItemThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "paletteItemClasses" }] : /* istanbul ignore next */ []));
-        this.colorRows = computed(() => {
-            const { colors, columns } = this.colorScheme();
-            const rows = [];
-            for (let i = 0; i < colors.length; i += columns) {
-                rows.push(colors.slice(i, i + columns));
-            }
-            return rows;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "colorRows" }] : /* istanbul ignore next */ []));
-        this.focusedColorIndex = signal(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "focusedColorIndex" }] : /* istanbul ignore next */ []));
-        this.activeColorIndex = computed(() => this.focusedColorIndex() === -1 ? 0 : this.focusedColorIndex(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeColorIndex" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible label for the color palette grid.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
         /**
          * @description The number of columns in the color palette grid.
          * Only applicable when using a custom palette.
@@ -747,12 +763,6 @@ class ColorPaletteComponent {
          */
         this.readonly = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Border-radius preset applied to the color palette items.
-         * @default "none"
-         */
-        this.rounded = input("none", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets whether the color palette is required. When bound to a signal form field via `[formField]`,
          * this is written by the `FormField` directive.
@@ -760,6 +770,12 @@ class ColorPaletteComponent {
          */
         this.required = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the color palette items.
+         * @default "none"
+         */
+        this.rounded = input("none", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
         /**
          * @description The size of each tile in the color palette grid.
          * @default 18
@@ -785,7 +801,9 @@ class ColorPaletteComponent {
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
+    #direction;
     #elementRef;
+    #i18n;
     focusColorTile(index) {
         setTimeout(() => {
             const colorTiles = this.#elementRef.nativeElement.querySelectorAll("[data-color-index]");
@@ -815,14 +833,17 @@ class ColorPaletteComponent {
         }
         const colors = this.colorScheme().colors;
         const columns = this.colorScheme().columns;
+        const isRtl = this.isRtl();
+        const prevKey = isRtl ? "ArrowRight" : "ArrowLeft";
+        const nextKey = isRtl ? "ArrowLeft" : "ArrowRight";
         let newIndex = colorIndex;
         let handled = false;
         switch (event.key) {
-            case "ArrowLeft":
+            case prevKey:
                 newIndex = Math.max(0, colorIndex - 1);
                 handled = true;
                 break;
-            case "ArrowRight":
+            case nextKey:
                 newIndex = Math.min(colors.length - 1, colorIndex + 1);
                 handled = true;
                 break;
@@ -868,7 +889,7 @@ class ColorPaletteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPaletteComponent, isStandalone: true, selector: "mona-color-palette", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tileSize: { classPropertyName: "tileSize", publicName: "tileSize", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "style.grid-template-columns": "'repeat('+colorScheme().columns+', minmax('+tileSize()+'px, 1fr))'", "style.grid-auto-rows": "tileSize()+'px'", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly()", "attr.data-required": "required() || null", "attr.role": "'grid'", "attr.aria-label": "'Color palette'", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()" } }, ngImport: i0, template: "@for (row of colorRows(); track $index; let rowIndex = $index) {\n    <div class=\"contents\" role=\"row\">\n        @for (color of row; track $index; let colIndex = $index) {\n            @let i = rowIndex * colorScheme().columns + colIndex;\n            <div\n                [class]=\"paletteItemClasses()\"\n                [attr.data-selected]=\"color === value()\"\n                [attr.data-color-index]=\"i\"\n                [attr.data-readonly]=\"readonly()\"\n                [attr.tabindex]=\"disabled() ? -1 : i === activeColorIndex() ? 0 : -1\"\n                [attr.role]=\"'gridcell'\"\n                [attr.aria-label]=\"'Color ' + color\"\n                [attr.aria-disabled]=\"disabled()\"\n                [attr.aria-readonly]=\"readonly()\"\n                [attr.aria-selected]=\"color === value()\"\n                [style.background-color]=\"color\"\n                (click)=\"onColorSelect(color)\"\n                (keydown)=\"onKeyDown($event, i)\"\n                (focus)=\"onColorFocus(i)\"\n                (blur)=\"onColorBlur()\"></div>\n        }\n    </div>\n}\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPaletteComponent, isStandalone: true, selector: "mona-color-palette", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tileSize: { classPropertyName: "tileSize", publicName: "tileSize", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "style.grid-template-columns": "'repeat('+colorScheme().columns+', minmax('+tileSize()+'px, 1fr))'", "style.grid-auto-rows": "tileSize()+'px'", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly()", "attr.data-required": "required() || null", "attr.role": "'grid'", "attr.aria-label": "ariaLabel() || messages().colorPalette", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()" } }, ngImport: i0, template: "@for (row of colorRows(); track $index; let rowIndex = $index) {\n    <div class=\"contents\" role=\"row\">\n        @for (color of row; track $index; let colIndex = $index) {\n            @let i = rowIndex * colorScheme().columns + colIndex;\n            <div\n                [class]=\"paletteItemClasses()\"\n                [attr.data-selected]=\"color === value()\"\n                [attr.data-color-index]=\"i\"\n                [attr.data-readonly]=\"readonly()\"\n                [attr.tabindex]=\"disabled() ? -1 : i === activeColorIndex() ? 0 : -1\"\n                [attr.role]=\"'gridcell'\"\n                [attr.aria-label]=\"messages().color(color)\"\n                [attr.aria-disabled]=\"disabled()\"\n                [attr.aria-readonly]=\"readonly()\"\n                [attr.aria-selected]=\"color === value()\"\n                [style.background-color]=\"color\"\n                (click)=\"onColorSelect(color)\"\n                (keydown)=\"onKeyDown($event, i)\"\n                (focus)=\"onColorFocus(i)\"\n                (blur)=\"onColorBlur()\"></div>\n        }\n    </div>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
@@ -881,13 +902,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-readonly]": "readonly()",
                         "[attr.data-required]": "required() || null",
                         "[attr.role]": "'grid'",
-                        "[attr.aria-label]": "'Color palette'",
+                        "[attr.aria-label]": "ariaLabel() || messages().colorPalette",
                         "[attr.aria-disabled]": "disabled()",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.aria-readonly]": "readonly()",
                         "[attr.aria-required]": "required()"
-                    }, template: "@for (row of colorRows(); track $index; let rowIndex = $index) {\n    <div class=\"contents\" role=\"row\">\n        @for (color of row; track $index; let colIndex = $index) {\n            @let i = rowIndex * colorScheme().columns + colIndex;\n            <div\n                [class]=\"paletteItemClasses()\"\n                [attr.data-selected]=\"color === value()\"\n                [attr.data-color-index]=\"i\"\n                [attr.data-readonly]=\"readonly()\"\n                [attr.tabindex]=\"disabled() ? -1 : i === activeColorIndex() ? 0 : -1\"\n                [attr.role]=\"'gridcell'\"\n                [attr.aria-label]=\"'Color ' + color\"\n                [attr.aria-disabled]=\"disabled()\"\n                [attr.aria-readonly]=\"readonly()\"\n                [attr.aria-selected]=\"color === value()\"\n                [style.background-color]=\"color\"\n                (click)=\"onColorSelect(color)\"\n                (keydown)=\"onKeyDown($event, i)\"\n                (focus)=\"onColorFocus(i)\"\n                (blur)=\"onColorBlur()\"></div>\n        }\n    </div>\n}\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tileSize", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, template: "@for (row of colorRows(); track $index; let rowIndex = $index) {\n    <div class=\"contents\" role=\"row\">\n        @for (color of row; track $index; let colIndex = $index) {\n            @let i = rowIndex * colorScheme().columns + colIndex;\n            <div\n                [class]=\"paletteItemClasses()\"\n                [attr.data-selected]=\"color === value()\"\n                [attr.data-color-index]=\"i\"\n                [attr.data-readonly]=\"readonly()\"\n                [attr.tabindex]=\"disabled() ? -1 : i === activeColorIndex() ? 0 : -1\"\n                [attr.role]=\"'gridcell'\"\n                [attr.aria-label]=\"messages().color(color)\"\n                [attr.aria-disabled]=\"disabled()\"\n                [attr.aria-readonly]=\"readonly()\"\n                [attr.aria-selected]=\"color === value()\"\n                [style.background-color]=\"color\"\n                (click)=\"onColorSelect(color)\"\n                (keydown)=\"onKeyDown($event, i)\"\n                (focus)=\"onColorFocus(i)\"\n                (blur)=\"onColorBlur()\"></div>\n        }\n    </div>\n}\n" }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tileSize", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/color-palette
@@ -897,5 +918,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ColorPaletteComponent };
+export { COLOR_PALETTE_DEFAULT_MESSAGES, ColorPaletteComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-color-palette.mjs.map