@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-color-picker.mjs

@@ -0,0 +1,278 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, output, signal, viewChildren } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+const DEFAULT_SWATCHES = [
+	"#ef4444",
+	"#f97316",
+	"#eab308",
+	"#22c55e",
+	"#14b8a6",
+	"#3b82f6",
+	"#6366f1",
+	"#8b5cf6",
+	"#ec4899",
+	"#f43f5e",
+	"#0ea5e9",
+	"#10b981",
+	"#a855f7",
+	"#64748b",
+	"#000000",
+	"#ffffff"
+];
+var ColorPickerComponent = class ColorPickerComponent {
+	static nextId = 0;
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	swatches = input(DEFAULT_SWATCHES, ...ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []);
+	showInput = input(true, ...ngDevMode ? [{ debugName: "showInput" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Color picker", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	hexAriaLabel = input("Hex color value", ...ngDevMode ? [{ debugName: "hexAriaLabel" }] : /* istanbul ignore next */ []);
+	swatchesAriaLabel = input("Color swatches", ...ngDevMode ? [{ debugName: "swatchesAriaLabel" }] : /* istanbul ignore next */ []);
+	colorChange = output();
+	inputId = `lc-color-picker-${++ColorPickerComponent.nextId}`;
+	value = signal("#3b82f6", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	swatchButtons = viewChildren("swatchBtn", ...ngDevMode ? [{ debugName: "swatchButtons" }] : /* istanbul ignore next */ []);
+	focusableSwatchIndex = computed(() => {
+		const index = this.swatches().indexOf(this.value());
+		return index >= 0 ? index : 0;
+	}, ...ngDevMode ? [{ debugName: "focusableSwatchIndex" }] : /* istanbul ignore next */ []);
+	pickerClasses = computed(() => {
+		const classes = ["color-picker"];
+		if (this.isDisabled()) classes.push("color-picker--disabled");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "pickerClasses" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	selectSwatch(color) {
+		if (this.isDisabled()) return;
+		this.setValue(color);
+	}
+	onSwatchKeydown(event, index) {
+		if (this.isDisabled()) return;
+		const count = this.swatches().length;
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				next = (index + 1) % count;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				next = (index - 1 + count) % count;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = count - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		this.selectSwatch(this.swatches()[next]);
+		this.swatchButtons()[next]?.nativeElement.focus();
+	}
+	onNativeInput(event) {
+		const target = event.target;
+		this.setValue(target.value);
+	}
+	onHexInput(event) {
+		let val = event.target.value.trim();
+		if (!val.startsWith("#")) val = "#" + val;
+		if (/^#[0-9a-fA-F]{6}$/.test(val)) this.setValue(val);
+	}
+	onBlur() {
+		this.onTouched();
+	}
+	setValue(color) {
+		this.value.set(color);
+		this.colorChange.emit(color);
+		this.onChange(color);
+	}
+	writeValue(val) {
+		this.value.set(val ?? "#3b82f6");
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ColorPickerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ColorPickerComponent,
+		isStandalone: true,
+		selector: "lc-color-picker",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			swatches: {
+				classPropertyName: "swatches",
+				publicName: "swatches",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showInput: {
+				classPropertyName: "showInput",
+				publicName: "showInput",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hexAriaLabel: {
+				classPropertyName: "hexAriaLabel",
+				publicName: "hexAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			swatchesAriaLabel: {
+				classPropertyName: "swatchesAriaLabel",
+				publicName: "swatchesAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { colorChange: "colorChange" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => ColorPickerComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "swatchButtons",
+			predicate: ["swatchBtn"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div [class]=\"pickerClasses()\">\n  @if (label()) {\n    <label class=\"color-picker__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"color-picker__preview-row\">\n    <input\n      type=\"color\"\n      [id]=\"inputId\"\n      class=\"color-picker__native\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onNativeInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n    />\n    <span\n      class=\"color-picker__swatch-preview\"\n      [style.background-color]=\"value()\"\n      aria-hidden=\"true\"\n    ></span>\n    @if (showInput()) {\n      <input\n        type=\"text\"\n        class=\"color-picker__hex-input\"\n        [value]=\"value()\"\n        [disabled]=\"isDisabled()\"\n        maxlength=\"7\"\n        (input)=\"onHexInput($event)\"\n        (blur)=\"onBlur()\"\n        [attr.aria-label]=\"(label() ? label() + ' – ' : '') + hexAriaLabel()\"\n      />\n    }\n  </div>\n  @if (swatches().length > 0) {\n    <div\n      class=\"color-picker__swatches\"\n      role=\"radiogroup\"\n      [attr.aria-label]=\"(label() ? label() + ' – ' : '') + swatchesAriaLabel()\"\n    >\n      @for (swatch of swatches(); track swatch; let i = $index) {\n        <button\n          #swatchBtn\n          type=\"button\"\n          class=\"color-picker__swatch\"\n          role=\"radio\"\n          [class.color-picker__swatch--selected]=\"swatch === value()\"\n          [class.color-picker__swatch--light]=\"swatch === '#ffffff'\"\n          [style.background-color]=\"swatch\"\n          [disabled]=\"isDisabled()\"\n          [tabindex]=\"i === focusableSwatchIndex() ? 0 : -1\"\n          [attr.aria-label]=\"swatch\"\n          [attr.aria-checked]=\"swatch === value()\"\n          (click)=\"selectSwatch(swatch)\"\n          (keydown)=\"onSwatchKeydown($event, i)\"\n          (blur)=\"onBlur()\"\n        ></button>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [".color-picker{display:inline-flex;flex-direction:column;gap:.5rem}.color-picker__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.color-picker__preview-row{display:flex;align-items:center;gap:.5rem}.color-picker__native{width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;background:none}.color-picker__native::-webkit-color-swatch-wrapper{padding:2px}.color-picker__native::-webkit-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native::-moz-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatch-preview{display:block;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}.color-picker__hex-input{width:5.5rem;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family-mono, monospace);color:var(--color-text-primary);background:var(--color-surface-2)}.color-picker__hex-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.color-picker__hex-input:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatches{display:flex;flex-wrap:wrap;gap:.375rem;max-width:16rem}.color-picker__swatch{width:1.5rem;height:1.5rem;border-radius:var(--border-radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .1s ease,border-color .1s ease;padding:0}.color-picker__swatch:hover:not(:disabled){transform:scale(1.15)}.color-picker__swatch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch--selected{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500)}.color-picker__swatch--light{border-color:var(--color-border)}.color-picker__swatch:disabled{cursor:not-allowed;opacity:.5}.color-picker--disabled{opacity:.5;pointer-events:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ColorPickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-color-picker",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => ColorPickerComponent),
+				multi: true
+			}],
+			template: "<div [class]=\"pickerClasses()\">\n  @if (label()) {\n    <label class=\"color-picker__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"color-picker__preview-row\">\n    <input\n      type=\"color\"\n      [id]=\"inputId\"\n      class=\"color-picker__native\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onNativeInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n    />\n    <span\n      class=\"color-picker__swatch-preview\"\n      [style.background-color]=\"value()\"\n      aria-hidden=\"true\"\n    ></span>\n    @if (showInput()) {\n      <input\n        type=\"text\"\n        class=\"color-picker__hex-input\"\n        [value]=\"value()\"\n        [disabled]=\"isDisabled()\"\n        maxlength=\"7\"\n        (input)=\"onHexInput($event)\"\n        (blur)=\"onBlur()\"\n        [attr.aria-label]=\"(label() ? label() + ' – ' : '') + hexAriaLabel()\"\n      />\n    }\n  </div>\n  @if (swatches().length > 0) {\n    <div\n      class=\"color-picker__swatches\"\n      role=\"radiogroup\"\n      [attr.aria-label]=\"(label() ? label() + ' – ' : '') + swatchesAriaLabel()\"\n    >\n      @for (swatch of swatches(); track swatch; let i = $index) {\n        <button\n          #swatchBtn\n          type=\"button\"\n          class=\"color-picker__swatch\"\n          role=\"radio\"\n          [class.color-picker__swatch--selected]=\"swatch === value()\"\n          [class.color-picker__swatch--light]=\"swatch === '#ffffff'\"\n          [style.background-color]=\"swatch\"\n          [disabled]=\"isDisabled()\"\n          [tabindex]=\"i === focusableSwatchIndex() ? 0 : -1\"\n          [attr.aria-label]=\"swatch\"\n          [attr.aria-checked]=\"swatch === value()\"\n          (click)=\"selectSwatch(swatch)\"\n          (keydown)=\"onSwatchKeydown($event, i)\"\n          (blur)=\"onBlur()\"\n        ></button>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [".color-picker{display:inline-flex;flex-direction:column;gap:.5rem}.color-picker__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.color-picker__preview-row{display:flex;align-items:center;gap:.5rem}.color-picker__native{width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;background:none}.color-picker__native::-webkit-color-swatch-wrapper{padding:2px}.color-picker__native::-webkit-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native::-moz-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatch-preview{display:block;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}.color-picker__hex-input{width:5.5rem;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family-mono, monospace);color:var(--color-text-primary);background:var(--color-surface-2)}.color-picker__hex-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.color-picker__hex-input:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatches{display:flex;flex-wrap:wrap;gap:.375rem;max-width:16rem}.color-picker__swatch{width:1.5rem;height:1.5rem;border-radius:var(--border-radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .1s ease,border-color .1s ease;padding:0}.color-picker__swatch:hover:not(:disabled){transform:scale(1.15)}.color-picker__swatch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch--selected{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500)}.color-picker__swatch--light{border-color:var(--color-border)}.color-picker__swatch:disabled{cursor:not-allowed;opacity:.5}.color-picker--disabled{opacity:.5;pointer-events:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		swatches: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "swatches",
+				required: false
+			}]
+		}],
+		showInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showInput",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		hexAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hexAriaLabel",
+				required: false
+			}]
+		}],
+		swatchesAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "swatchesAriaLabel",
+				required: false
+			}]
+		}],
+		colorChange: [{
+			type: i0.Output,
+			args: ["colorChange"]
+		}],
+		swatchButtons: [{
+			type: i0.ViewChildren,
+			args: ["swatchBtn", { isSignal: true }]
+		}]
+	}
+});
+export { ColorPickerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-color-picker.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-color-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-color-picker.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/color-picker/color-picker.component.ts","../../../../libs/angular-ui-kit/src/lib/color-picker/color-picker.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  computed,\n  signal,\n  forwardRef,\n  viewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nconst DEFAULT_SWATCHES = [\n  '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',\n  '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899', '#f43f5e',\n  '#0ea5e9', '#10b981', '#a855f7', '#64748b', '#000000',\n  '#ffffff',\n];\n\n@Component({\n  selector: 'lc-color-picker',\n  standalone: true,\n  templateUrl: './color-picker.component.html',\n  styleUrls: ['./color-picker.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ColorPickerComponent),\n      multi: true,\n    },\n  ],\n})\n/**\n * Color picker component for selecting colors from swatches or custom input.\n *\n * Features:\n * - Predefined color swatch palette (a radiogroup: arrow keys move between swatches)\n * - Native browser color picker integration\n * - Hex color text input with validation\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-color-picker label=\"Brand Color\" [showInput]=\"true\" />\n * ```\n */\nexport class ColorPickerComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Label text */\n  label = input<string>();\n\n  /** Predefined color swatches */\n  swatches = input<string[]>(DEFAULT_SWATCHES);\n\n  /** Whether to show the hex input field */\n  showInput = input<boolean>(true);\n\n  /** Whether the picker is disabled */\n  disabled = input<boolean>(false);\n\n  /** Accessible name of the picker when no visible `label` is set. */\n  ariaLabel = input('Color picker');\n\n  /** Accessible name of the hex field (after `label` and a dash when set). */\n  hexAriaLabel = input('Hex color value');\n\n  /** Accessible name of the swatch group (after `label` and a dash when set). */\n  swatchesAriaLabel = input('Color swatches');\n\n  /** Emits the selected color hex value */\n  colorChange = output<string>();\n\n  /** Per-instance id wiring the label to the native colour input. */\n  readonly inputId = `lc-color-picker-${++ColorPickerComponent.nextId}`;\n\n  protected value = signal('#3b82f6');\n\n  /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n  private readonly formDisabled = signal(false);\n\n  /** Disabled by either route — the one flag the template consults. */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  private readonly swatchButtons = viewChildren<ElementRef<HTMLButtonElement>>('swatchBtn');\n\n  /**\n   * The swatch carrying the group's single tab stop (roving tabindex): the\n   * selected one, or the first when the current colour is not in the palette.\n   */\n  protected readonly focusableSwatchIndex = computed(() => {\n    const index = this.swatches().indexOf(this.value());\n    return index >= 0 ? index : 0;\n  });\n\n  protected pickerClasses = computed(() => {\n    const classes = ['color-picker'];\n    if (this.isDisabled()) classes.push('color-picker--disabled');\n    return classes.join(' ');\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (val: string) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  protected selectSwatch(color: string): void {\n    if (this.isDisabled()) return;\n    this.setValue(color);\n  }\n\n  /** Arrow keys / Home / End move selection (and focus) through the palette like a radiogroup. */\n  protected onSwatchKeydown(event: KeyboardEvent, index: number): void {\n    if (this.isDisabled()) return;\n    const count = this.swatches().length;\n    let next: number;\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        next = (index + 1) % count;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        next = (index - 1 + count) % count;\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = count - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.selectSwatch(this.swatches()[next]);\n    this.swatchButtons()[next]?.nativeElement.focus();\n  }\n\n  protected onNativeInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.setValue(target.value);\n  }\n\n  protected onHexInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    let val = target.value.trim();\n    if (!val.startsWith('#')) val = '#' + val;\n    if (/^#[0-9a-fA-F]{6}$/.test(val)) {\n      this.setValue(val);\n    }\n  }\n\n  protected onBlur(): void {\n    this.onTouched();\n  }\n\n  private setValue(color: string): void {\n    this.value.set(color);\n    this.colorChange.emit(color);\n    this.onChange(color);\n  }\n\n  // ControlValueAccessor\n  writeValue(val: string): void {\n    this.value.set(val ?? '#3b82f6');\n  }\n\n  registerOnChange(fn: (val: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n","<div [class]=\"pickerClasses()\">\n  @if (label()) {\n    <label class=\"color-picker__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n  <div class=\"color-picker__preview-row\">\n    <input\n      type=\"color\"\n      [id]=\"inputId\"\n      class=\"color-picker__native\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onNativeInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel()\"\n    />\n    <span\n      class=\"color-picker__swatch-preview\"\n      [style.background-color]=\"value()\"\n      aria-hidden=\"true\"\n    ></span>\n    @if (showInput()) {\n      <input\n        type=\"text\"\n        class=\"color-picker__hex-input\"\n        [value]=\"value()\"\n        [disabled]=\"isDisabled()\"\n        maxlength=\"7\"\n        (input)=\"onHexInput($event)\"\n        (blur)=\"onBlur()\"\n        [attr.aria-label]=\"(label() ? label() + ' – ' : '') + hexAriaLabel()\"\n      />\n    }\n  </div>\n  @if (swatches().length > 0) {\n    <div\n      class=\"color-picker__swatches\"\n      role=\"radiogroup\"\n      [attr.aria-label]=\"(label() ? label() + ' – ' : '') + swatchesAriaLabel()\"\n    >\n      @for (swatch of swatches(); track swatch; let i = $index) {\n        <button\n          #swatchBtn\n          type=\"button\"\n          class=\"color-picker__swatch\"\n          role=\"radio\"\n          [class.color-picker__swatch--selected]=\"swatch === value()\"\n          [class.color-picker__swatch--light]=\"swatch === '#ffffff'\"\n          [style.background-color]=\"swatch\"\n          [disabled]=\"isDisabled()\"\n          [tabindex]=\"i === focusableSwatchIndex() ? 0 : -1\"\n          [attr.aria-label]=\"swatch\"\n          [attr.aria-checked]=\"swatch === value()\"\n          (click)=\"selectSwatch(swatch)\"\n          (keydown)=\"onSwatchKeydown($event, i)\"\n          (blur)=\"onBlur()\"\n        ></button>\n      }\n    </div>\n  }\n</div>\n"],"mappings":"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"}