@tekus/design-system 5.40.0 → 5.42.0

package/fesm2022/tekus-design-system-components-color-picker.mjs

@@ -9,7 +9,7 @@ import * as i2 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 import * as i3 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
-import { Subject, debounceTime } from 'rxjs';
+import { Subject, switchMap, EMPTY, timer, map } from 'rxjs';
 import { ButtonComponent } from '@tekus/design-system/components/button';
 import { IconComponent } from '@tekus/design-system/components/icon';
 import { InputTextComponent } from '@tekus/design-system/components/input-text';
@@ -264,24 +264,6 @@ const DEFAULT_PRESET_COLORS = [
     '#d4a4ff', // lilac
     '#50e3c2', // turquoise
 ];
-const DEFAULT_TEXTS = {
-    swatchesLabel: 'Colores',
-    customColorsLabel: 'Colores personalizados',
-    hexLabel: 'HEX',
-    contrastLabel: 'Contraste',
-    contrastSampleText: 'Aa',
-    contrastSampleLabel: 'Texto sobre fondo',
-    contrastLowLabel: 'Bajo',
-    invalidHexError: 'Hexadecimal inválido',
-    requiredError: 'Este color es requerido',
-    eyedropperLabel: 'Selecciona un color de la pantalla',
-    addCustomColorLabel: 'Agregar color actual a colores personalizados',
-    removeCustomColorLabel: 'Remover color de colores personalizados',
-    openPickerLabel: 'Abrir selector de color',
-    spectrumLabel: 'Saturación y brillo',
-    hueLabel: 'Matiz',
-    dialogLabel: 'Selector de color',
-};
 const DEFAULT_SECTIONS = {
     swatches: true,
     customColors: true,
@@ -406,7 +388,8 @@ class ColorPickerComponent {
         /**
          * @property {string} errorMessage
          * @description
-         * External error message that overrides the internal validation messages.
+         * Message to display when the field is invalid (required and empty, or an
+         * invalid hex). The component has no built-in error texts.
          * @default `''`
          */
         this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
@@ -516,10 +499,14 @@ class ColorPickerComponent {
             ...DEFAULT_SECTIONS,
             ...this.sections(),
         }), ...(ngDevMode ? [{ debugName: "resolvedSections" }] : /* istanbul ignore next */ []));
-        this.t = computed(() => ({
-            ...DEFAULT_TEXTS,
-            ...this.texts(),
-        }), ...(ngDevMode ? [{ debugName: "t" }] : /* istanbul ignore next */ []));
+        this.resolvedTexts = computed(() => {
+            const custom = this.texts();
+            return {
+                ...custom,
+                hexLabel: custom.hexLabel ?? 'HEX',
+                contrastSampleText: custom.contrastSampleText ?? 'Aa',
+            };
+        }, ...(ngDevMode ? [{ debugName: "resolvedTexts" }] : /* istanbul ignore next */ []));
         /** Valid draft hex to paint swatches, or null → neutral fallback via CSS. */
         /**
          * Always reflects `draftHex()`, not `value()` — independent of `emitMode`
@@ -562,13 +549,15 @@ class ColorPickerComponent {
             this.eyeDropperSupported, ...(ngDevMode ? [{ debugName: "showEyedropper" }] : /* istanbul ignore next */ []));
         this.canAddCustom = computed(() => this.isValidHex(this.draftHex()), ...(ngDevMode ? [{ debugName: "canAddCustom" }] : /* istanbul ignore next */ []));
         this.errorText = computed(() => {
-            if (this.errorMessage()) {
-                return this.errorMessage();
-            }
-            return this.errorType() === 'required'
-                ? this.t().requiredError
-                : this.t().invalidHexError;
+            return this.errorMessage();
         }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+        this.isInvalid = computed(() => {
+            if (!this.isValid()) {
+                return true;
+            }
+            const { invalid, interacted } = this.controlState();
+            return invalid && interacted;
+        }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
         this.originalValue = '';
         this.closeReason = 'accept';
         // Set right before popover().hide() when Enter already committed
@@ -582,7 +571,14 @@ class ColorPickerComponent {
         // Starts at 0 (correct for both empty lists and backend-loaded full arrays, assuming oldest-first order).
         // Limitation: not reset when customColors is rebound externally at runtime without destroying the component.
         this.customColorWritePtr = signal(0, ...(ngDevMode ? [{ debugName: "customColorWritePtr" }] : /* istanbul ignore next */ []));
+        // `null` cancels whatever is still pending in the debounce window — pushed
+        // by every synchronous flush/cancel so a stale emission can't re-enter
+        // processHexInput() ~200ms later and undo it.
         this.hexInput$ = new Subject();
+        // Mirror of the host form control's validity/interaction state.
+        // AbstractControl getters are not signals, so a computed() reading them
+        // directly would never recompute — this is fed from `control.events`.
+        this.controlState = signal({ invalid: false, interacted: false }, { ...(ngDevMode ? { debugName: "controlState" } : /* istanbul ignore next */ {}), equal: (a, b) => a.invalid === b.invalid && a.interacted === b.interacted });
         this.onChange = () => { };
         this.onTouched = () => { };
         ColorPickerComponent.instanceCount++;
@@ -619,13 +615,30 @@ class ColorPickerComponent {
             });
         });
         this.hexInput$
