ngwr 13.0.1 → 14.0.0

package/fesm2022/ngwr-color-picker.mjs

@@ -1,7 +1,8 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, signal, computed, effect, ViewEncapsulation, Component, inject, ElementRef, ViewContainerRef, DestroyRef, Directive } from '@angular/core';
+import { input, model, output, signal, computed, inject, effect, ViewEncapsulation, Component, ElementRef, ViewContainerRef, DestroyRef, Directive } from '@angular/core';
 import { useFormFieldAria, WR_FORM_FIELD } from 'ngwr/form';
 import { useI18nFormatter, readI18nText } from 'ngwr/i18n';
 import { WrSegmented } from 'ngwr/segmented';
@@ -436,6 +437,18 @@ class WrColorPicker {
         return `${r}, ${g}, ${b}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rgbCss" }] : /* istanbul ignore next */ []));
+    /**
+     * Ambient reading direction, for the two SLIDERS only — see `updateFromEvent`
+     * for why the SV canvas is not in that set.
+     *
+     * Optional so a bare `TestBed` — or any consumer that never set a direction —
+     * needs no provider; `Directionality` is root-provided, so `null` only ever
+     * means "nobody asked", which is LTR. Read inside the handlers rather than
+     * cached: the thumbs are placed with `inset-inline-start`, so the tracks mirror
+     * from CSS alone and a runtime flip needs no subscription to
+     * `Directionality.change`.
+     */
+    dir = inject(Directionality, { optional: true });
     /** Thumb positions in % for each surface. */
     svThumbX = computed(() => this.s() * 100, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "svThumbX" }] : /* istanbul ignore next */ []));
@@ -466,11 +479,38 @@ class WrColorPicker {
     ...(ngDevMode ? [{ debugName: "resolvedAreaLabel" }] : /* istanbul ignore next */ []));
     resolvedHueLabel = readI18nText('colorPicker.hue', 'Hue');
     resolvedAlphaLabel = readI18nText('colorPicker.alpha', 'Opacity');
-    tabOptions = [
-        { value: 'hex', label: 'HEX' },
-        { value: 'rgb', label: 'RGB' },
-        { value: 'hsl', label: 'HSL' },
-    ];
+    /**
+     * Every visible word in this component that is not a slider name.
+     *
+     * The format strip and the nine channel captions were literals — three in
+     * TypeScript, the rest in the template — beside a `colorPicker` catalog
+     * section that already existed and held the slider names. So the section was
+     * there and these had simply not been put in it, which is why a fully Russian
+     * picker still read `HEX RGB HSL` over `R G B`. Each caption is one string
+     * INCLUDING its `%`, because a locale that spaces the sign differently has to
+     * move the letter and the sign together.
+     *
+     * Signals, not strings: they follow a locale switch, and a catalog that lands
+     * a microtask after the first change-detection pass.
+     */
+    channelHexLabel = readI18nText('colorPicker.channelHex', 'HEX');
+    channelRedLabel = readI18nText('colorPicker.channelRed', 'R');
+    channelGreenLabel = readI18nText('colorPicker.channelGreen', 'G');
+    channelBlueLabel = readI18nText('colorPicker.channelBlue', 'B');
+    channelHueLabel = readI18nText('colorPicker.channelHue', 'H');
+    channelSaturationLabel = readI18nText('colorPicker.channelSaturation', 'S%');
+    channelLightnessLabel = readI18nText('colorPicker.channelLightness', 'L%');
+    channelAlphaLabel = readI18nText('colorPicker.channelAlpha', 'A%');
+    formatHexLabel = readI18nText('colorPicker.formatHex', 'HEX');
+    formatRgbLabel = readI18nText('colorPicker.formatRgb', 'RGB');
+    formatHslLabel = readI18nText('colorPicker.formatHsl', 'HSL');
+    /** A `computed`, because `WrSegmentedOption.label` is a plain string. */
+    tabOptions = computed(() => [
+        { value: 'hex', label: this.formatHexLabel() },
+        { value: 'rgb', label: this.formatRgbLabel() },
+        { value: 'hsl', label: this.formatHslLabel() },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabOptions" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-color-picker'];
         if (this.alpha())
@@ -553,20 +593,29 @@ class WrColorPicker {
     /**
      * Hue and alpha are real one-value sliders, so they take the APG slider keys —
      * the same set `wr-knob` and `wr-slider` implement, including Home / End.
+     *
+     * The horizontal arrows name a SIDE of the track and so follow the reading
+     * direction, exactly as `wr-slider`'s do; the vertical pair names a value's
+     * direction and never mirrors.
      */
     onSliderKeydown(event, surface) {
         if (this.disabled() || this.readonly())
             return;
         const step = event.shiftKey ? KEY_STEP_COARSE : KEY_STEP;
+        const inline = this.dir?.value === 'rtl' ? -step : step;
         const max = surface === 'hue' ? 360 : 100;
         const current = surface === 'hue' ? this.h() : this.a() * 100;
         let next;
         switch (event.key) {
             case 'ArrowRight':
+                next = current + inline;
+                break;
             case 'ArrowUp':
                 next = current + step;
                 break;
             case 'ArrowLeft':
+                next = current - inline;
+                break;
             case 'ArrowDown':
                 next = current - step;
                 break;
@@ -591,6 +640,10 @@ class WrColorPicker {
      * The SV canvas is two axes at once, so the keys follow the picture: left and
      * right run along saturation, up and down along brightness — the directions
      * the thumb visibly moves. Shift takes ten percent at a time.
+     *
+     * Not mirrored under `dir="rtl"`, unlike the two sliders above, and for the
+     * reason given on `fraction()`: the canvas is a picture rather than a track, so
+     * its gradient does not flip and neither may the keys that walk it.
      */
     onAreaKeydown(event) {
         if (this.disabled() || this.readonly())
@@ -619,9 +672,34 @@ class WrColorPicker {
     onSurfaceBlur() {
         this.touch.emit();
     }
+    /**
+     * The pointer's position along a surface, as a 0–1 fraction.
+     *
+     * Measured from whichever edge the surface STARTS at, and the two surfaces do
+     * not agree on what that means — deliberately.
+     *
+     * The hue and alpha bars are one-value tracks with `role="slider"`, the same
+     * widget `wr-slider` is, so they mirror: their thumbs are placed with
+     * `inset-inline-start` and their gradients are flipped by a `[dir='rtl']` rule,
+     * which makes the reader's start the physical right edge under `dir="rtl"`.
+     * Opacity 100% used to sit at the physical right in both directions, i.e. at
+     * the reader's START in RTL, while the format strip in the same panel mirrored
+     * correctly.
+     *
+     * The SV canvas does NOT mirror, and stays measured from `rect.left`. It is a
+     * two-axis colour FIELD, not a track — the component says so itself by giving
+     * it `role="group"` rather than `role="slider"`, because it carries two values
+     * and a slider has one. A picture with no start and no end has nothing to
+     * mirror, and flipping it would only move white to the other side of an image
+     * every colour picker in the world draws the same way.
+     */
+    fraction(event, rect, surface) {
+        const offset = surface !== 'sv' && this.dir?.value === 'rtl' ? rect.right - event.clientX : event.clientX - rect.left;
+        return clamp(offset / rect.width, 0, 1);
+    }
     updateFromEvent(event, target, surface) {
         const rect = target.getBoundingClientRect();
-        const x = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        const x = this.fraction(event, rect, surface);
         if (surface === 'sv') {
             const y = clamp((event.clientY - rect.top) / rect.height, 0, 1);
             this.s.set(x);
@@ -721,7 +799,7 @@ class WrColorPicker {
         this.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrColorPicker, isStandalone: true, selector: "wr-color-picker", inputs: { alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()", "style.--wr-color-picker-hue": "hueCss()", "style.--wr-color-picker-rgb": "rgbCss()" } }, providers: [{ provide: WR_FORM_FIELD, useValue: null }], ngImport: i0, template: "<!--\n  `role=\"group\"` rather than `role=\"slider\"`, because this surface holds TWO\n  values and a slider has one `aria-valuenow`; and rather than\n  `role=\"application\"`, which would switch the reader out of its own browse mode\n  for the whole subtree \u2014 the call `wr-image-cropper` already made. A group has\n  no value of its own, so the two percentages ride in its accessible name, which\n  is where a reader querying the focused element finds them.\n-->\n<div\n  class=\"wr-color-picker__sv\"\n  role=\"group\"\n  [attr.aria-label]=\"resolvedAreaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'sv')\"\n  (keydown)=\"onAreaKeydown($event)\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div\n  class=\"wr-color-picker__slider wr-color-picker__slider--hue\"\n  role=\"slider\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"360\"\n  [attr.aria-label]=\"resolvedHueLabel()\"\n  [attr.aria-valuenow]=\"hueValue()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'hue')\"\n  (keydown)=\"onSliderKeydown($event, 'hue')\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div\n    class=\"wr-color-picker__slider wr-color-picker__slider--alpha\"\n    role=\"slider\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"resolvedAlphaLabel()\"\n    [attr.aria-valuenow]=\"alphaPercent()\"\n    [attr.aria-valuetext]=\"`${alphaPercent()}%`\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.aria-readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (pointerdown)=\"onPointerDown($event, 'alpha')\"\n    (keydown)=\"onSliderKeydown($event, 'alpha')\"\n    (blur)=\"onSurfaceBlur()\"\n  >\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrSegmented, selector: "wr-segmented", inputs: ["options", "value", "disabled", "readonly", "size"], outputs: ["valueChange", "touch"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrColorPicker, isStandalone: true, selector: "wr-color-picker", inputs: { alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()", "style.--wr-color-picker-hue": "hueCss()", "style.--wr-color-picker-rgb": "rgbCss()" } }, providers: [{ provide: WR_FORM_FIELD, useValue: null }], ngImport: i0, template: "<!--\n  `role=\"group\"` rather than `role=\"slider\"`, because this surface holds TWO\n  values and a slider has one `aria-valuenow`; and rather than\n  `role=\"application\"`, which would switch the reader out of its own browse mode\n  for the whole subtree \u2014 the call `wr-image-cropper` already made. A group has\n  no value of its own, so the two percentages ride in its accessible name, which\n  is where a reader querying the focused element finds them.\n-->\n<div\n  class=\"wr-color-picker__sv\"\n  role=\"group\"\n  [attr.aria-label]=\"resolvedAreaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'sv')\"\n  (keydown)=\"onAreaKeydown($event)\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div\n  class=\"wr-color-picker__slider wr-color-picker__slider--hue\"\n  role=\"slider\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"360\"\n  [attr.aria-label]=\"resolvedHueLabel()\"\n  [attr.aria-valuenow]=\"hueValue()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'hue')\"\n  (keydown)=\"onSliderKeydown($event, 'hue')\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <!--\n    `inset-inline-start`, not `left`: this is a one-value track, so it mirrors\n    under `dir=\"rtl\"` the way `wr-slider` does. The SV thumb above keeps `left` \u2014\n    the canvas is a picture and does not flip.\n  -->\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.inset-inline-start.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div\n    class=\"wr-color-picker__slider wr-color-picker__slider--alpha\"\n    role=\"slider\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"resolvedAlphaLabel()\"\n    [attr.aria-valuenow]=\"alphaPercent()\"\n    [attr.aria-valuetext]=\"`${alphaPercent()}%`\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.aria-readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (pointerdown)=\"onPointerDown($event, 'alpha')\"\n    (keydown)=\"onSliderKeydown($event, 'alpha')\"\n    (blur)=\"onSurfaceBlur()\"\n  >\n    <span\n      class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\"\n      [style.inset-inline-start.%]=\"alphaThumbX()\"\n    ></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions()\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelHexLabel() }}</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelRedLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelGreenLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelBlueLabel() }}</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">{{ channelAlphaLabel() }}</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelHueLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelSaturationLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelLightnessLabel() }}</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">{{ channelAlphaLabel() }}</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrSegmented, selector: "wr-segmented", inputs: ["options", "value", "disabled", "readonly", "size"], outputs: ["valueChange", "touch"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrColorPicker, decorators: [{
             type: Component,
