@tekus/design-system 5.42.0 → 5.42.1

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

@@ -494,6 +494,8 @@ class ColorPickerComponent {
         this.isValid = signal(true, ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
         this.errorType = signal('invalid', ...(ngDevMode ? [{ debugName: "errorType" }] : /* istanbul ignore next */ []));
         this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        /** Set on the first blur / close, when there is no host form control */
+        this.touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.resolvedSections = computed(() => ({
             ...DEFAULT_SECTIONS,
@@ -552,12 +554,17 @@ class ColorPickerComponent {
             return this.errorMessage();
         }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
         this.isInvalid = computed(() => {
+            const { invalid, interacted } = this.controlState();
             if (!this.isValid()) {
-                return true;
+                // An empty required picker waits for the user (blur / close), like
+                // tk-input-text; an invalid HEX shows right away
+                const userInteracted = this.ngControl?.control ? interacted : this.touched();
+                return this.errorType() !== 'required' || userInteracted;
             }
-            const { invalid, interacted } = this.controlState();
             return invalid && interacted;
         }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+        this.boundValidate = this.validate.bind(this);
+        this.syncControlState = () => undefined;
         this.originalValue = '';
         this.closeReason = 'accept';
         // Set right before popover().hide() when Enter already committed
@@ -623,21 +630,38 @@ class ColorPickerComponent {
         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.
+     * Adds this picker's validator to the host form control and subscribes to
+     * its 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({
+        control.addValidators(this.boundValidate);
+        control.updateValueAndValidity({ emitEvent: false });
+        this.destroyRef.onDestroy(() => control.removeValidators(this.boundValidate));
+        this.syncControlState = () => this.controlState.set({
             invalid: control.invalid,
             interacted: control.touched || control.dirty,
         });
-        sync();
-        control.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(sync);
+        this.syncControlState();
+        control.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.syncControlState());
+    }
+    /**
+     * @method validate
+     * @description
+     * Errors of the typed HEX, added to the host form control: `{ required }`
+     * when the picker is `required` and empty, `{ invalidHex }` when the text is
+     * not a valid color. Pick the message with `control.hasError(...)`.
+     */
+    validate() {
+        if (this.isValid()) {
+            return null;
+        }
+        return this.errorType() === 'required' ? { required: true } : { invalidHex: true };
     }
     // ── ControlValueAccessor ────────────────────────────────────────────────
     /**
@@ -646,6 +670,9 @@ class ColorPickerComponent {
      */
     writeValue(value) {
         this.value.set(value || '');
+        // Sync now, not in the value effect: the form runs the validators right
+        // after writeValue and must see the new value's validity
+        this.syncFromValue(value || '');
     }
     /**
      * @method registerOnChange
@@ -673,6 +700,15 @@ class ColorPickerComponent {
         if (this.isDisabled()) {
             return;
         }
+        if (!this.isOpen()) {
+            // The swatch button keeps the focus on the HEX field (no blur), so apply
+            // what was typed, like a blur does, before the popover syncs its draft
+            // from the value: a pending or shorthand HEX would be lost otherwise
+            this.flushHexInput();
+            if (this.draftHex() !== this.value()) {
+                this.commitDraft();
+            }
+        }
         this.popover()?.toggle(event, this.getAnchorEl() ?? this.el.nativeElement);
     }
     /** Returns the precise anchor element for popover positioning.
@@ -752,6 +788,7 @@ class ColorPickerComponent {
     onPopoverHide() {
         this.isOpen.set(false);
         this.onTouched();
+        this.touched.set(true);
         this.triggerControl.markAsTouched();
         this.ngControl?.control?.markAsTouched();
         const reason = this.closeReason;
@@ -993,6 +1030,7 @@ class ColorPickerComponent {
         // debounce) — the explicit commitDraft() below owns the emit.
         this.flushHexInput();
         this.onTouched();
+        this.touched.set(true);
         this.triggerControl.markAsTouched();
         this.ngControl?.control?.markAsTouched();
         if (!this.isOpen()) {
@@ -1057,12 +1095,23 @@ class ColorPickerComponent {
         const partial = !forceNormalize && /^[A-Fa-f0-9]*$/.test(rawText) && rawText.length <= 6;
         this.setValid(partial);
     }
+    /**
+     * Updates the HEX validity and revalidates the host form control in the same
+     * call, so the form sees { required } / { invalidHex } before the next render.
+     * errorType is always set before calling this.
+     */
     setValid(value) {
-        if (this.isValid() === value) {
-            return;
+        if (this.isValid() !== value) {
+            this.isValid.set(value);
+            this.validChange.emit(value);
         }
-        this.isValid.set(value);
-        this.validChange.emit(value);
+        this.updateHostControlValidity();
+    }
+    updateHostControlValidity() {
+        // No event: the value did not change, only this picker's own errors
+        this.ngControl?.control?.updateValueAndValidity({ emitEvent: false });
+        // No status event was emitted, so refresh the cached control state here
+        this.syncControlState();
     }
     // ── Internal state helpers ──────────────────────────────────────────────
     syncFromValue(incoming) {
@@ -1225,7 +1274,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]=\"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 }); }
+    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--invalid .tk-color-picker__input-wrap input.p-inputtext,.tk-color-picker--invalid .tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-red-700, #cf2604)}.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-base-red-700, #cf2604)}.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-base-red-700, #cf2604)}.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 p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}: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.tk-color-picker__trigger-input--invalid:has(input) .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,
@@ -1239,7 +1288,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]=\"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"] }]
+                    ], 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--invalid .tk-color-picker__input-wrap input.p-inputtext,.tk-color-picker--invalid .tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-red-700, #cf2604)}.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-base-red-700, #cf2604)}.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-base-red-700, #cf2604)}.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 p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}: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.tk-color-picker__trigger-input--invalid:has(input) .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 }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-color-picker.mjs","sources":["../../../projects/design-system/components/color-picker/src/color-picker-registry.service.ts","../../../projects/design-system/components/color-picker/src/sections/spectrum-canvas.component.ts","../../../projects/design-system/components/color-picker/src/sections/swatch-grid.component.ts","../../../projects/design-system/components/color-picker/src/color-picker.component.ts","../../../projects/design-system/components/color-picker/src/color-picker.component.html","../../../projects/design-system/components/color-picker/tekus-design-system-components-color-picker.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\ninterface RegisteredPicker {\n  id: string;\n  requestClose: () => void;\n}\n\n/**\n * @service ColorPickerRegistryService\n * @description\n * Coordinates mutual exclusivity between `tk-color-picker` instances mounted\n * in the same view: opening one instance requests the previously open one to\n * close (as a cancellation — no value is emitted). Transparent to consumers,\n * no public API on `ColorPickerComponent` changes because of it.\n */\n@Injectable({ providedIn: 'root' })\nexport class ColorPickerRegistryService {\n  private active: RegisteredPicker | null = null;\n\n  /**\n   * Called from `onPopoverShow()`. If another instance is currently open,\n   * asks it to close (cancel) before registering the new one as active.\n   */\n  requestOpen(id: string, requestClose: () => void): void {\n    if (this.active && this.active.id !== id) {\n      this.active.requestClose();\n    }\n    this.active = { id, requestClose };\n  }\n\n  /**\n   * Called from `onPopoverHide()` and on component destroy, so a destroyed\n   * or already-closed instance never lingers as the registered active one.\n   */\n  notifyClosed(id: string): void {\n    if (this.active?.id === id) {\n      this.active = null;\n    }\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\n/**\n * @component ColorPickerSpectrumComponent\n * @description\n * Internal saturation/brightness canvas of `tk-color-picker` (NOT public API).\n * A hue-colored area with white→transparent (saturation) and\n * transparent→black (brightness) CSS overlays. Supports pointer dragging\n * (tracked on `document` so the drag can leave the area) and full keyboard\n * operation via a 2D slider pattern (arrow keys, Shift for 10% steps).\n */\n@Component({\n  selector: 'tk-color-picker-spectrum',\n  template: `\n    <div\n      class=\"tk-color-picker-spectrum__area\"\n      role=\"slider\"\n      tabindex=\"0\"\n      [style.background]=\"hueBackground()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-valuetext]=\"valueText()\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      [attr.aria-valuenow]=\"Math.round(saturation() * 100)\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div\n        class=\"tk-color-picker-spectrum__cursor\"\n        [style.left.%]=\"saturation() * 100\"\n        [style.top.%]=\"(1 - brightness()) * 100\"\n        [style.background]=\"color()\"\n      ></div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: block;\n    }\n\n    .tk-color-picker-spectrum__area {\n      width: 100%;\n      height: 6.5rem;\n      border-radius: var(--tk-borderRadius-s, 0.25rem);\n      position: relative;\n      overflow: hidden;\n      cursor: crosshair;\n      touch-action: none;\n      user-select: none;\n      outline: none;\n    }\n\n    .tk-color-picker-spectrum__area::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to right, #fff, transparent);\n    }\n\n    .tk-color-picker-spectrum__area::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to bottom, transparent, #000);\n    }\n\n    .tk-color-picker-spectrum__area:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--tk-color-border-focus, #16006f);\n    }\n\n    .tk-color-picker-spectrum__cursor {\n      position: absolute;\n      width: 0.875rem;\n      height: 0.875rem;\n      border-radius: var(--tk-borderRadius-full, 50%);\n      border: 2px solid var(--tk-color-background-default, #ffffff);\n      box-shadow: 0 0 0 1px var(--tk-color-border-strong, #424243);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      z-index: 2;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorPickerSpectrumComponent {\n  /** Current hue (0–360) painting the base background. */\n  hue = input<number>(0);\n\n  /** Current saturation (0–1) → horizontal cursor position. */\n  saturation = input<number>(1);\n\n  /** Current brightness/value (0–1) → vertical cursor position (inverted). */\n  brightness = input<number>(1);\n\n  /** Current color painted inside the cursor. */\n  color = input<string>('');\n\n  /** Accessible label of the 2D slider. */\n  ariaLabel = input<string>('Saturation and brightness');\n\n  /** Emits on every pointer/keyboard change with the new saturation/brightness pair. */\n  changed = output<{ saturation: number; brightness: number }>();\n\n  protected readonly Math = Math;\n  protected readonly hueBackground = computed(() => `hsl(${this.hue()}, 100%, 50%)`);\n  protected readonly valueText = computed(\n    () =>\n      `${this.ariaLabel()}: ${Math.round(this.saturation() * 100)}%, ${Math.round(this.brightness() * 100)}%`,\n  );\n\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly destroyRef = inject(DestroyRef);\n\n  private readonly onDragMove = (e: PointerEvent) => this.applyPointer(e);\n  private readonly onDragEnd = () => this.removeDragListeners();\n\n  constructor() {\n    this.destroyRef.onDestroy(() => this.removeDragListeners());\n  }\n\n  protected onPointerDown(event: PointerEvent): void {\n    event.preventDefault();\n    (event.currentTarget as HTMLElement).focus();\n    this.applyPointer(event);\n    document.addEventListener('pointermove', this.onDragMove);\n    document.addEventListener('pointerup', this.onDragEnd);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const step = event.shiftKey ? 0.1 : 0.01;\n    let saturation = this.saturation();\n    let brightness = this.brightness();\n\n    switch (event.key) {\n      case 'ArrowRight':\n        saturation += step;\n        break;\n      case 'ArrowLeft':\n        saturation -= step;\n        break;\n      case 'ArrowUp':\n        brightness += step;\n        break;\n      case 'ArrowDown':\n        brightness -= step;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.emitClamped(saturation, brightness);\n  }\n\n  private applyPointer(event: PointerEvent): void {\n    const area = this.elementRef.nativeElement.querySelector(\n      '.tk-color-picker-spectrum__area',\n    ) as HTMLElement | null;\n    if (!area) {\n      return;\n    }\n    const rect = area.getBoundingClientRect();\n    this.emitClamped(\n      (event.clientX - rect.left) / rect.width,\n      1 - (event.clientY - rect.top) / rect.height,\n    );\n  }\n\n  private emitClamped(saturation: number, brightness: number): void {\n    this.changed.emit({\n      saturation: Math.max(0, Math.min(1, saturation)),\n      brightness: Math.max(0, Math.min(1, brightness)),\n    });\n  }\n\n  private removeDragListeners(): void {\n    document.removeEventListener('pointermove', this.onDragMove);\n    document.removeEventListener('pointerup', this.onDragEnd);\n  }\n}\n","import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\n\n/**\n * @component ColorPickerSwatchGridComponent\n * @description\n * Internal grid of color swatches of `tk-color-picker` (NOT public API).\n * Used by both the predefined palette and the custom colors sections.\n * Each swatch is a real button labelled with its hex value;\n * the currently selected color is marked with `aria-pressed`.\n */\n@Component({\n  selector: 'tk-color-picker-swatch-grid',\n  template: `\n    <div class=\"tk-color-picker-swatch-grid__grid\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n      @for (color of colors(); track color) {\n        <button\n          type=\"button\"\n          class=\"tk-color-picker-swatch-grid__swatch\"\n          [class.tk-color-picker-swatch-grid__swatch--selected]=\"isSelected(color)\"\n          [style.background-color]=\"color\"\n          [attr.aria-label]=\"color\"\n          [attr.aria-pressed]=\"isSelected(color)\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"picked.emit(color)\"\n        ></button>\n      }\n      <ng-content></ng-content>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: block;\n    }\n\n    .tk-color-picker-swatch-grid__grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(1.25rem, 1fr));\n      gap: var(--tk-spacing-gap-xs, 0.25rem);\n    }\n\n    .tk-color-picker-swatch-grid__swatch {\n      appearance: none;\n      padding: 0;\n      width: 100%;\n      aspect-ratio: 1;\n      border: 1px solid var(--tk-color-border-subtle, #e4e4e4);\n      border-radius: var(--tk-borderRadius-xs, 0.125rem);\n      cursor: pointer;\n      transition: transform 120ms ease, box-shadow 120ms ease;\n    }\n\n    .tk-color-picker-swatch-grid__swatch:hover {\n      transform: scale(1.12);\n    }\n\n    .tk-color-picker-swatch-grid__swatch:focus-visible {\n      outline: 2px solid var(--tk-color-border-focus, #16006f);\n      outline-offset: 1px;\n    }\n\n    .tk-color-picker-swatch-grid__swatch--selected {\n      box-shadow: 0 0 0 2px var(--tk-color-background-default, #ffffff),\n        0 0 0 4px var(--tk-color-accent-default, #6ad0bc);\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorPickerSwatchGridComponent {\n  /** Hex colors to render as swatches. */\n  colors = input<string[]>([]);\n\n  /** Currently selected hex (normalized lowercase) to highlight. */\n  selected = input<string>('');\n\n  /** Accessible label of the swatch group. */\n  ariaLabel = input<string>('');\n\n  /** Emits the picked hex color. */\n  picked = output<string>();\n\n  protected isSelected(color: string): boolean {\n    return color.toLowerCase() === this.selected().toLowerCase();\n  }\n}\n","import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';\nimport { ButtonModule } from 'primeng/button';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MessageModule } from 'primeng/message';\nimport { Popover, PopoverModule } from 'primeng/popover';\nimport { EMPTY, Subject, map, switchMap, timer } from 'rxjs';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { InputTextComponent } from '@tekus/design-system/components/input-text';\nimport {\n  ContrastResult,\n  getContrastResult,\n  getContrastTextColor,\n} from '@tekus/design-system/utils/wcag-contrast';\nimport {\n  ColorPickerCloseReason,\n  ColorPickerEmitMode,\n  ColorPickerSections,\n  ColorPickerTexts,\n  ColorPickerVariant,\n  EyeDropperLike,\n} from './color-picker.types';\nimport { ColorPickerRegistryService } from './color-picker-registry.service';\nimport { ColorPickerSpectrumComponent } from './sections/spectrum-canvas.component';\nimport { ColorPickerSwatchGridComponent } from './sections/swatch-grid.component';\n\nconst HEX_REGEX = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n\nconst DEFAULT_PRESET_COLORS: string[] = [\n  '#ffffff', // white\n  '#000000', // black\n  '#929292', // gray\n  '#ffea00', // yellow\n  '#fff9ab', // light yellow\n  '#0c5dbc', // blue\n  '#6aa7f0', // light blue\n  '#ff0000', // red\n  '#ff95a2', // pink\n  '#ff9f00', // orange\n  '#417505', // dark green\n  '#7ed321', // light green\n  '#7300d9', // purple\n  '#d4a4ff', // lilac\n  '#50e3c2', // turquoise\n];\n\n\nconst DEFAULT_SECTIONS: Required<ColorPickerSections> = {\n  swatches: true,\n  customColors: true,\n  spectrum: true,\n  hue: true,\n  hex: true,\n  eyedropper: true,\n  contrast: true,\n};\n\n/**\n * @component ColorPickerComponent\n * @description\n * Configurable color picker of the Tekus Design System. Renders a trigger\n * (`input` variant with editable HEX, or compact `swatch` variant) that opens\n * a PrimeNG `p-popover` composed of independently toggleable sections:\n * predefined swatches, custom colors, saturation/brightness spectrum, hue bar,\n * HEX field with EyeDropper support, WCAG contrast preview and a\n * Cancel/Accept action bar with temporary selection state.\n * Implements `ControlValueAccessor` for Reactive Forms integration.\n *\n * @usage\n * ```html\n * <tk-color-picker\n *   label=\"Color\"\n *   [(value)]=\"color\"\n *   [contrastColor]=\"'#ffffff'\"\n *   (colorChange)=\"onColor($event)\">\n * </tk-color-picker>\n * ```\n */\n@Component({\n  selector: 'tk-color-picker',\n  imports: [\n    ButtonModule,\n    InputTextModule,\n    MessageModule,\n    PopoverModule,\n    ButtonComponent,\n    IconComponent,\n    InputTextComponent,\n    ColorPickerSpectrumComponent,\n    ColorPickerSwatchGridComponent,\n  ],\n  templateUrl: './color-picker.component.html',\n  styleUrl: './color-picker.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorPickerComponent implements ControlValueAccessor, AfterContentInit {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly el = inject(ElementRef);\n  private readonly registry = inject(ColorPickerRegistryService);\n\n  private readonly init = (() => {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  })();\n\n  /**\n   * @property {ColorPickerVariant} variant\n   * @description\n   * Trigger appearance: `input` shows swatch + editable HEX + chevron,\n   * `swatch` shows only swatch + chevron.\n   * @default `'input'`\n   */\n  variant = input<ColorPickerVariant>('input');\n\n  /**\n   * @property {string} label\n   * @description\n   * Label displayed above the trigger.\n   * @default `''`\n   */\n  label = input<string>('');\n\n  /**\n   * @property {string} hint\n   * @description\n   * Hint text displayed below the trigger (hidden while an error is shown).\n   * @default `''`\n   */\n  hint = input<string>('');\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the trigger and the popover. Also controlled by Reactive Forms\n   * via `setDisabledState`.\n   * @default `false`\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * @property {boolean} required\n   * @description\n   * When `true`, an empty HEX field shows the required error on blur.\n   * @default `false`\n   */\n  required = input<boolean>(false);\n\n  /**\n   * @property {ColorPickerSections} sections\n   * @description\n   * Enables/disables each popover section. Missing flags default to `true`.\n   * Disabling `actionBar` switches the picker to live mode (every valid\n   * change is emitted immediately).\n   * @default `{}` (all sections enabled)\n   */\n  sections = input<ColorPickerSections>({});\n\n  /**\n   * @property {string[]} presetColors\n   * @description\n   * Colors of the predefined palette section.\n   * @default Design System base palette\n   */\n  presetColors = input<string[]>(DEFAULT_PRESET_COLORS);\n\n  /**\n   * @property {string | null} contrastColor\n   * @description\n   * Optional override of the text color used for the WCAG contrast pair.\n   * When `null` (default) the text color is resolved automatically from the\n   * picked background luminance (ITU-R BT.601): black over light colors,\n   * white over dark ones.\n   * @default `null`\n   */\n  contrastColor = input<string | null>(null);\n\n  /**\n   * @property {number} maxCustomColors\n   * @description\n   * Maximum number of custom color slots. Once the list is at capacity, the\n   * oldest slot is replaced using a circular buffer — the \"+\" button stays\n   * visible at all times.\n   * @default `18`\n   */\n  maxCustomColors = input<number>(18);\n\n  /**\n   * @property {'top' | 'bottom'} placement\n   * @description\n   * Preferred position of the popover relative to the trigger.\n   * @default `'bottom'`\n   */\n  placement = input<'top' | 'bottom'>('bottom');\n\n  /**\n   * @property {string} errorMessage\n   * @description\n   * Message to display when the field is invalid (required and empty, or an\n   * invalid hex). The component has no built-in error texts.\n   * @default `''`\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {ColorPickerEmitMode} emitMode\n   * @description\n   * Emission strategy for `colorChange`/`textColorChange`/`value`:\n   * `'live'` emits on every valid draft change (default, unchanged behavior).\n   * `'onClose'` emits once, with the final value, only when the popover\n   * closes by confirmation (Enter / click-outside) — Escape, or being closed\n   * by another `tk-color-picker` instance opening in the same view, never\n   * emits.\n   *\n   * Exception: editing the trigger HEX field directly while the popover is\n   * closed (`variant=\"input\"`) has no popover session to defer to, so under\n   * `'onClose'` it commits on its own equivalent of \"close\" — Enter, or\n   * losing focus (blur) — not on every debounce tick while still typing.\n   * This avoids firing on each momentarily-complete-looking HEX mid-edit,\n   * which matters when `colorChange` is wired straight to an API call.\n   * @default `'live'`\n   */\n  emitMode = input<ColorPickerEmitMode>('live');\n\n  /**\n   * @property {ColorPickerTexts} texts\n   * @description\n   * UI texts (section labels, buttons, errors). Defaults are in English so\n   * consumers can localize with their own i18n solution.\n   * @default `{}` (English defaults)\n   */\n  texts = input<ColorPickerTexts>({});\n\n  /**\n   * @property {ModelSignal<string>} value\n   * @description\n   * Confirmed color as a normalized lowercase 6-digit hex with `#`.\n   * Two-way bindable.\n   * @default `''`\n   */\n  value = model<string>('');\n\n  /**\n   * @property {ModelSignal<string[]>} customColors\n   * @description\n   * User-saved custom colors. Two-way bindable so the consumer decides\n   * where to persist them.\n   * @default `[]`\n   */\n  customColors = model<string[]>([]);\n\n  /**\n   * @event colorChange\n   * @description\n   * Emits the confirmed background hex color. Timing depends on `emitMode()`:\n   * `'live'` emits on every valid change (drag, keystroke, swatch pick, or\n   * trigger HEX edit while closed); `'onClose'` emits once, with the final\n   * value, only when the popover closes by confirmation (Enter /\n   * click-outside). Never emits on Escape, when another instance forces this\n   * one to close, on invalid values, on hydration, or while disabled. Always\n   * emitted together with `textColorChange` in the same synchronous call, so\n   * both values belong to the same commit.\n   */\n  colorChange = output<string>();\n\n  /**\n   * @event textColorChange\n   * @description\n   * Emits together with `colorChange`, same timing, same commit: the ideal\n   * text color over the confirmed background (`#000000` on light colors,\n   * `#ffffff` on dark ones, or the `contrastColor` override when provided).\n   */\n  textColorChange = output<string>();\n\n  /**\n   * @event validChange\n   * @description\n   * Emits only when the validity of the HEX value changes.\n   */\n  validChange = output<boolean>();\n\n  /**\n   * @event opened\n   * @description\n   * Emits when the picker popover opens.\n   */\n  opened = output<void>();\n\n  /**\n   * @event closed\n   * @description\n   * Emits when the popover closes, with the close reason\n   * (`accept` confirmed, `cancel` discarded/restored).\n   */\n  closed = output<ColorPickerCloseReason>();\n\n  popover = viewChild<Popover>('op');\n  private swatchBtnRef = viewChild('swatchBtn', { read: ElementRef });\n  private inputTriggerRef = viewChild('inputTrigger', { read: ElementRef });\n  private panelHexInput = viewChild('panelHexInput', { read: ElementRef });\n\n  /**\n   * Internal FormControl handed to the `tk-input-text` trigger so the\n   * disabled state propagates through the Design System input.\n   */\n  protected readonly triggerControl = new FormControl('');\n\n  protected readonly isOpen = signal(false);\n  protected readonly hue = signal(0);\n  protected readonly saturation = signal(1);\n  protected readonly brightness = signal(1);\n  protected readonly draftHex = signal('');\n  protected readonly displayHexNoHash = signal('');\n  protected readonly isValid = signal(true);\n  protected readonly errorType = signal<'invalid' | 'required'>('invalid');\n  private readonly cvaDisabled = signal(false);\n\n  protected readonly isDisabled = computed(() => this.disabled() || this.cvaDisabled());\n\n  protected readonly resolvedSections = computed<Required<ColorPickerSections>>(() => ({\n    ...DEFAULT_SECTIONS,\n    ...this.sections(),\n  }));\n\n  protected readonly resolvedTexts = computed(() => {\n    const custom = this.texts();\n    return {\n      ...custom,\n      hexLabel: custom.hexLabel ?? 'HEX',\n      contrastSampleText: custom.contrastSampleText ?? 'Aa',\n    };\n  });\n\n  /** Valid draft hex to paint swatches, or null → neutral fallback via CSS. */\n  /**\n   * Always reflects `draftHex()`, not `value()` — independent of `emitMode`\n   * and of whether the popover is open. `draftHex` tracks every keystroke\n   * (trigger or panel HEX field, spectrum/hue/swatch picks) in real time, so\n   * the swatch gives immediate visual feedback while the user is still\n   * typing, even under `emitMode=\"onClose\"` where the actual commit/emit is\n   * deferred to Enter/blur/click-outside.\n   */\n  protected readonly swatchColor = computed(() => {\n    const color = this.draftHex();\n    return this.isValidHex(color) ? color : null;\n  });\n\n  /**\n   * Text color of the contrast pair: the `contrastColor` override when valid,\n   * otherwise resolved automatically from the draft background luminance.\n   */\n  protected readonly contrastTextColor = computed(() => {\n    const override = this.contrastColor();\n    if (override) {\n      const norm = this.normalizeHex(override);\n      if (this.isValidHex(norm)) {\n        return norm;\n      }\n    }\n    const bg = this.draftHex();\n    return getContrastTextColor(this.isValidHex(bg) ? bg : '#ffffff');\n  });\n\n  protected readonly contrastResult = computed<ContrastResult | null>(() => {\n    const bg = this.draftHex();\n    if (!this.isValidHex(bg)) {\n      return null;\n    }\n    return getContrastResult(bg, this.contrastTextColor());\n  });\n\n  protected readonly showContrast = computed(\n    () => this.resolvedSections().contrast && this.contrastResult() !== null,\n  );\n\n  protected readonly eyeDropperSupported =\n    typeof globalThis !== 'undefined' && 'EyeDropper' in globalThis;\n\n  protected readonly showEyedropper = computed(\n    () =>\n      this.resolvedSections().hex &&\n      this.resolvedSections().eyedropper &&\n      this.eyeDropperSupported,\n  );\n\n  protected readonly canAddCustom = computed(() => this.isValidHex(this.draftHex()));\n\n  protected readonly errorText = computed(() => {\n    return this.errorMessage();\n  });\n\n  protected readonly isInvalid = computed(() => {\n    if (!this.isValid()) {\n      return true;\n    }\n    const { invalid, interacted } = this.controlState();\n    return invalid && interacted;\n  });\n\n  protected readonly fieldId: string;\n  protected readonly panelFieldId: string;\n  protected readonly errorId: string;\n\n  private static instanceCount = 0;\n\n  private originalValue = '';\n  private closeReason: ColorPickerCloseReason = 'accept';\n  // Set right before popover().hide() when Enter already committed\n  // synchronously, so onPopoverHide()'s own accept-commit doesn't fire a\n  // duplicate colorChange/textColorChange for the same still-unchanged\n  // draft. Reset on every open (so it can never leak into a later session)\n  // and explicitly in every branch of onPopoverHide() (not just the one\n  // that consumes it) so the flag never depends on which branch runs.\n  private suppressNextHideCommit = false;\n  // Circular buffer pointer: tracks the oldest slot index to replace when customColors is at capacity.\n  // Starts at 0 (correct for both empty lists and backend-loaded full arrays, assuming oldest-first order).\n  // Limitation: not reset when customColors is rebound externally at runtime without destroying the component.\n  private readonly customColorWritePtr = signal(0);\n  // `null` cancels whatever is still pending in the debounce window — pushed\n  // by every synchronous flush/cancel so a stale emission can't re-enter\n  // processHexInput() ~200ms later and undo it.\n  private readonly hexInput$ = new Subject<string | null>();\n  // Mirror of the host form control's validity/interaction state.\n  // AbstractControl getters are not signals, so a computed() reading them\n  // directly would never recompute — this is fed from `control.events`.\n  private readonly controlState = signal(\n    { invalid: false, interacted: false },\n    { equal: (a, b) => a.invalid === b.invalid && a.interacted === b.interacted },\n  );\n\n  onChange: (value: string) => void = () => {};\n  onTouched: () => void = () => {};\n\n  constructor() {\n    ColorPickerComponent.instanceCount++;\n    this.fieldId = `tk-color-picker-${ColorPickerComponent.instanceCount}`;\n    this.panelFieldId = `${this.fieldId}-panel`;\n    this.errorId = `${this.fieldId}-error`;\n\n    effect(() => {\n      const incoming = this.value();\n      untracked(() => this.syncFromValue(incoming));\n    });\n\n    effect(() => {\n      if (this.isDisabled() && this.isOpen()) {\n        this.popover()?.hide();\n      }\n    });\n\n    effect(() => {\n      if (this.isDisabled()) {\n        this.triggerControl.disable({ emitEvent: false });\n      } else {\n        this.triggerControl.enable({ emitEvent: false });\n      }\n    });\n\n    // Sync triggerControl validity so tk-input-text shows errors natively.\n    effect(() => {\n      const valid = this.isValid();\n      untracked(() => {\n        if (valid) {\n          this.triggerControl.setErrors(null);\n        } else {\n          this.triggerControl.setErrors({ hex: true });\n        }\n      });\n    });\n\n    this.hexInput$\n      .pipe(\n        switchMap((v) => (v === null ? EMPTY : timer(200).pipe(map(() => v)))),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe((v) => this.processHexInput(v, false));\n\n    // Prevents the registry from holding a stale reference to this instance\n    // if it's destroyed while its popover is still open (e.g. route change\n    // without closing the picker first) — not just on normal onPopoverHide.\n    this.destroyRef.onDestroy(() => this.registry.notifyClosed(this.fieldId));\n  }\n\n  /**\n   * Subscribes to the host form control's events. Runs here and not in\n   * ngOnInit: with `formControlName`, the directive only sets up its control\n   * in its own ngOnChanges, which runs after this component's ngOnInit.\n   */\n  ngAfterContentInit(): void {\n    const control = this.ngControl?.control;\n    if (!control) {\n      return;\n    }\n    const sync = () =>\n      this.controlState.set({\n        invalid: control.invalid,\n        interacted: control.touched || control.dirty,\n      });\n    sync();\n    control.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(sync);\n  }\n\n  // ── ControlValueAccessor ────────────────────────────────────────────────\n\n  /**\n   * @method writeValue\n   * @description Hydrates the picker from the form model without emitting.\n   */\n  writeValue(value: string): void {\n    this.value.set(value || '');\n  }\n\n  /**\n   * @method registerOnChange\n   * @description Registers the Reactive Forms change callback.\n   */\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description Registers the Reactive Forms touched callback.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description Syncs the disabled state from Reactive Forms.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled.set(isDisabled);\n  }\n\n  // ── Popover lifecycle ───────────────────────────────────────────────────\n\n  protected onTriggerClick(event: Event): void {\n    if (this.isDisabled()) {\n      return;\n    }\n    this.popover()?.toggle(event as MouseEvent, this.getAnchorEl() ?? this.el.nativeElement);\n  }\n\n  /** Returns the precise anchor element for popover positioning.\n   * For the input variant we target the `p-floatlabel` child instead of the\n   * full `tk-input-text` host. The host includes a bottom section with\n   * `min-height: 1.25rem + margin-top: 0.25rem` that is invisible when empty\n   * but would push the panel ~1.5rem below the visible input field.\n   *\n   * Coupling note: `p-floatlabel` is PrimeNG's float-label host element selector.\n   * If PrimeNG renames it in a future major, the `?? host` fallback keeps\n   * positioning functional (panel opens ~1.5rem lower than ideal). */\n  private getAnchorEl(): HTMLElement | undefined {\n    if (this.variant() === 'swatch') {\n      return this.swatchBtnRef()?.nativeElement;\n    }\n    const host = this.inputTriggerRef()?.nativeElement as HTMLElement | undefined;\n    return (host?.querySelector('p-floatlabel') as HTMLElement | null) ?? host;\n  }\n\n  protected onPopoverShow(): void {\n    this.isOpen.set(true);\n    this.originalValue = this.value();\n    this.suppressNextHideCommit = false;\n    this.registry.requestOpen(this.fieldId, () => this.cancelAndClose());\n    // Sync draft from current value\n    this.syncFromValue(this.value());\n    this.opened.emit();\n    // PrimeNG's absolutePosition flips the panel to \"above\" when it doesn't fit\n    // below, but clamps to scrollTop when there's no space above either — panel\n    // ends up covering the trigger. We override the position after PrimeNG runs.\n    setTimeout(() => this.fixPanelPosition(), 0);\n  }\n\n  private fixPanelPosition(): void {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const container = (this.popover() as any)?.container as HTMLElement | undefined;\n    if (!container) return;\n\n    const anchor = this.getAnchorEl();\n    if (!anchor) return;\n\n    const anchorRect: DOMRect = anchor.getBoundingClientRect();\n    const panelH = container.offsetHeight;\n    const panelW = container.offsetWidth;\n    const vH = window.innerHeight;\n    const vW = window.innerWidth;\n    const scrollY = window.scrollY;\n    const scrollX = window.scrollX;\n\n    const spaceBelow = vH - anchorRect.bottom;\n    const spaceAbove = anchorRect.top;\n\n    let top: number;\n    if (spaceBelow >= panelH) {\n      // Preferred: open below trigger\n      top = anchorRect.bottom + scrollY;\n    } else if (spaceAbove >= panelH) {\n      // Fallback: open above trigger\n      top = anchorRect.top + scrollY - panelH;\n    } else {\n      // Neither side fits: prefer below (scroll context), clamp to viewport edges.\n      // Anchor to trigger bottom and push up only as much as needed so the panel\n      // stays close to the trigger rather than jumping to the top of the page.\n      const idealBelow = anchorRect.bottom + scrollY;\n      const maxTop = scrollY + vH - panelH - 8;\n      const minTop = scrollY + 8;\n      top = Math.max(minTop, Math.min(idealBelow, maxTop));\n    }\n\n    let left = anchorRect.left + scrollX;\n    if (left + panelW > scrollX + vW - 8) {\n      left = scrollX + vW - panelW - 8;\n    }\n    left = Math.max(scrollX + 8, left);\n\n    // Zero out PrimeNG's arrow margin so the panel sits flush with the trigger.\n    container.style.margin = '0';\n    container.style.top = `${top}px`;\n    container.style.insetInlineStart = `${left}px`;\n  }\n\n  protected onPopoverHide(): void {\n    this.isOpen.set(false);\n    this.onTouched();\n    this.triggerControl.markAsTouched();\n    this.ngControl?.control?.markAsTouched();\n    const reason = this.closeReason;\n    this.closeReason = 'accept';\n    if (reason === 'cancel') {\n      this.suppressNextHideCommit = false;\n      // Drop any keystroke still in the debounce window — otherwise it would\n      // commit the cancelled value right after the restore (live mode).\n      this.hexInput$.next(null);\n      this.restoreOriginalValue();\n    } else if (this.suppressNextHideCommit) {\n      // Enter already committed synchronously right before calling hide() —\n      // skip this redundant re-commit for the same still-unchanged draft.\n      this.suppressNextHideCommit = false;\n    } else {\n      // Flush the debounced hex pipeline synchronously first: click-outside\n      // can land within the 200ms debounce window of the last keystroke,\n      // which would otherwise commit a stale draftHex(). The flush never\n      // commits — the explicit commitDraft() below owns the emit.\n      this.flushHexInput();\n      // Always commit on accept: in 'onClose' mode this is the first and\n      // only commit; in 'live' mode the draft is already committed, this\n      // just guarantees the final state is flushed (e.g. Enter pressed\n      // right after a programmatic value change, with no draft edits yet).\n      this.commitDraft();\n    }\n    this.registry.notifyClosed(this.fieldId);\n    this.closed.emit(reason);\n  }\n\n  protected onPanelEnter(event: Event): void {\n    this.confirmAndClose();\n    (event as KeyboardEvent).preventDefault();\n    event.stopPropagation();\n  }\n\n  /** Bound to `(keydown.escape)` on the popover panel: intercepts Escape\n   * before it can bubble to PrimeNG's own document-level close handler, so\n   * the close reason is already recorded as `cancel` by the time `onHide`\n   * fires. */\n  protected onPanelEscape(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.cancelAndClose();\n  }\n\n  private confirmAndClose(): void {\n    if (!this.isValidHex(this.draftHex())) {\n      return;\n    }\n    this.popover()?.hide();\n  }\n\n  /** Closes the popover as a cancellation: `onPopoverHide()` will restore\n   * `originalValue` and emit nothing. Shared by Escape and by the registry\n   * when another `tk-color-picker` instance opens in the same view. */\n  private cancelAndClose(): void {\n    this.closeReason = 'cancel';\n    this.popover()?.hide();\n  }\n\n  private restoreOriginalValue(): void {\n    const normalized = this.normalizeHex(this.originalValue);\n    const restored = this.isValidHex(normalized) ? normalized : '';\n    if (restored) {\n      this.setFromHex(restored, false);\n    } else {\n      this.draftHex.set('');\n      this.displayHexNoHash.set('');\n      this.setValid(true);\n    }\n    // In 'live' mode the value model may already have moved past\n    // originalValue (committed mid-drag) — undo that too, without emitting\n    // colorChange/textColorChange.\n    if (this.value() !== restored) {\n      this.value.set(restored);\n      this.onChange(restored);\n    }\n  }\n\n\n  // ── Draft state updates ─────────────────────────────────────────────────\n\n  protected onSpectrumChange(change: { saturation: number; brightness: number }): void {\n    this.saturation.set(change.saturation);\n    this.brightness.set(change.brightness);\n    this.applyHsv();\n  }\n\n  protected onHueChange(event: Event): void {\n    this.hue.set(Number((event.target as HTMLInputElement).value));\n    this.applyHsv();\n  }\n\n  protected onSwatchPick(color: string): void {\n    const hex = this.normalizeHex(color);\n    if (this.isValidHex(hex)) {\n      this.setFromHex(hex, true);\n    }\n  }\n\n  protected addCustomColor(): void {\n    const hex = this.draftHex();\n    if (!this.isValidHex(hex)) return;\n    const list = this.customColors();\n    if (list.some((c) => c.toLowerCase() === hex)) return;\n    if (list.length >= this.maxCustomColors()) {\n      // Circular buffer: replace the oldest slot (writePtr) and advance the\n      // pointer. Only one cell changes per add — no grid shift.\n      // Both signal mutations are kept outside update() to avoid side effects\n      // inside a state-transition callback.\n      const ptr = this.customColorWritePtr();\n      const next = [...list];\n      next[ptr] = hex;\n      this.customColors.set(next);\n      this.customColorWritePtr.set((ptr + 1) % this.maxCustomColors());\n    } else {\n      this.customColors.update((l) => [...l, hex]);\n    }\n  }\n\n  protected isCustomColorSelected(): boolean {\n    const selected = this.draftHex().toLowerCase();\n    return this.customColors().some((c) => c.toLowerCase() === selected);\n  }\n\n  protected removeCustomColor(): void {\n    const hex = this.draftHex().toLowerCase();\n    this.customColors.update((list) => list.filter((c) => c.toLowerCase() !== hex));\n  }\n\n  protected openEyeDropper(): void {\n    const ctor = (globalThis as unknown as { EyeDropper?: new () => EyeDropperLike })\n      .EyeDropper;\n    if (!ctor) {\n      return;\n    }\n    new ctor()\n      .open()\n      .then((result) => {\n        const hex = this.normalizeHex(result.sRGBHex);\n        if (this.isValidHex(hex)) {\n          this.setFromHex(hex, true);\n          // Focus HEX input so Enter closes modal without opening eyedropper again\n          setTimeout(() => {\n            const inputEl = this.panelHexInput();\n            if (inputEl) {\n              const hexInput = inputEl.nativeElement.querySelector('input');\n              if (hexInput) {\n                hexInput.focus();\n              }\n            }\n          }, 0);\n        }\n      })\n      .catch(() => {\n        // The user dismissed the eyedropper — nothing to do.\n      });\n  }\n\n  // ── HEX input pipeline ──────────────────────────────────────────────────\n\n  protected onHexInput(clean: string): void {\n    this.displayHexNoHash.set(clean);\n    if (clean === '') {\n      this.draftHex.set('');\n    }\n    this.hexInput$.next('#' + clean);\n  }\n\n  /**\n   * Sanitizes typing inside a `tk-input-text` hex field (trigger or popover):\n   * strips non-hex characters at the DOM level (keeping the caret behavior of\n   * the native input) and feeds the shared validation pipeline.\n   */\n  protected onHexNativeInput(event: Event): void {\n    const target = event.target as HTMLInputElement | null;\n    if (!target || target.tagName !== 'INPUT') {\n      return;\n    }\n    const clean = target.value.replace(/[^A-Fa-f0-9]/g, '').toUpperCase().slice(0, 6);\n    if (clean !== target.value) {\n      target.value = clean;\n    }\n    this.onHexInput(clean);\n  }\n\n  /** Blocks non-hex keypresses and enforces 6-char max before char enters the DOM. Enter confirms selection. */\n  protected onHexKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Flush synchronously first: hexInput$ debounces 200ms, so draftHex()\n      // can still be stale if Enter is pressed right after the last\n      // keystroke (fast typing). Mirrors onHexBlur()'s own flush. The flush\n      // never commits — the explicit commitDraft() right below owns the emit.\n      this.flushHexInput();\n      // Commit directly — covers both the trigger HEX field edited while the\n      // popover is closed (no onPopoverHide to fall back on) and the panel\n      // HEX field, without depending on the popover's close animation timing.\n      this.commitDraft();\n      // If a real popover is actually open, hide() will trigger\n      // onPopoverHide()'s own accept-commit right after — flag it so that\n      // one is skipped instead of re-emitting the same already-committed\n      // value a second time.\n      this.suppressNextHideCommit = true;\n      this.popover()?.hide();\n      return;\n    }\n\n    if (event.ctrlKey || event.metaKey || event.altKey) {\n      return;\n    }\n    const navigationKeys = [\n      'Backspace', 'Delete', 'Tab',\n      'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n      'Home', 'End',\n    ];\n    if (navigationKeys.includes(event.key)) {\n      return;\n    }\n    if (!/^[A-Fa-f0-9]$/.test(event.key)) {\n      event.preventDefault();\n      return;\n    }\n    // Enforce 6-char max: block if no selection to replace and already full\n    const target = event.target as HTMLInputElement | null;\n    if (target && target.tagName === 'INPUT') {\n      const selectionLength = (target.selectionEnd ?? 0) - (target.selectionStart ?? 0);\n      if (target.value.length >= 6 && selectionLength === 0) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  /** Strips non-hex chars from pasted text before it reaches the input model. */\n  protected onHexPaste(event: ClipboardEvent): void {\n    event.preventDefault();\n    const text = event.clipboardData?.getData('text/plain') ?? '';\n    const clean = text.replace(/[^A-Fa-f0-9]/g, '').toUpperCase();\n    const target = event.target as HTMLInputElement | null;\n    if (!target || target.tagName !== 'INPUT') {\n      return;\n    }\n    const start = target.selectionStart ?? 0;\n    const end = target.selectionEnd ?? 0;\n    const merged = (target.value.slice(0, start) + clean + target.value.slice(end)).slice(0, 6);\n    target.value = merged;\n    this.onHexInput(merged);\n  }\n\n  protected onHexBlur(): void {\n    // The flush only syncs draftHex/displayHexNoHash (and drops the pending\n    // debounce) — the explicit commitDraft() below owns the emit.\n    this.flushHexInput();\n    this.onTouched();\n    this.triggerControl.markAsTouched();\n    this.ngControl?.control?.markAsTouched();\n    if (!this.isOpen()) {\n      // Losing focus on the closed trigger's HEX field (variant=\"input\")\n      // is the \"I'm done editing\" signal for that path — there's no\n      // popover session for onPopoverHide() to eventually flush, so this\n      // commits unconditionally, the same way Enter already does.\n      this.commitDraft();\n    }\n  }\n\n  /**\n   * Synchronously applies what's currently in the HEX field (normalized) and\n   * cancels the pending debounced emission, so it can't re-validate the same\n   * text later as \"still typing\" and clear the error this flush just set.\n   * Never commits: callers own the emit via commitDraft().\n   */\n  private flushHexInput(): void {\n    this.hexInput$.next(null);\n    this.processHexInput('#' + this.displayHexNoHash(), true, false);\n  }\n\n  private processHexInput(raw: string, forceNormalize: boolean, commit = true): void {\n    const text = raw?.trim() ?? '';\n    const body = (text.startsWith('#') ? text.slice(1) : text).trim();\n    if (body.length === 0) {\n      this.draftHex.set('');\n      if (this.required()) {\n        this.errorType.set('required');\n        this.setValid(!forceNormalize);\n      } else {\n        this.setValid(true);\n        if (commit) {\n          this.maybeCommit();\n        }\n      }\n      return;\n    }\n    const hex = '#' + body;\n    if (this.isValidHex(hex)) {\n      this.applyValidHex(hex, forceNormalize, commit);\n    } else {\n      this.applyInvalidHex(body, forceNormalize);\n    }\n  }\n\n  private applyValidHex(hex: string, forceNormalize: boolean, commit: boolean): void {\n    if (hex.length === 4 && !forceNormalize) {\n      this.setValid(true);\n      return;\n    }\n    const norm = this.normalizeHex(hex);\n    this.setValid(true);\n    if (norm !== this.draftHex()) {\n      this.setFromHex(norm, commit);\n    } else {\n      this.displayHexNoHash.set(norm.slice(1).toUpperCase());\n    }\n  }\n\n  private applyInvalidHex(rawText: string, forceNormalize: boolean): void {\n    this.errorType.set('invalid');\n    const partial =\n      !forceNormalize && /^[A-Fa-f0-9]*$/.test(rawText) && rawText.length <= 6;\n    this.setValid(partial);\n  }\n\n  private setValid(value: boolean): void {\n    if (this.isValid() === value) {\n      return;\n    }\n    this.isValid.set(value);\n    this.validChange.emit(value);\n  }\n\n  // ── Internal state helpers ──────────────────────────────────────────────\n\n  private syncFromValue(incoming: string): void {\n    if (!incoming) {\n      this.draftHex.set('');\n      this.displayHexNoHash.set('');\n      if (this.required()) {\n        this.errorType.set('required');\n        this.setValid(false);\n      } else {\n        this.setValid(true);\n      }\n      return;\n    }\n    const hex = this.normalizeHex(incoming);\n    if (this.isValidHex(hex)) {\n      if (hex !== this.draftHex()) {\n        this.setFromHex(hex, false);\n      }\n      return;\n    }\n    const body = (incoming.startsWith('#') ? incoming.slice(1) : incoming).trim();\n    this.draftHex.set(incoming);\n    this.displayHexNoHash.set(body);\n    this.errorType.set('invalid');\n    this.setValid(false);\n  }\n\n  private setFromHex(hex: string, interactive: boolean): void {\n    this.draftHex.set(hex);\n    this.displayHexNoHash.set(hex.slice(1).toUpperCase());\n    this.setValid(true);\n    const hsv = this.hexToHsv(hex);\n    this.hue.set(hsv.h);\n    this.saturation.set(hsv.s);\n    this.brightness.set(hsv.v);\n    if (interactive) {\n      this.maybeCommit();\n    }\n  }\n\n  private applyHsv(): void {\n    const hex = this.hsvToHex(this.hue(), this.saturation(), this.brightness());\n    this.draftHex.set(hex);\n    this.displayHexNoHash.set(hex.slice(1).toUpperCase());\n    this.setValid(true);\n    this.maybeCommit();\n  }\n\n  /**\n   * Commits the draft color immediately, but only in `'live'` emitMode.\n   * In `'onClose'` mode, mid-edit draft changes never commit here — not even\n   * for the trigger HEX field edited while the popover is closed. That path\n   * still needs an explicit \"I'm done\" signal, just like a popover session\n   * does: Enter (`onHexKeydown`) or losing focus (`onHexBlur`), both of which\n   * commit unconditionally regardless of `emitMode()`. Committing on every\n   * debounce tick while the field still has focus would fire on each\n   * completed-looking HEX mid-typing — exactly the noise `'onClose'` exists\n   * to avoid (e.g. a consumer wiring this straight to an API call).\n   */\n  private maybeCommit(): void {\n    if (this.emitMode() === 'live') {\n      this.commitDraft();\n    }\n  }\n\n  private commitDraft(): void {\n    if (!this.isValid() || this.isDisabled()) {\n      return;\n    }\n    const hex = this.draftHex();\n    if (hex === '') {\n      this.value.set('');\n      this.onChange('');\n      this.ngControl?.control?.markAsDirty();\n      this.colorChange.emit('');\n      this.textColorChange.emit('');\n      return;\n    }\n    if (!this.isValidHex(hex)) {\n      return;\n    }\n    this.value.set(hex);\n    this.onChange(hex);\n    this.ngControl?.control?.markAsDirty();\n    this.colorChange.emit(hex);\n    this.textColorChange.emit(this.contrastTextColor());\n  }\n\n  // ── Color math ──────────────────────────────────────────────────────────\n\n  private normalizeHex(value: string): string {\n    if (!value?.trim()) {\n      return '';\n    }\n    let v = value.trim();\n    v = v.startsWith('#') ? v : '#' + v;\n    if (/^#[A-Fa-f0-9]{3}$/.test(v)) {\n      v = '#' + v[1] + v[1] + v[2] + v[2] + v[3] + v[3];\n    }\n    return v.toLowerCase();\n  }\n\n  private isValidHex(value: string): boolean {\n    return HEX_REGEX.test(value);\n  }\n\n  private hexToHsv(hex: string): { h: number; s: number; v: number } {\n    const r = Number.parseInt(hex.slice(1, 3), 16) / 255;\n    const g = Number.parseInt(hex.slice(3, 5), 16) / 255;\n    const b = Number.parseInt(hex.slice(5, 7), 16) / 255;\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const delta = max - min;\n    let h = 0;\n    if (delta !== 0) {\n      if (max === r) {\n        h = ((g - b) / delta) % 6;\n      } else if (max === g) {\n        h = (b - r) / delta + 2;\n      } else {\n        h = (r - g) / delta + 4;\n      }\n      h = Math.round(h * 60);\n      if (h < 0) {\n        h += 360;\n      }\n    }\n    return { h, s: max === 0 ? 0 : delta / max, v: max };\n  }\n\n  private hsvToHex(h: number, s: number, v: number): string {\n    const c = v * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = v - c;\n    let r = 0;\n    let g = 0;\n    let b = 0;\n    if (h < 60) {\n      r = c;\n      g = x;\n    } else if (h < 120) {\n      r = x;\n      g = c;\n    } else if (h < 180) {\n      g = c;\n      b = x;\n    } else if (h < 240) {\n      g = x;\n      b = c;\n    } else if (h < 300) {\n      r = x;\n      b = c;\n    } else {\n      r = c;\n      b = x;\n    }\n    const toHex = (n: number) =>\n      Math.round((n + m) * 255)\n        .toString(16)\n        .padStart(2, '0');\n    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n  }\n}\n","<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              −\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-color-picker.mjs","sources":["../../../projects/design-system/components/color-picker/src/color-picker-registry.service.ts","../../../projects/design-system/components/color-picker/src/sections/spectrum-canvas.component.ts","../../../projects/design-system/components/color-picker/src/sections/swatch-grid.component.ts","../../../projects/design-system/components/color-picker/src/color-picker.component.ts","../../../projects/design-system/components/color-picker/src/color-picker.component.html","../../../projects/design-system/components/color-picker/tekus-design-system-components-color-picker.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\ninterface RegisteredPicker {\n  id: string;\n  requestClose: () => void;\n}\n\n/**\n * @service ColorPickerRegistryService\n * @description\n * Coordinates mutual exclusivity between `tk-color-picker` instances mounted\n * in the same view: opening one instance requests the previously open one to\n * close (as a cancellation — no value is emitted). Transparent to consumers,\n * no public API on `ColorPickerComponent` changes because of it.\n */\n@Injectable({ providedIn: 'root' })\nexport class ColorPickerRegistryService {\n  private active: RegisteredPicker | null = null;\n\n  /**\n   * Called from `onPopoverShow()`. If another instance is currently open,\n   * asks it to close (cancel) before registering the new one as active.\n   */\n  requestOpen(id: string, requestClose: () => void): void {\n    if (this.active && this.active.id !== id) {\n      this.active.requestClose();\n    }\n    this.active = { id, requestClose };\n  }\n\n  /**\n   * Called from `onPopoverHide()` and on component destroy, so a destroyed\n   * or already-closed instance never lingers as the registered active one.\n   */\n  notifyClosed(id: string): void {\n    if (this.active?.id === id) {\n      this.active = null;\n    }\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\n/**\n * @component ColorPickerSpectrumComponent\n * @description\n * Internal saturation/brightness canvas of `tk-color-picker` (NOT public API).\n * A hue-colored area with white→transparent (saturation) and\n * transparent→black (brightness) CSS overlays. Supports pointer dragging\n * (tracked on `document` so the drag can leave the area) and full keyboard\n * operation via a 2D slider pattern (arrow keys, Shift for 10% steps).\n */\n@Component({\n  selector: 'tk-color-picker-spectrum',\n  template: `\n    <div\n      class=\"tk-color-picker-spectrum__area\"\n      role=\"slider\"\n      tabindex=\"0\"\n      [style.background]=\"hueBackground()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-valuetext]=\"valueText()\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      [attr.aria-valuenow]=\"Math.round(saturation() * 100)\"\n      (pointerdown)=\"onPointerDown($event)\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div\n        class=\"tk-color-picker-spectrum__cursor\"\n        [style.left.%]=\"saturation() * 100\"\n        [style.top.%]=\"(1 - brightness()) * 100\"\n        [style.background]=\"color()\"\n      ></div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: block;\n    }\n\n    .tk-color-picker-spectrum__area {\n      width: 100%;\n      height: 6.5rem;\n      border-radius: var(--tk-borderRadius-s, 0.25rem);\n      position: relative;\n      overflow: hidden;\n      cursor: crosshair;\n      touch-action: none;\n      user-select: none;\n      outline: none;\n    }\n\n    .tk-color-picker-spectrum__area::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to right, #fff, transparent);\n    }\n\n    .tk-color-picker-spectrum__area::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to bottom, transparent, #000);\n    }\n\n    .tk-color-picker-spectrum__area:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--tk-color-border-focus, #16006f);\n    }\n\n    .tk-color-picker-spectrum__cursor {\n      position: absolute;\n      width: 0.875rem;\n      height: 0.875rem;\n      border-radius: var(--tk-borderRadius-full, 50%);\n      border: 2px solid var(--tk-color-background-default, #ffffff);\n      box-shadow: 0 0 0 1px var(--tk-color-border-strong, #424243);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      z-index: 2;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorPickerSpectrumComponent {\n  /** Current hue (0–360) painting the base background. */\n  hue = input<number>(0);\n\n  /** Current saturation (0–1) → horizontal cursor position. */\n  saturation = input<number>(1);\n\n  /** Current brightness/value (0–1) → vertical cursor position (inverted). */\n  brightness = input<number>(1);\n\n  /** Current color painted inside the cursor. */\n  color = input<string>('');\n\n  /** Accessible label of the 2D slider. */\n  ariaLabel = input<string>('Saturation and brightness');\n\n  /** Emits on every pointer/keyboard change with the new saturation/brightness pair. */\n  changed = output<{ saturation: number; brightness: number }>();\n\n  protected readonly Math = Math;\n  protected readonly hueBackground = computed(() => `hsl(${this.hue()}, 100%, 50%)`);\n  protected readonly valueText = computed(\n    () =>\n      `${this.ariaLabel()}: ${Math.round(this.saturation() * 100)}%, ${Math.round(this.brightness() * 100)}%`,\n  );\n\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly destroyRef = inject(DestroyRef);\n\n  private readonly onDragMove = (e: PointerEvent) => this.applyPointer(e);\n  private readonly onDragEnd = () => this.removeDragListeners();\n\n  constructor() {\n    this.destroyRef.onDestroy(() => this.removeDragListeners());\n  }\n\n  protected onPointerDown(event: PointerEvent): void {\n    event.preventDefault();\n    (event.currentTarget as HTMLElement).focus();\n    this.applyPointer(event);\n    document.addEventListener('pointermove', this.onDragMove);\n    document.addEventListener('pointerup', this.onDragEnd);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const step = event.shiftKey ? 0.1 : 0.01;\n    let saturation = this.saturation();\n    let brightness = this.brightness();\n\n    switch (event.key) {\n      case 'ArrowRight':\n        saturation += step;\n        break;\n      case 'ArrowLeft':\n        saturation -= step;\n        break;\n      case 'ArrowUp':\n        brightness += step;\n        break;\n      case 'ArrowDown':\n        brightness -= step;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.emitClamped(saturation, brightness);\n  }\n\n  private applyPointer(event: PointerEvent): void {\n    const area = this.elementRef.nativeElement.querySelector(\n      '.tk-color-picker-spectrum__area',\n    ) as HTMLElement | null;\n    if (!area) {\n      return;\n    }\n    const rect = area.getBoundingClientRect();\n    this.emitClamped(\n      (event.clientX - rect.left) / rect.width,\n      1 - (event.clientY - rect.top) / rect.height,\n    );\n  }\n\n  private emitClamped(saturation: number, brightness: number): void {\n    this.changed.emit({\n      saturation: Math.max(0, Math.min(1, saturation)),\n      brightness: Math.max(0, Math.min(1, brightness)),\n    });\n  }\n\n  private removeDragListeners(): void {\n    document.removeEventListener('pointermove', this.onDragMove);\n    document.removeEventListener('pointerup', this.onDragEnd);\n  }\n}\n","import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\n\n/**\n * @component ColorPickerSwatchGridComponent\n * @description\n * Internal grid of color swatches of `tk-color-picker` (NOT public API).\n * Used by both the predefined palette and the custom colors sections.\n * Each swatch is a real button labelled with its hex value;\n * the currently selected color is marked with `aria-pressed`.\n */\n@Component({\n  selector: 'tk-color-picker-swatch-grid',\n  template: `\n    <div class=\"tk-color-picker-swatch-grid__grid\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n      @for (color of colors(); track color) {\n        <button\n          type=\"button\"\n          class=\"tk-color-picker-swatch-grid__swatch\"\n          [class.tk-color-picker-swatch-grid__swatch--selected]=\"isSelected(color)\"\n          [style.background-color]=\"color\"\n          [attr.aria-label]=\"color\"\n          [attr.aria-pressed]=\"isSelected(color)\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"picked.emit(color)\"\n        ></button>\n      }\n      <ng-content></ng-content>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: block;\n    }\n\n    .tk-color-picker-swatch-grid__grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(1.25rem, 1fr));\n      gap: var(--tk-spacing-gap-xs, 0.25rem);\n    }\n\n    .tk-color-picker-swatch-grid__swatch {\n      appearance: none;\n      padding: 0;\n      width: 100%;\n      aspect-ratio: 1;\n      border: 1px solid var(--tk-color-border-subtle, #e4e4e4);\n      border-radius: var(--tk-borderRadius-xs, 0.125rem);\n      cursor: pointer;\n      transition: transform 120ms ease, box-shadow 120ms ease;\n    }\n\n    .tk-color-picker-swatch-grid__swatch:hover {\n      transform: scale(1.12);\n    }\n\n    .tk-color-picker-swatch-grid__swatch:focus-visible {\n      outline: 2px solid var(--tk-color-border-focus, #16006f);\n      outline-offset: 1px;\n    }\n\n    .tk-color-picker-swatch-grid__swatch--selected {\n      box-shadow: 0 0 0 2px var(--tk-color-background-default, #ffffff),\n        0 0 0 4px var(--tk-color-accent-default, #6ad0bc);\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorPickerSwatchGridComponent {\n  /** Hex colors to render as swatches. */\n  colors = input<string[]>([]);\n\n  /** Currently selected hex (normalized lowercase) to highlight. */\n  selected = input<string>('');\n\n  /** Accessible label of the swatch group. */\n  ariaLabel = input<string>('');\n\n  /** Emits the picked hex color. */\n  picked = output<string>();\n\n  protected isSelected(color: string): boolean {\n    return color.toLowerCase() === this.selected().toLowerCase();\n  }\n}\n","import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  NgControl,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { ButtonModule } from 'primeng/button';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MessageModule } from 'primeng/message';\nimport { Popover, PopoverModule } from 'primeng/popover';\nimport { EMPTY, Subject, map, switchMap, timer } from 'rxjs';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { InputTextComponent } from '@tekus/design-system/components/input-text';\nimport {\n  ContrastResult,\n  getContrastResult,\n  getContrastTextColor,\n} from '@tekus/design-system/utils/wcag-contrast';\nimport {\n  ColorPickerCloseReason,\n  ColorPickerEmitMode,\n  ColorPickerSections,\n  ColorPickerTexts,\n  ColorPickerVariant,\n  EyeDropperLike,\n} from './color-picker.types';\nimport { ColorPickerRegistryService } from './color-picker-registry.service';\nimport { ColorPickerSpectrumComponent } from './sections/spectrum-canvas.component';\nimport { ColorPickerSwatchGridComponent } from './sections/swatch-grid.component';\n\nconst HEX_REGEX = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n\nconst DEFAULT_PRESET_COLORS: string[] = [\n  '#ffffff', // white\n  '#000000', // black\n  '#929292', // gray\n  '#ffea00', // yellow\n  '#fff9ab', // light yellow\n  '#0c5dbc', // blue\n  '#6aa7f0', // light blue\n  '#ff0000', // red\n  '#ff95a2', // pink\n  '#ff9f00', // orange\n  '#417505', // dark green\n  '#7ed321', // light green\n  '#7300d9', // purple\n  '#d4a4ff', // lilac\n  '#50e3c2', // turquoise\n];\n\n\nconst DEFAULT_SECTIONS: Required<ColorPickerSections> = {\n  swatches: true,\n  customColors: true,\n  spectrum: true,\n  hue: true,\n  hex: true,\n  eyedropper: true,\n  contrast: true,\n};\n\n/**\n * @component ColorPickerComponent\n * @description\n * Configurable color picker of the Tekus Design System. Renders a trigger\n * (`input` variant with editable HEX, or compact `swatch` variant) that opens\n * a PrimeNG `p-popover` composed of independently toggleable sections:\n * predefined swatches, custom colors, saturation/brightness spectrum, hue bar,\n * HEX field with EyeDropper support, WCAG contrast preview and a\n * Cancel/Accept action bar with temporary selection state.\n * Implements `ControlValueAccessor` for Reactive Forms integration.\n *\n * @usage\n * ```html\n * <tk-color-picker\n *   label=\"Color\"\n *   [(value)]=\"color\"\n *   [contrastColor]=\"'#ffffff'\"\n *   (colorChange)=\"onColor($event)\">\n * </tk-color-picker>\n * ```\n */\n@Component({\n  selector: 'tk-color-picker',\n  imports: [\n    ButtonModule,\n    InputTextModule,\n    MessageModule,\n    PopoverModule,\n    ButtonComponent,\n    IconComponent,\n    InputTextComponent,\n    ColorPickerSpectrumComponent,\n    ColorPickerSwatchGridComponent,\n  ],\n  templateUrl: './color-picker.component.html',\n  styleUrl: './color-picker.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorPickerComponent implements ControlValueAccessor, Validator, AfterContentInit {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly el = inject(ElementRef);\n  private readonly registry = inject(ColorPickerRegistryService);\n\n  private readonly init = (() => {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  })();\n\n  /**\n   * @property {ColorPickerVariant} variant\n   * @description\n   * Trigger appearance: `input` shows swatch + editable HEX + chevron,\n   * `swatch` shows only swatch + chevron.\n   * @default `'input'`\n   */\n  variant = input<ColorPickerVariant>('input');\n\n  /**\n   * @property {string} label\n   * @description\n   * Label displayed above the trigger.\n   * @default `''`\n   */\n  label = input<string>('');\n\n  /**\n   * @property {string} hint\n   * @description\n   * Hint text displayed below the trigger (hidden while an error is shown).\n   * @default `''`\n   */\n  hint = input<string>('');\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the trigger and the popover. Also controlled by Reactive Forms\n   * via `setDisabledState`.\n   * @default `false`\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * @property {boolean} required\n   * @description\n   * When `true`, an empty HEX field shows the required error on blur.\n   * @default `false`\n   */\n  required = input<boolean>(false);\n\n  /**\n   * @property {ColorPickerSections} sections\n   * @description\n   * Enables/disables each popover section. Missing flags default to `true`.\n   * Disabling `actionBar` switches the picker to live mode (every valid\n   * change is emitted immediately).\n   * @default `{}` (all sections enabled)\n   */\n  sections = input<ColorPickerSections>({});\n\n  /**\n   * @property {string[]} presetColors\n   * @description\n   * Colors of the predefined palette section.\n   * @default Design System base palette\n   */\n  presetColors = input<string[]>(DEFAULT_PRESET_COLORS);\n\n  /**\n   * @property {string | null} contrastColor\n   * @description\n   * Optional override of the text color used for the WCAG contrast pair.\n   * When `null` (default) the text color is resolved automatically from the\n   * picked background luminance (ITU-R BT.601): black over light colors,\n   * white over dark ones.\n   * @default `null`\n   */\n  contrastColor = input<string | null>(null);\n\n  /**\n   * @property {number} maxCustomColors\n   * @description\n   * Maximum number of custom color slots. Once the list is at capacity, the\n   * oldest slot is replaced using a circular buffer — the \"+\" button stays\n   * visible at all times.\n   * @default `18`\n   */\n  maxCustomColors = input<number>(18);\n\n  /**\n   * @property {'top' | 'bottom'} placement\n   * @description\n   * Preferred position of the popover relative to the trigger.\n   * @default `'bottom'`\n   */\n  readonly placement = input<'top' | 'bottom'>('bottom');\n\n  /**\n   * @property {string} errorMessage\n   * @description\n   * Message to display when the field is invalid (required and empty, or an\n   * invalid hex). The component has no built-in error texts.\n   * @default `''`\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {ColorPickerEmitMode} emitMode\n   * @description\n   * Emission strategy for `colorChange`/`textColorChange`/`value`:\n   * `'live'` emits on every valid draft change (default, unchanged behavior).\n   * `'onClose'` emits once, with the final value, only when the popover\n   * closes by confirmation (Enter / click-outside) — Escape, or being closed\n   * by another `tk-color-picker` instance opening in the same view, never\n   * emits.\n   *\n   * Exception: editing the trigger HEX field directly while the popover is\n   * closed (`variant=\"input\"`) has no popover session to defer to, so under\n   * `'onClose'` it commits on its own equivalent of \"close\" — Enter, or\n   * losing focus (blur) — not on every debounce tick while still typing.\n   * This avoids firing on each momentarily-complete-looking HEX mid-edit,\n   * which matters when `colorChange` is wired straight to an API call.\n   * @default `'live'`\n   */\n  emitMode = input<ColorPickerEmitMode>('live');\n\n  /**\n   * @property {ColorPickerTexts} texts\n   * @description\n   * UI texts (section labels, buttons, errors). Defaults are in English so\n   * consumers can localize with their own i18n solution.\n   * @default `{}` (English defaults)\n   */\n  texts = input<ColorPickerTexts>({});\n\n  /**\n   * @property {ModelSignal<string>} value\n   * @description\n   * Confirmed color as a normalized lowercase 6-digit hex with `#`.\n   * Two-way bindable.\n   * @default `''`\n   */\n  value = model<string>('');\n\n  /**\n   * @property {ModelSignal<string[]>} customColors\n   * @description\n   * User-saved custom colors. Two-way bindable so the consumer decides\n   * where to persist them.\n   * @default `[]`\n   */\n  customColors = model<string[]>([]);\n\n  /**\n   * @event colorChange\n   * @description\n   * Emits the confirmed background hex color. Timing depends on `emitMode()`:\n   * `'live'` emits on every valid change (drag, keystroke, swatch pick, or\n   * trigger HEX edit while closed); `'onClose'` emits once, with the final\n   * value, only when the popover closes by confirmation (Enter /\n   * click-outside). Never emits on Escape, when another instance forces this\n   * one to close, on invalid values, on hydration, or while disabled. Always\n   * emitted together with `textColorChange` in the same synchronous call, so\n   * both values belong to the same commit.\n   */\n  colorChange = output<string>();\n\n  /**\n   * @event textColorChange\n   * @description\n   * Emits together with `colorChange`, same timing, same commit: the ideal\n   * text color over the confirmed background (`#000000` on light colors,\n   * `#ffffff` on dark ones, or the `contrastColor` override when provided).\n   */\n  textColorChange = output<string>();\n\n  /**\n   * @event validChange\n   * @description\n   * Emits only when the validity of the HEX value changes.\n   */\n  validChange = output<boolean>();\n\n  /**\n   * @event opened\n   * @description\n   * Emits when the picker popover opens.\n   */\n  opened = output<void>();\n\n  /**\n   * @event closed\n   * @description\n   * Emits when the popover closes, with the close reason\n   * (`accept` confirmed, `cancel` discarded/restored).\n   */\n  closed = output<ColorPickerCloseReason>();\n\n  popover = viewChild<Popover>('op');\n  private swatchBtnRef = viewChild('swatchBtn', { read: ElementRef });\n  private inputTriggerRef = viewChild('inputTrigger', { read: ElementRef });\n  private panelHexInput = viewChild('panelHexInput', { read: ElementRef });\n\n  /**\n   * Internal FormControl handed to the `tk-input-text` trigger so the\n   * disabled state propagates through the Design System input.\n   */\n  protected readonly triggerControl = new FormControl('');\n\n  protected readonly isOpen = signal(false);\n  protected readonly hue = signal(0);\n  protected readonly saturation = signal(1);\n  protected readonly brightness = signal(1);\n  protected readonly draftHex = signal('');\n  protected readonly displayHexNoHash = signal('');\n  protected readonly isValid = signal(true);\n  protected readonly errorType = signal<'invalid' | 'required'>('invalid');\n  private readonly cvaDisabled = signal(false);\n  /** Set on the first blur / close, when there is no host form control */\n  private readonly touched = signal(false);\n\n  protected readonly isDisabled = computed(() => this.disabled() || this.cvaDisabled());\n\n  protected readonly resolvedSections = computed<Required<ColorPickerSections>>(() => ({\n    ...DEFAULT_SECTIONS,\n    ...this.sections(),\n  }));\n\n  protected readonly resolvedTexts = computed(() => {\n    const custom = this.texts();\n    return {\n      ...custom,\n      hexLabel: custom.hexLabel ?? 'HEX',\n      contrastSampleText: custom.contrastSampleText ?? 'Aa',\n    };\n  });\n\n  /** Valid draft hex to paint swatches, or null → neutral fallback via CSS. */\n  /**\n   * Always reflects `draftHex()`, not `value()` — independent of `emitMode`\n   * and of whether the popover is open. `draftHex` tracks every keystroke\n   * (trigger or panel HEX field, spectrum/hue/swatch picks) in real time, so\n   * the swatch gives immediate visual feedback while the user is still\n   * typing, even under `emitMode=\"onClose\"` where the actual commit/emit is\n   * deferred to Enter/blur/click-outside.\n   */\n  protected readonly swatchColor = computed(() => {\n    const color = this.draftHex();\n    return this.isValidHex(color) ? color : null;\n  });\n\n  /**\n   * Text color of the contrast pair: the `contrastColor` override when valid,\n   * otherwise resolved automatically from the draft background luminance.\n   */\n  protected readonly contrastTextColor = computed(() => {\n    const override = this.contrastColor();\n    if (override) {\n      const norm = this.normalizeHex(override);\n      if (this.isValidHex(norm)) {\n        return norm;\n      }\n    }\n    const bg = this.draftHex();\n    return getContrastTextColor(this.isValidHex(bg) ? bg : '#ffffff');\n  });\n\n  protected readonly contrastResult = computed<ContrastResult | null>(() => {\n    const bg = this.draftHex();\n    if (!this.isValidHex(bg)) {\n      return null;\n    }\n    return getContrastResult(bg, this.contrastTextColor());\n  });\n\n  protected readonly showContrast = computed(\n    () => this.resolvedSections().contrast && this.contrastResult() !== null,\n  );\n\n  protected readonly eyeDropperSupported =\n    typeof globalThis !== 'undefined' && 'EyeDropper' in globalThis;\n\n  protected readonly showEyedropper = computed(\n    () =>\n      this.resolvedSections().hex &&\n      this.resolvedSections().eyedropper &&\n      this.eyeDropperSupported,\n  );\n\n  protected readonly canAddCustom = computed(() => this.isValidHex(this.draftHex()));\n\n  protected readonly errorText = computed(() => {\n    return this.errorMessage();\n  });\n\n  protected readonly isInvalid = computed(() => {\n    const { invalid, interacted } = this.controlState();\n    if (!this.isValid()) {\n      // An empty required picker waits for the user (blur / close), like\n      // tk-input-text; an invalid HEX shows right away\n      const userInteracted = this.ngControl?.control ? interacted : this.touched();\n      return this.errorType() !== 'required' || userInteracted;\n    }\n    return invalid && interacted;\n  });\n\n  protected readonly fieldId: string;\n  protected readonly panelFieldId: string;\n  protected readonly errorId: string;\n\n  private static instanceCount = 0;\n\n  private readonly boundValidate = this.validate.bind(this);\n  private syncControlState: () => void = () => undefined;\n  private originalValue = '';\n  private closeReason: ColorPickerCloseReason = 'accept';\n  // Set right before popover().hide() when Enter already committed\n  // synchronously, so onPopoverHide()'s own accept-commit doesn't fire a\n  // duplicate colorChange/textColorChange for the same still-unchanged\n  // draft. Reset on every open (so it can never leak into a later session)\n  // and explicitly in every branch of onPopoverHide() (not just the one\n  // that consumes it) so the flag never depends on which branch runs.\n  private suppressNextHideCommit = false;\n  // Circular buffer pointer: tracks the oldest slot index to replace when customColors is at capacity.\n  // Starts at 0 (correct for both empty lists and backend-loaded full arrays, assuming oldest-first order).\n  // Limitation: not reset when customColors is rebound externally at runtime without destroying the component.\n  private readonly customColorWritePtr = signal(0);\n  // `null` cancels whatever is still pending in the debounce window — pushed\n  // by every synchronous flush/cancel so a stale emission can't re-enter\n  // processHexInput() ~200ms later and undo it.\n  private readonly hexInput$ = new Subject<string | null>();\n  // Mirror of the host form control's validity/interaction state.\n  // AbstractControl getters are not signals, so a computed() reading them\n  // directly would never recompute — this is fed from `control.events`.\n  private readonly controlState = signal(\n    { invalid: false, interacted: false },\n    { equal: (a, b) => a.invalid === b.invalid && a.interacted === b.interacted },\n  );\n\n  onChange: (value: string) => void = () => {};\n  onTouched: () => void = () => {};\n\n  constructor() {\n    ColorPickerComponent.instanceCount++;\n    this.fieldId = `tk-color-picker-${ColorPickerComponent.instanceCount}`;\n    this.panelFieldId = `${this.fieldId}-panel`;\n    this.errorId = `${this.fieldId}-error`;\n\n    effect(() => {\n      const incoming = this.value();\n      untracked(() => this.syncFromValue(incoming));\n    });\n\n    effect(() => {\n      if (this.isDisabled() && this.isOpen()) {\n        this.popover()?.hide();\n      }\n    });\n\n    effect(() => {\n      if (this.isDisabled()) {\n        this.triggerControl.disable({ emitEvent: false });\n      } else {\n        this.triggerControl.enable({ emitEvent: false });\n      }\n    });\n\n    // Sync triggerControl validity so tk-input-text shows errors natively.\n    effect(() => {\n      const valid = this.isValid();\n      untracked(() => {\n        if (valid) {\n          this.triggerControl.setErrors(null);\n        } else {\n          this.triggerControl.setErrors({ hex: true });\n        }\n      });\n    });\n\n    this.hexInput$\n      .pipe(\n        switchMap((v) => (v === null ? EMPTY : timer(200).pipe(map(() => v)))),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe((v) => this.processHexInput(v, false));\n\n    // Prevents the registry from holding a stale reference to this instance\n    // if it's destroyed while its popover is still open (e.g. route change\n    // without closing the picker first) — not just on normal onPopoverHide.\n    this.destroyRef.onDestroy(() => this.registry.notifyClosed(this.fieldId));\n  }\n\n  /**\n   * Adds this picker's validator to the host form control and subscribes to\n   * its events. Runs here and not in ngOnInit: with `formControlName`, the\n   * directive only sets up its control in its own ngOnChanges, which runs\n   * after this component's ngOnInit.\n   */\n  ngAfterContentInit(): void {\n    const control = this.ngControl?.control;\n    if (!control) {\n      return;\n    }\n    control.addValidators(this.boundValidate);\n    control.updateValueAndValidity({ emitEvent: false });\n    this.destroyRef.onDestroy(() => control.removeValidators(this.boundValidate));\n\n    this.syncControlState = () =>\n      this.controlState.set({\n        invalid: control.invalid,\n        interacted: control.touched || control.dirty,\n      });\n    this.syncControlState();\n    control.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.syncControlState());\n  }\n\n  /**\n   * @method validate\n   * @description\n   * Errors of the typed HEX, added to the host form control: `{ required }`\n   * when the picker is `required` and empty, `{ invalidHex }` when the text is\n   * not a valid color. Pick the message with `control.hasError(...)`.\n   */\n  validate(): ValidationErrors | null {\n    if (this.isValid()) {\n      return null;\n    }\n    return this.errorType() === 'required' ? { required: true } : { invalidHex: true };\n  }\n\n  // ── ControlValueAccessor ────────────────────────────────────────────────\n\n  /**\n   * @method writeValue\n   * @description Hydrates the picker from the form model without emitting.\n   */\n  writeValue(value: string | null): void {\n    this.value.set(value || '');\n    // Sync now, not in the value effect: the form runs the validators right\n    // after writeValue and must see the new value's validity\n    this.syncFromValue(value || '');\n  }\n\n  /**\n   * @method registerOnChange\n   * @description Registers the Reactive Forms change callback.\n   */\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description Registers the Reactive Forms touched callback.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description Syncs the disabled state from Reactive Forms.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled.set(isDisabled);\n  }\n\n  // ── Popover lifecycle ───────────────────────────────────────────────────\n\n  protected onTriggerClick(event: Event): void {\n    if (this.isDisabled()) {\n      return;\n    }\n    if (!this.isOpen()) {\n      // The swatch button keeps the focus on the HEX field (no blur), so apply\n      // what was typed, like a blur does, before the popover syncs its draft\n      // from the value: a pending or shorthand HEX would be lost otherwise\n      this.flushHexInput();\n      if (this.draftHex() !== this.value()) {\n        this.commitDraft();\n      }\n    }\n    this.popover()?.toggle(event as MouseEvent, this.getAnchorEl() ?? this.el.nativeElement);\n  }\n\n  /** Returns the precise anchor element for popover positioning.\n   * For the input variant we target the `p-floatlabel` child instead of the\n   * full `tk-input-text` host. The host includes a bottom section with\n   * `min-height: 1.25rem + margin-top: 0.25rem` that is invisible when empty\n   * but would push the panel ~1.5rem below the visible input field.\n   *\n   * Coupling note: `p-floatlabel` is PrimeNG's float-label host element selector.\n   * If PrimeNG renames it in a future major, the `?? host` fallback keeps\n   * positioning functional (panel opens ~1.5rem lower than ideal). */\n  private getAnchorEl(): HTMLElement | undefined {\n    if (this.variant() === 'swatch') {\n      return this.swatchBtnRef()?.nativeElement;\n    }\n    const host = this.inputTriggerRef()?.nativeElement as HTMLElement | undefined;\n    return (host?.querySelector('p-floatlabel') as HTMLElement | null) ?? host;\n  }\n\n  protected onPopoverShow(): void {\n    this.isOpen.set(true);\n    this.originalValue = this.value();\n    this.suppressNextHideCommit = false;\n    this.registry.requestOpen(this.fieldId, () => this.cancelAndClose());\n    // Sync draft from current value\n    this.syncFromValue(this.value());\n    this.opened.emit();\n    // PrimeNG's absolutePosition flips the panel to \"above\" when it doesn't fit\n    // below, but clamps to scrollTop when there's no space above either — panel\n    // ends up covering the trigger. We override the position after PrimeNG runs.\n    setTimeout(() => this.fixPanelPosition(), 0);\n  }\n\n  private fixPanelPosition(): void {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const container = (this.popover() as any)?.container as HTMLElement | undefined;\n    if (!container) return;\n\n    const anchor = this.getAnchorEl();\n    if (!anchor) return;\n\n    const anchorRect: DOMRect = anchor.getBoundingClientRect();\n    const panelH = container.offsetHeight;\n    const panelW = container.offsetWidth;\n    const vH = window.innerHeight;\n    const vW = window.innerWidth;\n    const scrollY = window.scrollY;\n    const scrollX = window.scrollX;\n\n    const spaceBelow = vH - anchorRect.bottom;\n    const spaceAbove = anchorRect.top;\n\n    let top: number;\n    if (spaceBelow >= panelH) {\n      // Preferred: open below trigger\n      top = anchorRect.bottom + scrollY;\n    } else if (spaceAbove >= panelH) {\n      // Fallback: open above trigger\n      top = anchorRect.top + scrollY - panelH;\n    } else {\n      // Neither side fits: prefer below (scroll context), clamp to viewport edges.\n      // Anchor to trigger bottom and push up only as much as needed so the panel\n      // stays close to the trigger rather than jumping to the top of the page.\n      const idealBelow = anchorRect.bottom + scrollY;\n      const maxTop = scrollY + vH - panelH - 8;\n      const minTop = scrollY + 8;\n      top = Math.max(minTop, Math.min(idealBelow, maxTop));\n    }\n\n    let left = anchorRect.left + scrollX;\n    if (left + panelW > scrollX + vW - 8) {\n      left = scrollX + vW - panelW - 8;\n    }\n    left = Math.max(scrollX + 8, left);\n\n    // Zero out PrimeNG's arrow margin so the panel sits flush with the trigger.\n    container.style.margin = '0';\n    container.style.top = `${top}px`;\n    container.style.insetInlineStart = `${left}px`;\n  }\n\n  protected onPopoverHide(): void {\n    this.isOpen.set(false);\n    this.onTouched();\n    this.touched.set(true);\n    this.triggerControl.markAsTouched();\n    this.ngControl?.control?.markAsTouched();\n    const reason = this.closeReason;\n    this.closeReason = 'accept';\n    if (reason === 'cancel') {\n      this.suppressNextHideCommit = false;\n      // Drop any keystroke still in the debounce window — otherwise it would\n      // commit the cancelled value right after the restore (live mode).\n      this.hexInput$.next(null);\n      this.restoreOriginalValue();\n    } else if (this.suppressNextHideCommit) {\n      // Enter already committed synchronously right before calling hide() —\n      // skip this redundant re-commit for the same still-unchanged draft.\n      this.suppressNextHideCommit = false;\n    } else {\n      // Flush the debounced hex pipeline synchronously first: click-outside\n      // can land within the 200ms debounce window of the last keystroke,\n      // which would otherwise commit a stale draftHex(). The flush never\n      // commits — the explicit commitDraft() below owns the emit.\n      this.flushHexInput();\n      // Always commit on accept: in 'onClose' mode this is the first and\n      // only commit; in 'live' mode the draft is already committed, this\n      // just guarantees the final state is flushed (e.g. Enter pressed\n      // right after a programmatic value change, with no draft edits yet).\n      this.commitDraft();\n    }\n    this.registry.notifyClosed(this.fieldId);\n    this.closed.emit(reason);\n  }\n\n  protected onPanelEnter(event: Event): void {\n    this.confirmAndClose();\n    (event as KeyboardEvent).preventDefault();\n    event.stopPropagation();\n  }\n\n  /** Bound to `(keydown.escape)` on the popover panel: intercepts Escape\n   * before it can bubble to PrimeNG's own document-level close handler, so\n   * the close reason is already recorded as `cancel` by the time `onHide`\n   * fires. */\n  protected onPanelEscape(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.cancelAndClose();\n  }\n\n  private confirmAndClose(): void {\n    if (!this.isValidHex(this.draftHex())) {\n      return;\n    }\n    this.popover()?.hide();\n  }\n\n  /** Closes the popover as a cancellation: `onPopoverHide()` will restore\n   * `originalValue` and emit nothing. Shared by Escape and by the registry\n   * when another `tk-color-picker` instance opens in the same view. */\n  private cancelAndClose(): void {\n    this.closeReason = 'cancel';\n    this.popover()?.hide();\n  }\n\n  private restoreOriginalValue(): void {\n    const normalized = this.normalizeHex(this.originalValue);\n    const restored = this.isValidHex(normalized) ? normalized : '';\n    if (restored) {\n      this.setFromHex(restored, false);\n    } else {\n      this.draftHex.set('');\n      this.displayHexNoHash.set('');\n      this.setValid(true);\n    }\n    // In 'live' mode the value model may already have moved past\n    // originalValue (committed mid-drag) — undo that too, without emitting\n    // colorChange/textColorChange.\n    if (this.value() !== restored) {\n      this.value.set(restored);\n      this.onChange(restored);\n    }\n  }\n\n\n  // ── Draft state updates ─────────────────────────────────────────────────\n\n  protected onSpectrumChange(change: { saturation: number; brightness: number }): void {\n    this.saturation.set(change.saturation);\n    this.brightness.set(change.brightness);\n    this.applyHsv();\n  }\n\n  protected onHueChange(event: Event): void {\n    this.hue.set(Number((event.target as HTMLInputElement).value));\n    this.applyHsv();\n  }\n\n  protected onSwatchPick(color: string): void {\n    const hex = this.normalizeHex(color);\n    if (this.isValidHex(hex)) {\n      this.setFromHex(hex, true);\n    }\n  }\n\n  protected addCustomColor(): void {\n    const hex = this.draftHex();\n    if (!this.isValidHex(hex)) return;\n    const list = this.customColors();\n    if (list.some((c) => c.toLowerCase() === hex)) return;\n    if (list.length >= this.maxCustomColors()) {\n      // Circular buffer: replace the oldest slot (writePtr) and advance the\n      // pointer. Only one cell changes per add — no grid shift.\n      // Both signal mutations are kept outside update() to avoid side effects\n      // inside a state-transition callback.\n      const ptr = this.customColorWritePtr();\n      const next = [...list];\n      next[ptr] = hex;\n      this.customColors.set(next);\n      this.customColorWritePtr.set((ptr + 1) % this.maxCustomColors());\n    } else {\n      this.customColors.update((l) => [...l, hex]);\n    }\n  }\n\n  protected isCustomColorSelected(): boolean {\n    const selected = this.draftHex().toLowerCase();\n    return this.customColors().some((c) => c.toLowerCase() === selected);\n  }\n\n  protected removeCustomColor(): void {\n    const hex = this.draftHex().toLowerCase();\n    this.customColors.update((list) => list.filter((c) => c.toLowerCase() !== hex));\n  }\n\n  protected openEyeDropper(): void {\n    const ctor = (globalThis as unknown as { EyeDropper?: new () => EyeDropperLike })\n      .EyeDropper;\n    if (!ctor) {\n      return;\n    }\n    new ctor()\n      .open()\n      .then((result) => {\n        const hex = this.normalizeHex(result.sRGBHex);\n        if (this.isValidHex(hex)) {\n          this.setFromHex(hex, true);\n          // Focus HEX input so Enter closes modal without opening eyedropper again\n          setTimeout(() => {\n            const inputEl = this.panelHexInput();\n            if (inputEl) {\n              const hexInput = inputEl.nativeElement.querySelector('input');\n              if (hexInput) {\n                hexInput.focus();\n              }\n            }\n          }, 0);\n        }\n      })\n      .catch(() => {\n        // The user dismissed the eyedropper — nothing to do.\n      });\n  }\n\n  // ── HEX input pipeline ──────────────────────────────────────────────────\n\n  protected onHexInput(clean: string): void {\n    this.displayHexNoHash.set(clean);\n    if (clean === '') {\n      this.draftHex.set('');\n    }\n    this.hexInput$.next('#' + clean);\n  }\n\n  /**\n   * Sanitizes typing inside a `tk-input-text` hex field (trigger or popover):\n   * strips non-hex characters at the DOM level (keeping the caret behavior of\n   * the native input) and feeds the shared validation pipeline.\n   */\n  protected onHexNativeInput(event: Event): void {\n    const target = event.target as HTMLInputElement | null;\n    if (!target || target.tagName !== 'INPUT') {\n      return;\n    }\n    const clean = target.value.replace(/[^A-Fa-f0-9]/g, '').toUpperCase().slice(0, 6);\n    if (clean !== target.value) {\n      target.value = clean;\n    }\n    this.onHexInput(clean);\n  }\n\n  /** Blocks non-hex keypresses and enforces 6-char max before char enters the DOM. Enter confirms selection. */\n  protected onHexKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Flush synchronously first: hexInput$ debounces 200ms, so draftHex()\n      // can still be stale if Enter is pressed right after the last\n      // keystroke (fast typing). Mirrors onHexBlur()'s own flush. The flush\n      // never commits — the explicit commitDraft() right below owns the emit.\n      this.flushHexInput();\n      // Commit directly — covers both the trigger HEX field edited while the\n      // popover is closed (no onPopoverHide to fall back on) and the panel\n      // HEX field, without depending on the popover's close animation timing.\n      this.commitDraft();\n      // If a real popover is actually open, hide() will trigger\n      // onPopoverHide()'s own accept-commit right after — flag it so that\n      // one is skipped instead of re-emitting the same already-committed\n      // value a second time.\n      this.suppressNextHideCommit = true;\n      this.popover()?.hide();\n      return;\n    }\n\n    if (event.ctrlKey || event.metaKey || event.altKey) {\n      return;\n    }\n    const navigationKeys = [\n      'Backspace', 'Delete', 'Tab',\n      'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n      'Home', 'End',\n    ];\n    if (navigationKeys.includes(event.key)) {\n      return;\n    }\n    if (!/^[A-Fa-f0-9]$/.test(event.key)) {\n      event.preventDefault();\n      return;\n    }\n    // Enforce 6-char max: block if no selection to replace and already full\n    const target = event.target as HTMLInputElement | null;\n    if (target && target.tagName === 'INPUT') {\n      const selectionLength = (target.selectionEnd ?? 0) - (target.selectionStart ?? 0);\n      if (target.value.length >= 6 && selectionLength === 0) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  /** Strips non-hex chars from pasted text before it reaches the input model. */\n  protected onHexPaste(event: ClipboardEvent): void {\n    event.preventDefault();\n    const text = event.clipboardData?.getData('text/plain') ?? '';\n    const clean = text.replace(/[^A-Fa-f0-9]/g, '').toUpperCase();\n    const target = event.target as HTMLInputElement | null;\n    if (!target || target.tagName !== 'INPUT') {\n      return;\n    }\n    const start = target.selectionStart ?? 0;\n    const end = target.selectionEnd ?? 0;\n    const merged = (target.value.slice(0, start) + clean + target.value.slice(end)).slice(0, 6);\n    target.value = merged;\n    this.onHexInput(merged);\n  }\n\n  protected onHexBlur(): void {\n    // The flush only syncs draftHex/displayHexNoHash (and drops the pending\n    // debounce) — the explicit commitDraft() below owns the emit.\n    this.flushHexInput();\n    this.onTouched();\n    this.touched.set(true);\n    this.triggerControl.markAsTouched();\n    this.ngControl?.control?.markAsTouched();\n    if (!this.isOpen()) {\n      // Losing focus on the closed trigger's HEX field (variant=\"input\")\n      // is the \"I'm done editing\" signal for that path — there's no\n      // popover session for onPopoverHide() to eventually flush, so this\n      // commits unconditionally, the same way Enter already does.\n      this.commitDraft();\n    }\n  }\n\n  /**\n   * Synchronously applies what's currently in the HEX field (normalized) and\n   * cancels the pending debounced emission, so it can't re-validate the same\n   * text later as \"still typing\" and clear the error this flush just set.\n   * Never commits: callers own the emit via commitDraft().\n   */\n  private flushHexInput(): void {\n    this.hexInput$.next(null);\n    this.processHexInput('#' + this.displayHexNoHash(), true, false);\n  }\n\n  private processHexInput(raw: string, forceNormalize: boolean, commit = true): void {\n    const text = raw?.trim() ?? '';\n    const body = (text.startsWith('#') ? text.slice(1) : text).trim();\n    if (body.length === 0) {\n      this.draftHex.set('');\n      if (this.required()) {\n        this.errorType.set('required');\n        this.setValid(!forceNormalize);\n      } else {\n        this.setValid(true);\n        if (commit) {\n          this.maybeCommit();\n        }\n      }\n      return;\n    }\n    const hex = '#' + body;\n    if (this.isValidHex(hex)) {\n      this.applyValidHex(hex, forceNormalize, commit);\n    } else {\n      this.applyInvalidHex(body, forceNormalize);\n    }\n  }\n\n  private applyValidHex(hex: string, forceNormalize: boolean, commit: boolean): void {\n    if (hex.length === 4 && !forceNormalize) {\n      this.setValid(true);\n      return;\n    }\n    const norm = this.normalizeHex(hex);\n    this.setValid(true);\n    if (norm !== this.draftHex()) {\n      this.setFromHex(norm, commit);\n    } else {\n      this.displayHexNoHash.set(norm.slice(1).toUpperCase());\n    }\n  }\n\n  private applyInvalidHex(rawText: string, forceNormalize: boolean): void {\n    this.errorType.set('invalid');\n    const partial =\n      !forceNormalize && /^[A-Fa-f0-9]*$/.test(rawText) && rawText.length <= 6;\n    this.setValid(partial);\n  }\n\n  /**\n   * Updates the HEX validity and revalidates the host form control in the same\n   * call, so the form sees { required } / { invalidHex } before the next render.\n   * errorType is always set before calling this.\n   */\n  private setValid(value: boolean): void {\n    if (this.isValid() !== value) {\n      this.isValid.set(value);\n      this.validChange.emit(value);\n    }\n    this.updateHostControlValidity();\n  }\n\n  private updateHostControlValidity(): void {\n    // No event: the value did not change, only this picker's own errors\n    this.ngControl?.control?.updateValueAndValidity({ emitEvent: false });\n    // No status event was emitted, so refresh the cached control state here\n    this.syncControlState();\n  }\n\n  // ── Internal state helpers ──────────────────────────────────────────────\n\n  private syncFromValue(incoming: string): void {\n    if (!incoming) {\n      this.draftHex.set('');\n      this.displayHexNoHash.set('');\n      if (this.required()) {\n        this.errorType.set('required');\n        this.setValid(false);\n      } else {\n        this.setValid(true);\n      }\n      return;\n    }\n    const hex = this.normalizeHex(incoming);\n    if (this.isValidHex(hex)) {\n      if (hex !== this.draftHex()) {\n        this.setFromHex(hex, false);\n      }\n      return;\n    }\n    const body = (incoming.startsWith('#') ? incoming.slice(1) : incoming).trim();\n    this.draftHex.set(incoming);\n    this.displayHexNoHash.set(body);\n    this.errorType.set('invalid');\n    this.setValid(false);\n  }\n\n  private setFromHex(hex: string, interactive: boolean): void {\n    this.draftHex.set(hex);\n    this.displayHexNoHash.set(hex.slice(1).toUpperCase());\n    this.setValid(true);\n    const hsv = this.hexToHsv(hex);\n    this.hue.set(hsv.h);\n    this.saturation.set(hsv.s);\n    this.brightness.set(hsv.v);\n    if (interactive) {\n      this.maybeCommit();\n    }\n  }\n\n  private applyHsv(): void {\n    const hex = this.hsvToHex(this.hue(), this.saturation(), this.brightness());\n    this.draftHex.set(hex);\n    this.displayHexNoHash.set(hex.slice(1).toUpperCase());\n    this.setValid(true);\n    this.maybeCommit();\n  }\n\n  /**\n   * Commits the draft color immediately, but only in `'live'` emitMode.\n   * In `'onClose'` mode, mid-edit draft changes never commit here — not even\n   * for the trigger HEX field edited while the popover is closed. That path\n   * still needs an explicit \"I'm done\" signal, just like a popover session\n   * does: Enter (`onHexKeydown`) or losing focus (`onHexBlur`), both of which\n   * commit unconditionally regardless of `emitMode()`. Committing on every\n   * debounce tick while the field still has focus would fire on each\n   * completed-looking HEX mid-typing — exactly the noise `'onClose'` exists\n   * to avoid (e.g. a consumer wiring this straight to an API call).\n   */\n  private maybeCommit(): void {\n    if (this.emitMode() === 'live') {\n      this.commitDraft();\n    }\n  }\n\n  private commitDraft(): void {\n    if (!this.isValid() || this.isDisabled()) {\n      return;\n    }\n    const hex = this.draftHex();\n    if (hex === '') {\n      this.value.set('');\n      this.onChange('');\n      this.ngControl?.control?.markAsDirty();\n      this.colorChange.emit('');\n      this.textColorChange.emit('');\n      return;\n    }\n    if (!this.isValidHex(hex)) {\n      return;\n    }\n    this.value.set(hex);\n    this.onChange(hex);\n    this.ngControl?.control?.markAsDirty();\n    this.colorChange.emit(hex);\n    this.textColorChange.emit(this.contrastTextColor());\n  }\n\n  // ── Color math ──────────────────────────────────────────────────────────\n\n  private normalizeHex(value: string): string {\n    if (!value?.trim()) {\n      return '';\n    }\n    let v = value.trim();\n    v = v.startsWith('#') ? v : '#' + v;\n    if (/^#[A-Fa-f0-9]{3}$/.test(v)) {\n      v = '#' + v[1] + v[1] + v[2] + v[2] + v[3] + v[3];\n    }\n    return v.toLowerCase();\n  }\n\n  private isValidHex(value: string): boolean {\n    return HEX_REGEX.test(value);\n  }\n\n  private hexToHsv(hex: string): { h: number; s: number; v: number } {\n    const r = Number.parseInt(hex.slice(1, 3), 16) / 255;\n    const g = Number.parseInt(hex.slice(3, 5), 16) / 255;\n    const b = Number.parseInt(hex.slice(5, 7), 16) / 255;\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const delta = max - min;\n    let h = 0;\n    if (delta !== 0) {\n      if (max === r) {\n        h = ((g - b) / delta) % 6;\n      } else if (max === g) {\n        h = (b - r) / delta + 2;\n      } else {\n        h = (r - g) / delta + 4;\n      }\n      h = Math.round(h * 60);\n      if (h < 0) {\n        h += 360;\n      }\n    }\n    return { h, s: max === 0 ? 0 : delta / max, v: max };\n  }\n\n  private hsvToHex(h: number, s: number, v: number): string {\n    const c = v * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = v - c;\n    let r = 0;\n    let g = 0;\n    let b = 0;\n    if (h < 60) {\n      r = c;\n      g = x;\n    } else if (h < 120) {\n      r = x;\n      g = c;\n    } else if (h < 180) {\n      g = c;\n      b = x;\n    } else if (h < 240) {\n      g = x;\n      b = c;\n    } else if (h < 300) {\n      r = x;\n      b = c;\n    } else {\n      r = c;\n      b = x;\n    }\n    const toHex = (n: number) =>\n      Math.round((n + m) * 255)\n        .toString(16)\n        .padStart(2, '0');\n    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n  }\n}\n","<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              −\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.42.0",
+  "version": "5.42.1",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^21.0.0",

package/types/tekus-design-system-components-color-picker.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { AfterContentInit } from '@angular/core';
-import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
+import { ControlValueAccessor, Validator, NgControl, FormControl, ValidationErrors } from '@angular/forms';
 import { Popover } from 'primeng/popover';
 import { ContrastResult } from '@tekus/design-system/utils/wcag-contrast';
 
@@ -93,7 +93,7 @@ interface EyeDropperLike {
  * </tk-color-picker>
  * ```
  */
-declare class ColorPickerComponent implements ControlValueAccessor, AfterContentInit {
+declare class ColorPickerComponent implements ControlValueAccessor, Validator, AfterContentInit {
     readonly ngControl: NgControl | null;
     private readonly destroyRef;
     private readonly el;
@@ -177,7 +177,7 @@ declare class ColorPickerComponent implements ControlValueAccessor, AfterContent
      * Preferred position of the popover relative to the trigger.
      * @default `'bottom'`
      */
-    placement: _angular_core.InputSignal<"top" | "bottom">;
+    readonly placement: _angular_core.InputSignal<"top" | "bottom">;
     /**
      * @property {string} errorMessage
      * @description
@@ -287,6 +287,8 @@ declare class ColorPickerComponent implements ControlValueAccessor, AfterContent
     protected readonly isValid: _angular_core.WritableSignal<boolean>;
     protected readonly errorType: _angular_core.WritableSignal<"invalid" | "required">;
     private readonly cvaDisabled;
+    /** Set on the first blur / close, when there is no host form control */
+    private readonly touched;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly resolvedSections: _angular_core.Signal<Required<ColorPickerSections>>;
     protected readonly resolvedTexts: _angular_core.Signal<{
@@ -331,6 +333,8 @@ declare class ColorPickerComponent implements ControlValueAccessor, AfterContent
     protected readonly panelFieldId: string;
     protected readonly errorId: string;
     private static instanceCount;
+    private readonly boundValidate;
+    private syncControlState;
     private originalValue;
     private closeReason;
     private suppressNextHideCommit;
@@ -341,16 +345,25 @@ declare class ColorPickerComponent implements ControlValueAccessor, AfterContent
     onTouched: () => void;
     constructor();
     /**
-     * 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.
+     * Adds this picker's validator to the host form control and subscribes to
+     * its 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(): void;
+    /**
+     * @method validate
+     * @description
+     * Errors of the typed HEX, added to the host form control: `{ required }`
+     * when the picker is `required` and empty, `{ invalidHex }` when the text is
+     * not a valid color. Pick the message with `control.hasError(...)`.
+     */
+    validate(): ValidationErrors | null;
     /**
      * @method writeValue
      * @description Hydrates the picker from the form model without emitting.
      */
-    writeValue(value: string): void;
+    writeValue(value: string | null): void;
     /**
      * @method registerOnChange
      * @description Registers the Reactive Forms change callback.
@@ -424,7 +437,13 @@ declare class ColorPickerComponent implements ControlValueAccessor, AfterContent
     private processHexInput;
     private applyValidHex;
     private applyInvalidHex;
+    /**
+     * Updates the HEX validity and revalidates the host form control in the same
+     * call, so the form sees { required } / { invalidHex } before the next render.
+     * errorType is always set before calling this.
+     */
     private setValid;
+    private updateHostControlValidity;
     private syncFromValue;
     private setFromHex;
     private applyHsv;