-            .pipe(debounceTime(200), takeUntilDestroyed(this.destroyRef))
+            .pipe(switchMap((v) => (v === null ? EMPTY : timer(200).pipe(map(() => v)))), takeUntilDestroyed(this.destroyRef))
             .subscribe((v) => this.processHexInput(v, false));
         // Prevents the registry from holding a stale reference to this instance
         // if it's destroyed while its popover is still open (e.g. route change
         // without closing the picker first) — not just on normal onPopoverHide.
         this.destroyRef.onDestroy(() => this.registry.notifyClosed(this.fieldId));
     }
+    /**
+     * Subscribes to the host form control's events. Runs here and not in
+     * ngOnInit: with `formControlName`, the directive only sets up its control
+     * in its own ngOnChanges, which runs after this component's ngOnInit.
+     */
+    ngAfterContentInit() {
+        const control = this.ngControl?.control;
+        if (!control) {
+            return;
+        }
+        const sync = () => this.controlState.set({
+            invalid: control.invalid,
+            interacted: control.touched || control.dirty,
+        });
+        sync();
+        control.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(sync);
+    }
     // ── ControlValueAccessor ────────────────────────────────────────────────
     /**
      * @method writeValue
@@ -740,10 +753,14 @@ class ColorPickerComponent {
         this.isOpen.set(false);
         this.onTouched();
         this.triggerControl.markAsTouched();
+        this.ngControl?.control?.markAsTouched();
         const reason = this.closeReason;
         this.closeReason = 'accept';
         if (reason === 'cancel') {
             this.suppressNextHideCommit = false;
+            // Drop any keystroke still in the debounce window — otherwise it would
+            // commit the cancelled value right after the restore (live mode).
+            this.hexInput$.next(null);
             this.restoreOriginalValue();
         }
         else if (this.suppressNextHideCommit) {
@@ -754,10 +771,9 @@ class ColorPickerComponent {
         else {
             // Flush the debounced hex pipeline synchronously first: click-outside
             // can land within the 200ms debounce window of the last keystroke,
-            // which would otherwise commit a stale draftHex(). commit=false: the
-            // explicit commitDraft() below is the single source of truth for the
-            // emit, same reasoning as onHexKeydown's Enter flush.
-            this.processHexInput('#' + this.displayHexNoHash(), true, false);
+            // which would otherwise commit a stale draftHex(). The flush never
+            // commits — the explicit commitDraft() below owns the emit.
+            this.flushHexInput();
             // Always commit on accept: in 'onClose' mode this is the first and
             // only commit; in 'live' mode the draft is already committed, this
             // just guarantees the final state is flushed (e.g. Enter pressed
@@ -890,6 +906,9 @@ class ColorPickerComponent {
     // ── HEX input pipeline ──────────────────────────────────────────────────
     onHexInput(clean) {
         this.displayHexNoHash.set(clean);
+        if (clean === '') {
+            this.draftHex.set('');
+        }
         this.hexInput$.next('#' + clean);
     }
     /**
@@ -915,11 +934,9 @@ class ColorPickerComponent {
             event.stopPropagation();
             // Flush synchronously first: hexInput$ debounces 200ms, so draftHex()
             // can still be stale if Enter is pressed right after the last
-            // keystroke (fast typing). Mirrors onHexBlur()'s own flush.
-            // commit=false: the explicit commitDraft() right below is the single
-            // source of truth for the emit — the flush must not also auto-commit
-            // via maybeCommit() (that would double-emit in 'live' mode).
-            this.processHexInput('#' + this.displayHexNoHash(), true, false);
+            // keystroke (fast typing). Mirrors onHexBlur()'s own flush. The flush
+            // never commits — the explicit commitDraft() right below owns the emit.
+            this.flushHexInput();
             // Commit directly — covers both the trigger HEX field edited while the
             // popover is closed (no onPopoverHide to fall back on) and the panel
             // HEX field, without depending on the popover's close animation timing.
@@ -972,12 +989,12 @@ class ColorPickerComponent {
         this.onHexInput(merged);
     }
     onHexBlur() {
-        // commit=false: this flush only syncs draftHex/displayHexNoHash — the
-        // explicit commitDraft() below is the single source of truth for the
-        // emit, so the flush itself must not also auto-commit via maybeCommit()
-        // (that would double-emit in 'live' mode for a change not yet synced).
-        this.processHexInput('#' + this.displayHexNoHash(), true, false);
+        // The flush only syncs draftHex/displayHexNoHash (and drops the pending
+        // debounce) — the explicit commitDraft() below owns the emit.
+        this.flushHexInput();
         this.onTouched();
+        this.triggerControl.markAsTouched();
+        this.ngControl?.control?.markAsTouched();
         if (!this.isOpen()) {
             // Losing focus on the closed trigger's HEX field (variant="input")
             // is the "I'm done editing" signal for that path — there's no
@@ -986,32 +1003,40 @@ class ColorPickerComponent {
             this.commitDraft();
         }
     }
-    processHexInput(raw, forceNormalize, commit = true) {
-        const hex = this.parseHex(raw);
-        if (hex === null) {
-            return;
-        }
-        if (this.isValidHex(hex)) {
-            this.applyValidHex(hex, forceNormalize, commit);
-        }
-        else {
-            this.applyInvalidHex(hex.slice(1), forceNormalize);
-        }
+    /**
+     * Synchronously applies what's currently in the HEX field (normalized) and
+     * cancels the pending debounced emission, so it can't re-validate the same
+     * text later as "still typing" and clear the error this flush just set.
+     * Never commits: callers own the emit via commitDraft().
+     */
+    flushHexInput() {
+        this.hexInput$.next(null);
+        this.processHexInput('#' + this.displayHexNoHash(), true, false);
     }