@@ -729,7 +807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class]': 'classes()',
                         '[style.--wr-color-picker-hue]': 'hueCss()',
                         '[style.--wr-color-picker-rgb]': 'rgbCss()',
-                    }, providers: [{ provide: WR_FORM_FIELD, useValue: null }], imports: [DecimalPipe, WrSegmented], template: "<!--\n  `role=\"group\"` rather than `role=\"slider\"`, because this surface holds TWO\n  values and a slider has one `aria-valuenow`; and rather than\n  `role=\"application\"`, which would switch the reader out of its own browse mode\n  for the whole subtree \u2014 the call `wr-image-cropper` already made. A group has\n  no value of its own, so the two percentages ride in its accessible name, which\n  is where a reader querying the focused element finds them.\n-->\n<div\n  class=\"wr-color-picker__sv\"\n  role=\"group\"\n  [attr.aria-label]=\"resolvedAreaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'sv')\"\n  (keydown)=\"onAreaKeydown($event)\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div\n  class=\"wr-color-picker__slider wr-color-picker__slider--hue\"\n  role=\"slider\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"360\"\n  [attr.aria-label]=\"resolvedHueLabel()\"\n  [attr.aria-valuenow]=\"hueValue()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'hue')\"\n  (keydown)=\"onSliderKeydown($event, 'hue')\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div\n    class=\"wr-color-picker__slider wr-color-picker__slider--alpha\"\n    role=\"slider\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"resolvedAlphaLabel()\"\n    [attr.aria-valuenow]=\"alphaPercent()\"\n    [attr.aria-valuetext]=\"`${alphaPercent()}%`\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.aria-readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (pointerdown)=\"onPointerDown($event, 'alpha')\"\n    (keydown)=\"onSliderKeydown($event, 'alpha')\"\n    (blur)=\"onSurfaceBlur()\"\n  >\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n" }]
+                    }, providers: [{ provide: WR_FORM_FIELD, useValue: null }], imports: [DecimalPipe, WrSegmented], template: "<!--\n  `role=\"group\"` rather than `role=\"slider\"`, because this surface holds TWO\n  values and a slider has one `aria-valuenow`; and rather than\n  `role=\"application\"`, which would switch the reader out of its own browse mode\n  for the whole subtree \u2014 the call `wr-image-cropper` already made. A group has\n  no value of its own, so the two percentages ride in its accessible name, which\n  is where a reader querying the focused element finds them.\n-->\n<div\n  class=\"wr-color-picker__sv\"\n  role=\"group\"\n  [attr.aria-label]=\"resolvedAreaLabel()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'sv')\"\n  (keydown)=\"onAreaKeydown($event)\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div\n  class=\"wr-color-picker__slider wr-color-picker__slider--hue\"\n  role=\"slider\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"360\"\n  [attr.aria-label]=\"resolvedHueLabel()\"\n  [attr.aria-valuenow]=\"hueValue()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event, 'hue')\"\n  (keydown)=\"onSliderKeydown($event, 'hue')\"\n  (blur)=\"onSurfaceBlur()\"\n>\n  <!--\n    `inset-inline-start`, not `left`: this is a one-value track, so it mirrors\n    under `dir=\"rtl\"` the way `wr-slider` does. The SV thumb above keeps `left` \u2014\n    the canvas is a picture and does not flip.\n  -->\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.inset-inline-start.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div\n    class=\"wr-color-picker__slider wr-color-picker__slider--alpha\"\n    role=\"slider\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-label]=\"resolvedAlphaLabel()\"\n    [attr.aria-valuenow]=\"alphaPercent()\"\n    [attr.aria-valuetext]=\"`${alphaPercent()}%`\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.aria-readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n    [attr.aria-describedby]=\"fieldAria.describedBy()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (pointerdown)=\"onPointerDown($event, 'alpha')\"\n    (keydown)=\"onSliderKeydown($event, 'alpha')\"\n    (blur)=\"onSurfaceBlur()\"\n  >\n    <span\n      class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\"\n      [style.inset-inline-start.%]=\"alphaThumbX()\"\n    ></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions()\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelHexLabel() }}</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelRedLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelGreenLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelBlueLabel() }}</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">{{ channelAlphaLabel() }}</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelHueLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelSaturationLabel() }}</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">{{ channelLightnessLabel() }}</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">{{ channelAlphaLabel() }}</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**
@@ -893,12 +971,13 @@ class WrColorPickerTrigger {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? panelId : null", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? panelId : null", "attr.aria-disabled": "disabled() ? true : null" } }, exportAs: ["wrColorPickerTrigger"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrColorPickerTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrColorPickerTrigger]',
+                    exportAs: 'wrColorPickerTrigger',
                     host: {
                         '(click)': 'toggle()',
                         // The same two attributes `<wr-popover>`'s trigger carries: without them the