@tekus/design-system 5.31.0 → 5.32.0

package/fesm2022/tekus-design-system-utils-wcag-contrast.mjs

@@ -0,0 +1,97 @@
+/**
+ * Pure utilities implementing the official WCAG 2.x contrast formula
+ * (relative luminance + contrast ratio).
+ *
+ * Thresholds follow the normal-text criteria (conservative):
+ * `>= 7` AAA, `>= 4.5` AA, otherwise `fail`.
+ */
+/**
+ * Parses a hex color (`#abc`, `abc`, `#aabbcc` or `aabbcc`) into RGB channels (0–255).
+ * Returns `null` when the value is not a valid hex color.
+ */
+function hexToRgb(hex) {
+    let clean = hex.replace('#', '');
+    if (/^[0-9a-fA-F]{3}$/.test(clean)) {
+        clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];
+    }
+    if (!/^[0-9a-fA-F]{6}$/.test(clean)) {
+        return null;
+    }
+    return {
+        r: Number.parseInt(clean.slice(0, 2), 16),
+        g: Number.parseInt(clean.slice(2, 4), 16),
+        b: Number.parseInt(clean.slice(4, 6), 16),
+    };
+}
+/**
+ * WCAG relative luminance of a hex color (0 = black, 1 = white).
+ * Returns `NaN` for invalid hex values.
+ */
+function relativeLuminance(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return Number.NaN;
+    }
+    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/**
+ * Contrast ratio between two hex colors, rounded to 2 decimals.
+ * Range: 1 (identical) to 21 (black on white).
+ */
+function calcContrastRatio(bg, fg) {
+    const l1 = relativeLuminance(bg);
+    const l2 = relativeLuminance(fg);
+    const lighter = Math.max(l1, l2);
+    const darker = Math.min(l1, l2);
+    return Number.parseFloat(((lighter + 0.05) / (darker + 0.05)).toFixed(2));
+}
+/**
+ * Maps a contrast ratio to its WCAG level for normal text:
+ * `>= 7` → AAA, `>= 4.5` → AA, otherwise `fail`.
+ */
+function resolveWcagLevel(ratio) {
+    if (ratio >= 7) {
+        return 'AAA';
+    }
+    if (ratio >= 4.5) {
+        return 'AA';
+    }
+    return 'fail';
+}
+/**
+ * Convenience helper combining {@link calcContrastRatio} and {@link resolveWcagLevel}.
+ */
+function getContrastResult(bg, fg) {
+    const ratio = calcContrastRatio(bg, fg);
+    return { ratio, level: resolveWcagLevel(ratio) };
+}
+/**
+ * Whether a hex color is perceived as light, using the ITU-R BT.601
+ * perceived-luminance formula normalized to [0, 1] with a 0.5 threshold.
+ * Invalid hex values are treated as dark (`false`).
+ */
+function isLightColor(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return false;
+    }
+    return (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255 > 0.5;
+}
+/**
+ * Ideal text color over the given background:
+ * black (`#000000`) on light backgrounds, white (`#ffffff`) on dark ones.
+ */
+function getContrastTextColor(background) {
+    return isLightColor(background) ? '#000000' : '#ffffff';
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { calcContrastRatio, getContrastResult, getContrastTextColor, hexToRgb, isLightColor, relativeLuminance, resolveWcagLevel };
+//# sourceMappingURL=tekus-design-system-utils-wcag-contrast.mjs.map

package/fesm2022/tekus-design-system-utils-wcag-contrast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-utils-wcag-contrast.mjs","sources":["../../../projects/design-system/utils/wcag-contrast/src/wcag-contrast.ts","../../../projects/design-system/utils/wcag-contrast/tekus-design-system-utils-wcag-contrast.ts"],"sourcesContent":["/**\n * Pure utilities implementing the official WCAG 2.x contrast formula\n * (relative luminance + contrast ratio).\n *\n * Thresholds follow the normal-text criteria (conservative):\n * `>= 7` AAA, `>= 4.5` AA, otherwise `fail`.\n */\n\nexport type WcagLevel = 'AAA' | 'AA' | 'fail';\n\nexport interface RgbColor {\n  r: number;\n  g: number;\n  b: number;\n}\n\nexport interface ContrastResult {\n  ratio: number;\n  level: WcagLevel;\n}\n\n/**\n * Parses a hex color (`#abc`, `abc`, `#aabbcc` or `aabbcc`) into RGB channels (0–255).\n * Returns `null` when the value is not a valid hex color.\n */\nexport function hexToRgb(hex: string): RgbColor | null {\n  let clean = hex.replace('#', '');\n  if (/^[0-9a-fA-F]{3}$/.test(clean)) {\n    clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];\n  }\n  if (!/^[0-9a-fA-F]{6}$/.test(clean)) {\n    return null;\n  }\n  return {\n    r: Number.parseInt(clean.slice(0, 2), 16),\n    g: Number.parseInt(clean.slice(2, 4), 16),\n    b: Number.parseInt(clean.slice(4, 6), 16),\n  };\n}\n\n/**\n * WCAG relative luminance of a hex color (0 = black, 1 = white).\n * Returns `NaN` for invalid hex values.\n */\nexport function relativeLuminance(hex: string): number {\n  const rgb = hexToRgb(hex);\n  if (!rgb) {\n    return Number.NaN;\n  }\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255;\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\n/**\n * Contrast ratio between two hex colors, rounded to 2 decimals.\n * Range: 1 (identical) to 21 (black on white).\n */\nexport function calcContrastRatio(bg: string, fg: string): number {\n  const l1 = relativeLuminance(bg);\n  const l2 = relativeLuminance(fg);\n  const lighter = Math.max(l1, l2);\n  const darker = Math.min(l1, l2);\n  return Number.parseFloat(((lighter + 0.05) / (darker + 0.05)).toFixed(2));\n}\n\n/**\n * Maps a contrast ratio to its WCAG level for normal text:\n * `>= 7` → AAA, `>= 4.5` → AA, otherwise `fail`.\n */\nexport function resolveWcagLevel(ratio: number): WcagLevel {\n  if (ratio >= 7) {\n    return 'AAA';\n  }\n  if (ratio >= 4.5) {\n    return 'AA';\n  }\n  return 'fail';\n}\n\n/**\n * Convenience helper combining {@link calcContrastRatio} and {@link resolveWcagLevel}.\n */\nexport function getContrastResult(bg: string, fg: string): ContrastResult {\n  const ratio = calcContrastRatio(bg, fg);\n  return { ratio, level: resolveWcagLevel(ratio) };\n}\n\n/**\n * Whether a hex color is perceived as light, using the ITU-R BT.601\n * perceived-luminance formula normalized to [0, 1] with a 0.5 threshold.\n * Invalid hex values are treated as dark (`false`).\n */\nexport function isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex);\n  if (!rgb) {\n    return false;\n  }\n  return (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255 > 0.5;\n}\n\n/**\n * Ideal text color over the given background:\n * black (`#000000`) on light backgrounds, white (`#ffffff`) on dark ones.\n */\nexport function getContrastTextColor(background: string): string {\n  return isLightColor(background) ? '#000000' : '#ffffff';\n}\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.31.0",
+  "version": "5.32.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^21.0.0",
@@ -72,6 +72,10 @@
       "types": "./types/tekus-design-system-components-checkbox.d.ts",
       "default": "./fesm2022/tekus-design-system-components-checkbox.mjs"
     },