-    parseHex(raw) {
+    processHexInput(raw, forceNormalize, commit = true) {
         const text = raw?.trim() ?? '';
         const body = (text.startsWith('#') ? text.slice(1) : text).trim();
         if (body.length === 0) {
+            this.draftHex.set('');
             if (this.required()) {
                 this.errorType.set('required');
-                this.setValid(false);
+                this.setValid(!forceNormalize);
             }
             else {
                 this.setValid(true);
+                if (commit) {
+                    this.maybeCommit();
+                }
             }
-            return null;
+            return;
+        }
+        const hex = '#' + body;
+        if (this.isValidHex(hex)) {
+            this.applyValidHex(hex, forceNormalize, commit);
+        }
+        else {
+            this.applyInvalidHex(body, forceNormalize);
         }
-        return ('#' + body).toLowerCase();
     }
     applyValidHex(hex, forceNormalize, commit) {
         if (hex.length === 4 && !forceNormalize) {
@@ -1040,20 +1065,31 @@ class ColorPickerComponent {
         this.validChange.emit(value);
     }
     // ── Internal state helpers ──────────────────────────────────────────────
-    syncFromValue(incoming, restoring = false) {
+    syncFromValue(incoming) {
         if (!incoming) {
-            if (restoring) {
-                this.draftHex.set('');
-                this.displayHexNoHash.set('');
+            this.draftHex.set('');
+            this.displayHexNoHash.set('');
+            if (this.required()) {
+                this.errorType.set('required');
+                this.setValid(false);
+            }
+            else {
+                this.setValid(true);
             }
-            // Validate empty color (fails if required)
-            this.parseHex('');
             return;
         }
         const hex = this.normalizeHex(incoming);
-        if (this.isValidHex(hex) && hex !== this.draftHex()) {
-            this.setFromHex(hex, false);
+        if (this.isValidHex(hex)) {
+            if (hex !== this.draftHex()) {
+                this.setFromHex(hex, false);
+            }
+            return;
         }
+        const body = (incoming.startsWith('#') ? incoming.slice(1) : incoming).trim();
+        this.draftHex.set(incoming);
+        this.displayHexNoHash.set(body);
+        this.errorType.set('invalid');
+        this.setValid(false);
     }
     setFromHex(hex, interactive) {
         this.draftHex.set(hex);
@@ -1091,12 +1127,24 @@ class ColorPickerComponent {
         }
     }
     commitDraft() {
+        if (!this.isValid() || this.isDisabled()) {
+            return;
+        }
         const hex = this.draftHex();
-        if (!this.isValidHex(hex) || this.isDisabled()) {
+        if (hex === '') {
+            this.value.set('');
+            this.onChange('');
+            this.ngControl?.control?.markAsDirty();
+            this.colorChange.emit('');
+            this.textColorChange.emit('');
+            return;
+        }
+        if (!this.isValidHex(hex)) {
             return;
         }
         this.value.set(hex);
         this.onChange(hex);
+        this.ngControl?.control?.markAsDirty();
         this.colorChange.emit(hex);
         this.textColorChange.emit(this.contrastTextColor());
     }
@@ -1177,7 +1225,7 @@ class ColorPickerComponent {
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColorPickerComponent, isStandalone: true, selector: "tk-color-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, contrastColor: { classPropertyName: "contrastColor", publicName: "contrastColor", isSignal: true, isRequired: false, transformFunction: null }, maxCustomColors: { classPropertyName: "maxCustomColors", publicName: "maxCustomColors", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, emitMode: { classPropertyName: "emitMode", publicName: "emitMode", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, customColors: { classPropertyName: "customColors", publicName: "customColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", customColors: "customColorsChange", colorChange: "colorChange", textColorChange: "textColorChange", validChange: "validChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }, { propertyName: "swatchBtnRef", first: true, predicate: ["swatchBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputTriggerRef", first: true, predicate: ["inputTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panelHexInput", first: true, predicate: ["panelHexInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"!isValid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"t().openPickerLabel + (label() ? ': ' + label() : '')\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"t().openPickerLabel\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"triggerControl.invalid\"\n          [class.ng-dirty]=\"triggerControl.dirty\"\n          [class.ng-touched]=\"triggerControl.touched\"\n          [attr.aria-describedby]=\"!isValid() ? errorId : null\"\n          [attr.aria-invalid]=\"!isValid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (!isValid()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (!isValid()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"t().dialogLabel\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\"\n    (keydown.escape)=\"onPanelEscape($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().swatchesLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().swatchesLabel\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().customColorsLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().customColorsLabel\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"t().addCustomColorLabel\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"t().removeCustomColorLabel\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"t().spectrumLabel\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"t().hueLabel\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"t().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"t().eyedropperLabel\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().contrastLabel\n        }}</span>\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"t().contrastSampleLabel\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ t().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            <span class=\"tk-color-picker__contrast-label\">{{\n              t().contrastSampleLabel\n            }}</span>\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                {{ t().contrastLowLabel }}\n              </span>\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: ColorPickerSpectrumComponent, selector: "tk-color-picker-spectrum", inputs: ["hue", "saturation", "brightness", "color", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: ColorPickerSwatchGridComponent, selector: "tk-color-picker-swatch-grid", inputs: ["colors", "selected", "ariaLabel"], outputs: ["picked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ColorPickerComponent, isStandalone: true, selector: "tk-color-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, contrastColor: { classPropertyName: "contrastColor", publicName: "contrastColor", isSignal: true, isRequired: false, transformFunction: null }, maxCustomColors: { classPropertyName: "maxCustomColors", publicName: "maxCustomColors", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, emitMode: { classPropertyName: "emitMode", publicName: "emitMode", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, customColors: { classPropertyName: "customColors", publicName: "customColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", customColors: "customColorsChange", colorChange: "colorChange", textColorChange: "textColorChange", validChange: "validChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }, { propertyName: "swatchBtnRef", first: true, predicate: ["swatchBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputTriggerRef", first: true, predicate: ["inputTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panelHexInput", first: true, predicate: ["panelHexInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"isInvalid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"\n        resolvedTexts().openPickerLabel\n          ? resolvedTexts().openPickerLabel + (label() ? ': ' + label() : '')\n          : label() || null\n      \"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"isInvalid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"resolvedTexts().openPickerLabel || null\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"isInvalid()\"\n          [class.ng-dirty]=\"triggerControl.dirty || ngControl?.dirty\"\n          [class.ng-touched]=\"triggerControl.touched || ngControl?.touched\"\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\n          [attr.aria-invalid]=\"isInvalid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (isInvalid() && errorText()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (isInvalid() && errorText()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"resolvedTexts().dialogLabel || null\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\"\n    (keydown.escape)=\"onPanelEscape($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        @if (resolvedTexts().swatchesLabel) {\n          <span class=\"tk-color-picker__section-label\">{{\n            resolvedTexts().swatchesLabel\n          }}</span>\n        }\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"resolvedTexts().swatchesLabel || ''\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        @if (resolvedTexts().customColorsLabel) {\n          <span class=\"tk-color-picker__section-label\">{{\n            resolvedTexts().customColorsLabel\n          }}</span>\n        }\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"resolvedTexts().customColorsLabel || ''\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"resolvedTexts().addCustomColorLabel || null\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"resolvedTexts().removeCustomColorLabel || null\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"resolvedTexts().spectrumLabel || ''\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"resolvedTexts().hueLabel || null\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"resolvedTexts().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"resolvedTexts().eyedropperLabel || null\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        @if (resolvedTexts().contrastLabel) {\n          <span class=\"tk-color-picker__section-label\">{{\n            resolvedTexts().contrastLabel\n          }}</span>\n        }\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"resolvedTexts().contrastSampleLabel || null\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ resolvedTexts().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            @if (resolvedTexts().contrastSampleLabel) {\n              <span class=\"tk-color-picker__contrast-label\">{{\n                resolvedTexts().contrastSampleLabel\n              }}</span>\n            }\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              @if (resolvedTexts().contrastLowLabel) {\n                <span\n                  class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                  {{ resolvedTexts().contrastLowLabel }}\n                </span>\n              }\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: ColorPickerSpectrumComponent, selector: "tk-color-picker-spectrum", inputs: ["hue", "saturation", "brightness", "color", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: ColorPickerSwatchGridComponent, selector: "tk-color-picker-swatch-grid", inputs: ["colors", "selected", "ariaLabel"], outputs: ["picked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -1191,7 +1239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         InputTextComponent,
                         ColorPickerSpectrumComponent,
                         ColorPickerSwatchGridComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"!isValid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"t().openPickerLabel + (label() ? ': ' + label() : '')\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"t().openPickerLabel\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"triggerControl.invalid\"\n          [class.ng-dirty]=\"triggerControl.dirty\"\n          [class.ng-touched]=\"triggerControl.touched\"\n          [attr.aria-describedby]=\"!isValid() ? errorId : null\"\n          [attr.aria-invalid]=\"!isValid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (!isValid()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (!isValid()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"t().dialogLabel\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\"\n    (keydown.escape)=\"onPanelEscape($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().swatchesLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().swatchesLabel\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().customColorsLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().customColorsLabel\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"t().addCustomColorLabel\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"t().removeCustomColorLabel\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"t().spectrumLabel\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"t().hueLabel\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"t().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"t().eyedropperLabel\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().contrastLabel\n        }}</span>\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"t().contrastSampleLabel\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ t().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            <span class=\"tk-color-picker__contrast-label\">{{\n              t().contrastSampleLabel\n            }}</span>\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                {{ t().contrastLowLabel }}\n              </span>\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"isInvalid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"\n        resolvedTexts().openPickerLabel\n          ? resolvedTexts().openPickerLabel + (label() ? ': ' + label() : '')\n          : label() || null\n      \"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"isInvalid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"resolvedTexts().openPickerLabel || null\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"isInvalid()\"\n          [class.ng-dirty]=\"triggerControl.dirty || ngControl?.dirty\"\n          [class.ng-touched]=\"triggerControl.touched || ngControl?.touched\"\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\n          [attr.aria-invalid]=\"isInvalid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (isInvalid() && errorText()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (isInvalid() && errorText()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"resolvedTexts().dialogLabel || null\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\"\n    (keydown.escape)=\"onPanelEscape($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        @if (resolvedTexts().swatchesLabel) {\n          <span class=\"tk-color-picker__section-label\">{{\n            resolvedTexts().swatchesLabel\n          }}</span>\n        }\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"resolvedTexts().swatchesLabel || ''\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        @if (resolvedTexts().customColorsLabel) {\n          <span class=\"tk-color-picker__section-label\">{{\n            resolvedTexts().customColorsLabel\n          }}</span>\n        }\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"resolvedTexts().customColorsLabel || ''\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"resolvedTexts().addCustomColorLabel || null\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"resolvedTexts().removeCustomColorLabel || null\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"resolvedTexts().spectrumLabel || ''\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"resolvedTexts().hueLabel || null\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"resolvedTexts().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"resolvedTexts().eyedropperLabel || null\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        @if (resolvedTexts().contrastLabel) {\n          <span class=\"tk-color-picker__section-label\">{{\n            resolvedTexts().contrastLabel\n          }}</span>\n        }\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"resolvedTexts().contrastSampleLabel || null\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ resolvedTexts().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            @if (resolvedTexts().contrastSampleLabel) {\n              <span class=\"tk-color-picker__contrast-label\">{{\n                resolvedTexts().contrastSampleLabel\n              }}</span>\n            }\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              @if (resolvedTexts().contrastLowLabel) {\n                <span\n                  class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                  {{ resolvedTexts().contrastLowLabel }}\n                </span>\n              }\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], contrastColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contrastColor", required: false }] }], maxCustomColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCustomColors", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], emitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitMode", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], customColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColors", required: false }] }, { type: i0.Output, args: ["customColorsChange"] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], textColorChange: [{ type: i0.Output, args: ["textColorChange"] }], validChange: [{ type: i0.Output, args: ["validChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], popover: [{ type: i0.ViewChild, args: ['op', { isSignal: true }] }], swatchBtnRef: [{ type: i0.ViewChild, args: ['swatchBtn', { ...{ read: ElementRef }, isSignal: true }] }], inputTriggerRef: [{ type: i0.ViewChild, args: ['inputTrigger', { ...{ read: ElementRef }, isSignal: true }] }], panelHexInput: [{ type: i0.ViewChild, args: ['panelHexInput', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**