+    "./components/color-picker": {
+      "types": "./types/tekus-design-system-components-color-picker.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-color-picker.mjs"
+    },
     "./components/date-picker": {
       "types": "./types/tekus-design-system-components-date-picker.d.ts",
       "default": "./fesm2022/tekus-design-system-components-date-picker.mjs"
@@ -172,6 +176,10 @@
       "types": "./types/tekus-design-system-components-time-ago.d.ts",
       "default": "./fesm2022/tekus-design-system-components-time-ago.mjs"
     },
+    "./components/time-picker": {
+      "types": "./types/tekus-design-system-components-time-picker.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-time-picker.mjs"
+    },
     "./components/toast": {
       "types": "./types/tekus-design-system-components-toast.d.ts",
       "default": "./fesm2022/tekus-design-system-components-toast.mjs"
@@ -207,6 +215,10 @@
     "./utils/sanitizer-utils": {
       "types": "./types/tekus-design-system-utils-sanitizer-utils.d.ts",
       "default": "./fesm2022/tekus-design-system-utils-sanitizer-utils.mjs"
+    },
+    "./utils/wcag-contrast": {
+      "types": "./types/tekus-design-system-utils-wcag-contrast.d.ts",
+      "default": "./fesm2022/tekus-design-system-utils-wcag-contrast.mjs"
     }
   },
   "module": "fesm2022/tekus-design-system.mjs",

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

@@ -0,0 +1,356 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
+import { Popover } from 'primeng/popover';
+import { ContrastResult } from '@tekus/design-system/utils/wcag-contrast';
+
+/**
+ * Trigger appearance of `tk-color-picker`.
+ * - `input`: swatch + editable HEX value + chevron.
+ * - `swatch`: compact swatch + chevron (no HEX shown).
+ */
+type ColorPickerVariant = 'input' | 'swatch';
+/**
+ * Reason the picker popover was closed.
+ * - `accept`: the selection was confirmed.
+ */
+type ColorPickerCloseReason = 'accept';
+/**
+ * Enables or disables each section of the picker popover.
+ * Every flag defaults to `true`; disabled sections are not rendered.
+ * The contrast section additionally requires a `contrastColor` to be provided.
+ */
+interface ColorPickerSections {
+    /** Predefined color palette grid. */
+    swatches?: boolean;
+    /** User-saved colors grid with the "+" add button. */
+    customColors?: boolean;
+    /** Saturation/brightness selection canvas. */
+    spectrum?: boolean;
+    /** Hue slider bar. */
+    hue?: boolean;
+    /** Color preview + editable HEX field. */
+    hex?: boolean;
+    /** EyeDropper button (only shown when the browser supports the EyeDropper API). */
+    eyedropper?: boolean;
+    /** WCAG contrast preview (requires `contrastColor`). */
+    contrast?: boolean;
+}
+/**
+ * UI texts of the picker. All values have English defaults so consumers
+ * can localize them with their own i18n solution.
+ */
+interface ColorPickerTexts {
+    swatchesLabel?: string;
+    customColorsLabel?: string;
+    hexLabel?: string;
+    contrastLabel?: string;
+    contrastSampleText?: string;
+    contrastSampleLabel?: string;
+    contrastLowLabel?: string;
+    invalidHexError?: string;
+    requiredError?: string;
+    eyedropperLabel?: string;
+    addCustomColorLabel?: string;
+    removeCustomColorLabel?: string;
+    openPickerLabel?: string;
+    spectrumLabel?: string;
+    hueLabel?: string;
+    dialogLabel?: string;
+}
+
+/**
+ * @component ColorPickerComponent
+ * @description
+ * Configurable color picker of the Tekus Design System. Renders a trigger
+ * (`input` variant with editable HEX, or compact `swatch` variant) that opens
+ * a PrimeNG `p-popover` composed of independently toggleable sections:
+ * predefined swatches, custom colors, saturation/brightness spectrum, hue bar,
+ * HEX field with EyeDropper support, WCAG contrast preview and a
+ * Cancel/Accept action bar with temporary selection state.
+ * Implements `ControlValueAccessor` for Reactive Forms integration.
+ *
+ * @usage
+ * ```html
+ * <tk-color-picker
+ *   label="Color"
+ *   [(value)]="color"
+ *   [contrastColor]="'#ffffff'"
+ *   (colorChange)="onColor($event)">
+ * </tk-color-picker>
+ * ```
+ */
+declare class ColorPickerComponent implements ControlValueAccessor {
+    readonly ngControl: NgControl | null;
+    private readonly destroyRef;
+    private readonly el;
+    private readonly init;
+    /**
+     * @property {ColorPickerVariant} variant
+     * @description
+     * Trigger appearance: `input` shows swatch + editable HEX + chevron,
+     * `swatch` shows only swatch + chevron.
+     * @default `'input'`
+     */
+    variant: _angular_core.InputSignal<ColorPickerVariant>;
+    /**
+     * @property {string} label
+     * @description
+     * Label displayed above the trigger.
+     * @default `''`
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * @property {string} hint
+     * @description
+     * Hint text displayed below the trigger (hidden while an error is shown).
+     * @default `''`
+     */
+    hint: _angular_core.InputSignal<string>;
+    /**
+     * @property {boolean} disabled
+     * @description
+     * Disables the trigger and the popover. Also controlled by Reactive Forms
+     * via `setDisabledState`.
+     * @default `false`
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @property {boolean} required
+     * @description
+     * When `true`, an empty HEX field shows the required error on blur.
+     * @default `false`
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * @property {ColorPickerSections} sections
+     * @description
+     * Enables/disables each popover section. Missing flags default to `true`.
+     * Disabling `actionBar` switches the picker to live mode (every valid
+     * change is emitted immediately).
+     * @default `{}` (all sections enabled)
+     */
+    sections: _angular_core.InputSignal<ColorPickerSections>;
+    /**
+     * @property {string[]} presetColors
+     * @description
+     * Colors of the predefined palette section.
+     * @default Design System base palette
+     */
+    presetColors: _angular_core.InputSignal<string[]>;
+    /**
+     * @property {string | null} contrastColor
+     * @description
+     * Optional override of the text color used for the WCAG contrast pair.
+     * When `null` (default) the text color is resolved automatically from the
+     * picked background luminance (ITU-R BT.601): black over light colors,
+     * white over dark ones.
+     * @default `null`
+     */
+    contrastColor: _angular_core.InputSignal<string | null>;
+    /**
+     * @property {number} maxCustomColors
+     * @description
+     * Maximum number of custom color slots. Once the list is at capacity, the
+     * oldest slot is replaced using a circular buffer — the "+" button stays
+     * visible at all times.
+     * @default `18`
+     */
+    maxCustomColors: _angular_core.InputSignal<number>;
+    /**
+     * @property {'top' | 'bottom'} placement
+     * @description
+     * Preferred position of the popover relative to the trigger.
+     * @default `'bottom'`
+     */
+    placement: _angular_core.InputSignal<"top" | "bottom">;
+    /**
+     * @property {string} errorMessage
+     * @description
+     * External error message that overrides the internal validation messages.
+     * @default `''`
+     */
+    errorMessage: _angular_core.InputSignal<string>;
+    /**
+     * @property {ColorPickerTexts} texts
+     * @description
+     * UI texts (section labels, buttons, errors). Defaults are in English so
+     * consumers can localize with their own i18n solution.
+     * @default `{}` (English defaults)
+     */
+    texts: _angular_core.InputSignal<ColorPickerTexts>;
+    /**
+     * @property {ModelSignal<string>} value
+     * @description
+     * Confirmed color as a normalized lowercase 6-digit hex with `#`.
+     * Two-way bindable.
+     * @default `''`
+     */
+    value: _angular_core.ModelSignal<string>;
+    /**
+     * @property {ModelSignal<string[]>} customColors
+     * @description
+     * User-saved custom colors. Two-way bindable so the consumer decides
+     * where to persist them.
+     * @default `[]`
+     */
+    customColors: _angular_core.ModelSignal<string[]>;
+    /**
+     * @event colorChange
+     * @description
+     * Emits the confirmed background hex color: on Accept (action bar mode) or
+     * on every valid change (live mode / trigger HEX edit while closed). Never
+     * emits invalid values, on hydration, or while disabled.
+     */
+    colorChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * @event textColorChange
+     * @description
+     * Emits together with `colorChange`: the ideal text color over the
+     * confirmed background (`#000000` on light colors, `#ffffff` on dark ones,
+     * or the `contrastColor` override when provided).
+     */
+    textColorChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * @event validChange
+     * @description
+     * Emits only when the validity of the HEX value changes.
+     */
+    validChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * @event opened
+     * @description
+     * Emits when the picker popover opens.
+     */
+    opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @event closed
+     * @description
+     * Emits when the popover closes, with the close reason
+     * (`accept` confirmed, `cancel` discarded/restored).
+     */
+    closed: _angular_core.OutputEmitterRef<"accept">;
+    popover: _angular_core.Signal<Popover | undefined>;
+    private swatchBtnRef;
+    private inputTriggerRef;
+    private panelHexInput;
+    /**
+     * Internal FormControl handed to the `tk-input-text` trigger so the
+     * disabled state propagates through the Design System input.
+     */
+    protected readonly triggerControl: FormControl<string | null>;
+    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly hue: _angular_core.WritableSignal<number>;
+    protected readonly saturation: _angular_core.WritableSignal<number>;
+    protected readonly brightness: _angular_core.WritableSignal<number>;
+    protected readonly draftHex: _angular_core.WritableSignal<string>;
+    protected readonly displayHexNoHash: _angular_core.WritableSignal<string>;
+    protected readonly isValid: _angular_core.WritableSignal<boolean>;
+    protected readonly errorType: _angular_core.WritableSignal<"invalid" | "required">;
+    private readonly cvaDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly resolvedSections: _angular_core.Signal<Required<ColorPickerSections>>;
+    protected readonly t: _angular_core.Signal<Required<ColorPickerTexts>>;
+    /** Valid draft hex to paint swatches, or null → neutral fallback via CSS. */
+    protected readonly swatchColor: _angular_core.Signal<string | null>;
+    /**
+     * Text color of the contrast pair: the `contrastColor` override when valid,
+     * otherwise resolved automatically from the draft background luminance.
+     */
+    protected readonly contrastTextColor: _angular_core.Signal<string>;
+    protected readonly contrastResult: _angular_core.Signal<ContrastResult | null>;
+    protected readonly showContrast: _angular_core.Signal<boolean>;
+    protected readonly eyeDropperSupported: boolean;
+    protected readonly showEyedropper: _angular_core.Signal<boolean>;
+    protected readonly canAddCustom: _angular_core.Signal<boolean>;
+    protected readonly errorText: _angular_core.Signal<string>;
+    protected readonly fieldId: string;
+    protected readonly panelFieldId: string;
+    protected readonly errorId: string;
+    private static instanceCount;
+    private originalValue;
+    private readonly customColorWritePtr;
+    private readonly hexInput$;
+    onChange: (value: string) => void;
+    onTouched: () => void;
+    constructor();
+    /**
+     * @method writeValue
+     * @description Hydrates the picker from the form model without emitting.
+     */
+    writeValue(value: string): void;
+    /**
+     * @method registerOnChange
+     * @description Registers the Reactive Forms change callback.
+     */
+    registerOnChange(fn: (value: string) => void): void;
+    /**
+     * @method registerOnTouched
+     * @description Registers the Reactive Forms touched callback.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * @method setDisabledState
+     * @description Syncs the disabled state from Reactive Forms.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    protected onTriggerClick(event: Event): void;
+    /** Returns the precise anchor element for popover positioning.
+     * For the input variant we target the `p-floatlabel` child instead of the
+     * full `tk-input-text` host. The host includes a bottom section with
+     * `min-height: 1.25rem + margin-top: 0.25rem` that is invisible when empty
+     * but would push the panel ~1.5rem below the visible input field.
+     *
+     * Coupling note: `p-floatlabel` is PrimeNG's float-label host element selector.
+     * If PrimeNG renames it in a future major, the `?? host` fallback keeps
+     * positioning functional (panel opens ~1.5rem lower than ideal). */
+    private getAnchorEl;
+    protected onPopoverShow(): void;
+    private fixPanelPosition;
+    protected onPopoverHide(): void;
+    protected onPanelEnter(event: Event): void;
+    private confirmAndClose;
+    protected onSpectrumChange(change: {
+        saturation: number;
+        brightness: number;
+    }): void;
+    protected onHueChange(event: Event): void;
+    protected onSwatchPick(color: string): void;
+    protected addCustomColor(): void;
+    protected isCustomColorSelected(): boolean;
+    protected removeCustomColor(): void;
+    protected openEyeDropper(): void;
+    protected onHexInput(clean: string): void;
+    /**
+     * Sanitizes typing inside a `tk-input-text` hex field (trigger or popover):
+     * strips non-hex characters at the DOM level (keeping the caret behavior of
+     * the native input) and feeds the shared validation pipeline.
+     */
+    protected onHexNativeInput(event: Event): void;
+    /** Blocks non-hex keypresses and enforces 6-char max before char enters the DOM. Enter confirms selection. */
+    protected onHexKeydown(event: KeyboardEvent): void;
+    /** Strips non-hex chars from pasted text before it reaches the input model. */
+    protected onHexPaste(event: ClipboardEvent): void;
+    protected onHexBlur(): void;
+    private processHexInput;
+    private parseHex;
+    private applyValidHex;
+    private applyInvalidHex;
+    private setValid;
+    private syncFromValue;
+    private setFromHex;
+    private applyHsv;
+    /**
+     * Commits the draft color immediately (live mode).
+     */
+    private maybeCommit;
+    private commitDraft;
+    private normalizeHex;
+    private isValidHex;
+    private hexToHsv;
+    private hsvToHex;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "tk-color-picker", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "presetColors": { "alias": "presetColors"; "required": false; "isSignal": true; }; "contrastColor": { "alias": "contrastColor"; "required": false; "isSignal": true; }; "maxCustomColors": { "alias": "maxCustomColors"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "texts": { "alias": "texts"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "customColors": { "alias": "customColors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "customColors": "customColorsChange"; "colorChange": "colorChange"; "textColorChange": "textColorChange"; "validChange": "validChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+export { ColorPickerComponent };
+export type { ColorPickerCloseReason, ColorPickerSections, ColorPickerTexts, ColorPickerVariant };