@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-color-picker.mjs

@@ -0,0 +1,815 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { NgControl } from "@angular/forms";
+import { FormField } from "@angular/forms/signals";
+import { VD_FIELD, vdNgControlState, vdUniqueId } from "@vadem/ui/field";
+import { VdIcon } from "@vadem/ui/icon";
+import { VdPopover } from "@vadem/ui/popover";
+import { VdButton } from "@vadem/ui/button";
+import { vdTexts } from "@vadem/ui/locale";
+function vdNormalizeHex(value) {
+	if (typeof value !== "string") return null;
+	const raw = value.trim().replace(/^#/, "");
+	if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(raw)) return null;
+	return "#" + (raw.length === 3 ? [...raw].map((char) => char + char).join("") : raw).toUpperCase();
+}
+function vdColorInk(value) {
+	const hex = vdNormalizeHex(value);
+	if (!hex) return "#000000";
+	const luminance = [
+		1,
+		3,
+		5
+	].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) => c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4).reduce((sum, c, i) => sum + c * [
+		.2126,
+		.7152,
+		.0722
+	][i], 0);
+	return (luminance + .05) / .05 >= 1.05 / (luminance + .05) ? "#000000" : "#FFFFFF";
+}
+function vdColorPaletteKey(index, count, key, rtl) {
+	if (!count) return null;
+	if (key === "Home") return 0;
+	if (key === "End") return count - 1;
+	const delta = key === "ArrowDown" ? 1 : key === "ArrowUp" ? -1 : key === "ArrowRight" ? rtl ? -1 : 1 : key === "ArrowLeft" ? rtl ? 1 : -1 : 0;
+	return delta ? (index + delta + count) % count : null;
+}
+var VdColorPicker = class VdColorPicker {
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	swatches = input([], ...ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	ariaLabelledby = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
+		alias: "aria-labelledby"
+	});
+	placeholder = input(...ngDevMode ? [void 0, { debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	pickerLabel = input(...ngDevMode ? [void 0, { debugName: "pickerLabel" }] : /* istanbul ignore next */ []);
+	hexLabel = input(...ngDevMode ? [void 0, { debugName: "hexLabel" }] : /* istanbul ignore next */ []);
+	paletteLabel = input(...ngDevMode ? [void 0, { debugName: "paletteLabel" }] : /* istanbul ignore next */ []);
+	applyLabel = input(...ngDevMode ? [void 0, { debugName: "applyLabel" }] : /* istanbul ignore next */ []);
+	errorLabel = input(...ngDevMode ? [void 0, { debugName: "errorLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("colorPicker", {
+		placeholder: this.placeholder,
+		pickerLabel: this.pickerLabel,
+		hexLabel: this.hexLabel,
+		paletteLabel: this.paletteLabel,
+		applyLabel: this.applyLabel,
+		errorLabel: this.errorLabel
+	});
+	touch = output();
+	controlId = vdUniqueId("vd-color-picker");
+	hexId = `${this.controlId}-hex`;
+	errorId = `${this.controlId}-error`;
+	color = computed(() => vdNormalizeHex(this.value()), ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	draft = signal("", ...ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []);
+	draftColor = computed(() => vdNormalizeHex(this.draft()), ...ngDevMode ? [{ debugName: "draftColor" }] : /* istanbul ignore next */ []);
+	draftError = signal(false, ...ngDevMode ? [{ debugName: "draftError" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	ink = vdColorInk;
+	palette = computed(() => {
+		const seen = /* @__PURE__ */ new Set();
+		return this.swatches().flatMap((swatch) => {
+			const value = vdNormalizeHex(swatch.value);
+			if (!value || seen.has(value)) return [];
+			seen.add(value);
+			return [{
+				value,
+				label: swatch.label.trim() || value
+			}];
+		});
+	}, ...ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []);
+	paletteEntry = computed(() => Math.max(0, this.palette().findIndex((swatch) => swatch.value === this.draftColor())), ...ngDevMode ? [{ debugName: "paletteEntry" }] : /* istanbul ignore next */ []);
+	popup = viewChild.required(VdPopover, ...ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []);
+	trigger = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	hex = viewChild.required("hex", ...ngDevMode ? [{ debugName: "hex" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef).nativeElement;
+	field = inject(VD_FIELD, { optional: true });
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	formBound = signal(false, ...ngDevMode ? [{ debugName: "formBound" }] : /* istanbul ignore next */ []);
+	ngSource = signal(null, ...ngDevMode ? [{ debugName: "ngSource" }] : /* istanbul ignore next */ []);
+	ngState = computed(() => this.ngSource()?.() ?? {
+		invalid: false,
+		touched: false,
+		disabled: false,
+		required: false
+	}, ...ngDevMode ? [{ debugName: "ngState" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.ngState().disabled, ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	locked = computed(() => this.isDisabled() || this.readonly(), ...ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []);
+	isRequired = computed(() => this.required() || this.ngState().required, ...ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => this.invalid() && (!this.formBound() || this.touched()) || this.ngState().invalid && this.ngState().touched, ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	wasOpen = null;
+	lastValue;
+	constructor() {
+		const control = {
+			id: signal(this.controlId),
+			invalid: this.showInvalid,
+			required: this.isRequired,
+			disabled: this.isDisabled
+		};
+		this.field?.register(control);
+		this.destroyRef.onDestroy(() => this.field?.unregister(control));
+		afterNextRender(() => {
+			const anchor = `--${this.popup().id}`;
+			this.trigger().nativeElement.style.setProperty("anchor-name", anchor);
+			this.popup().el.style.setProperty("position-anchor", anchor);
+		});
+		afterRenderEffect(() => {
+			const value = this.value();
+			if (this.locked() || this.lastValue !== void 0 && this.lastValue !== value) this.popup().hide();
+			this.lastValue = value;
+		});
+	}
+	ngOnInit() {
+		const ng = this.injector.get(NgControl, null, {
+			self: true,
+			optional: true
+		});
+		this.formBound.set(!!ng || !!this.injector.get(FormField, null, {
+			self: true,
+			optional: true
+		}));
+		this.ngSource.set(vdNgControlState(ng, this.destroyRef));
+	}
+	rememberState() {
+		this.wasOpen = this.popup().el.matches(":popover-open");
+	}
+	toggle() {
+		const wasOpen = this.wasOpen ?? this.popup().el.matches(":popover-open");
+		this.wasOpen = null;
+		if (this.locked()) return;
+		if (wasOpen) {
+			this.popup().hide();
+			return;
+		}
+		this.draft.set(this.color() ?? "");
+		this.draftError.set(false);
+		this.popup().el.showPopover({ source: this.trigger().nativeElement });
+	}
+	triggerKey(event) {
+		if (event.altKey && event.key === "ArrowDown" && !this.popup().el.matches(":popover-open")) {
+			event.preventDefault();
+			this.wasOpen = false;
+			this.toggle();
+		}
+	}
+	onToggle(event) {
+		const opened = event.newState === "open";
+		this.open.set(opened);
+		if (opened && !this.locked()) {
+			this.hex().nativeElement.focus();
+			this.hex().nativeElement.select();
+		}
+	}
+	edit(event) {
+		this.draft.set(event.target.value);
+		this.draftError.set(false);
+	}
+	validateOnBlur() {
+		if (this.draft() && !this.draftColor()) this.draftError.set(true);
+	}
+	apply(event) {
+		event?.preventDefault();
+		const value = this.draftColor();
+		if (!value) {
+			this.draftError.set(true);
+			this.hex().nativeElement.focus();
+			return;
+		}
+		this.commit(value);
+	}
+	commit(value) {
+		if (this.locked()) return;
+		this.value.set(value);
+		this.popup().hide();
+		this.trigger().nativeElement.focus();
+	}
+	paletteKey(event, index) {
+		if (this.locked() || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const next = vdColorPaletteKey(index, this.palette().length, event.key, this.host.matches(":dir(rtl)"));
+		if (next === null) return;
+		event.preventDefault();
+		this.draft.set(this.palette()[next].value);
+		this.draftError.set(false);
+		this.popup().el.querySelectorAll("[role=radio]")[next]?.focus();
+	}
+	leavePopup(event) {
+		const next = event.relatedTarget;
+		if (next && !this.popup().el.contains(next)) this.popup().hide();
+	}
+	onFocusOut(event) {
+		if (!event.relatedTarget || !this.host.contains(event.relatedTarget)) this.touch.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdColorPicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdColorPicker,
+		isStandalone: true,
+		selector: "vd-color-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			swatches: {
+				classPropertyName: "swatches",
+				publicName: "swatches",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "aria-labelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pickerLabel: {
+				classPropertyName: "pickerLabel",
+				publicName: "pickerLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hexLabel: {
+				classPropertyName: "hexLabel",
+				publicName: "hexLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			paletteLabel: {
+				classPropertyName: "paletteLabel",
+				publicName: "paletteLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			applyLabel: {
+				classPropertyName: "applyLabel",
+				publicName: "applyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorLabel: {
+				classPropertyName: "errorLabel",
+				publicName: "errorLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			listeners: { "focusout": "onFocusOut($event)" },
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-open": "open() ? \"\" : null",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.data-readonly": "readonly() ? \"\" : null",
+				"attr.data-invalid": "showInvalid() ? \"\" : null",
+				"attr.aria-label": "null",
+				"attr.aria-labelledby": "null"
+			},
+			classAttribute: "vd-color-picker"
+		},
+		viewQueries: [
+			{
+				propertyName: "popup",
+				first: true,
+				predicate: VdPopover,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "trigger",
+				first: true,
+				predicate: ["trigger"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "hex",
+				first: true,
+				predicate: ["hex"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    <button
+      #trigger
+      type="button"
+      class="vd-input vd-color-picker__trigger"
+      [id]="controlId"
+      [attr.data-size]="size()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="readonly() || null"
+      aria-haspopup="dialog"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="popup.id"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabelledby() ?? null"
+      [attr.aria-describedby]="field?.describedBy() ?? null"
+      [attr.aria-invalid]="showInvalid() || null"
+      [attr.data-invalid]="showInvalid() ? '' : null"
+      (pointerdown)="rememberState()"
+      (click)="toggle()"
+      (keydown)="triggerKey($event)"
+    >
+      <span
+        class="vd-color-picker__preview"
+        aria-hidden="true"
+        [attr.data-empty]="color() ? null : ''"
+        [style.--vd-color-picker-value]="color()"
+      ></span>
+      <span class="vd-color-picker__value" [attr.data-placeholder]="color() ? null : ''">{{
+        color() || t().placeholder
+      }}</span>
+      <vd-icon name="chevron-down" />
+    </button>
+    <div
+      vdPopover
+      #popup="vdPopover"
+      class="vd-color-picker__popup"
+      [attr.aria-label]="t().pickerLabel"
+      (toggle)="onToggle($event)"
+      (focusout)="leavePopup($event)"
+    >
+      <div class="vd-color-picker__draft">
+        <span
+          class="vd-color-picker__preview"
+          aria-hidden="true"
+          [attr.data-empty]="draftColor() || color() ? null : ''"
+          [style.--vd-color-picker-value]="draftColor() || color()"
+        ></span>
+        <label class="vd-color-picker__hex-label" [for]="hexId">{{ t().hexLabel }}</label>
+      </div>
+      <input
+        #hex
+        class="vd-input vd-color-picker__hex"
+        type="text"
+        [id]="hexId"
+        [value]="draft()"
+        autocomplete="off"
+        spellcheck="false"
+        autocapitalize="characters"
+        dir="ltr"
+        [disabled]="locked()"
+        [attr.aria-invalid]="draftError() || null"
+        [attr.data-invalid]="draftError() ? '' : null"
+        [attr.aria-describedby]="draftError() ? errorId : null"
+        (input)="edit($event)"
+        (blur)="validateOnBlur()"
+        (keydown.enter)="apply($event)"
+      />
+      @if (palette().length) {
+        <div
+          class="vd-color-picker__palette"
+          role="radiogroup"
+          [attr.aria-label]="t().paletteLabel"
+        >
+          @for (swatch of palette(); track swatch.value; let i = $index) {
+            <button
+              type="button"
+              class="vd-color-picker__swatch"
+              role="radio"
+              [disabled]="locked()"
+              [attr.aria-label]="swatch.label"
+              [attr.aria-checked]="draftColor() === swatch.value"
+              [attr.tabindex]="i === paletteEntry() ? 0 : -1"
+              [style.--vd-color-picker-value]="swatch.value"
+              [style.--vd-color-picker-ink]="ink(swatch.value)"
+              (keydown)="paletteKey($event, i)"
+              (click)="commit(swatch.value)"
+            >
+              <span class="vd-color-picker__chip" aria-hidden="true"><vd-icon name="check" /></span>
+            </button>
+          }
+        </div>
+      }
+      @if (draftError()) {
+        <p class="vd-color-picker__error" [id]="errorId">
+          <vd-icon name="alert-circle" />{{ t().errorLabel }}
+        </p>
+      }
+      <button vdButton type="button" [disabled]="locked()" (click)="apply()">
+        {{ t().applyLabel }}
+      </button>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: VdIcon,
+				selector: "vd-icon",
+				inputs: ["name", "label"]
+			},
+			{
+				kind: "directive",
+				type: VdPopover,
+				selector: "[vdPopover]",
+				inputs: ["placement"],
+				exportAs: ["vdPopover"]
+			},
+			{
+				kind: "component",
+				type: VdButton,
+				selector: "button[vdButton], a[vdButton]",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"type"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdColorPicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-color-picker",
+			imports: [
+				VdIcon,
+				VdPopover,
+				VdButton
+			],
+			template: `
+    <button
+      #trigger
+      type="button"
+      class="vd-input vd-color-picker__trigger"
+      [id]="controlId"
+      [attr.data-size]="size()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="readonly() || null"
+      aria-haspopup="dialog"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="popup.id"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabelledby() ?? null"
+      [attr.aria-describedby]="field?.describedBy() ?? null"
+      [attr.aria-invalid]="showInvalid() || null"
+      [attr.data-invalid]="showInvalid() ? '' : null"
+      (pointerdown)="rememberState()"
+      (click)="toggle()"
+      (keydown)="triggerKey($event)"
+    >
+      <span
+        class="vd-color-picker__preview"
+        aria-hidden="true"
+        [attr.data-empty]="color() ? null : ''"
+        [style.--vd-color-picker-value]="color()"
+      ></span>
+      <span class="vd-color-picker__value" [attr.data-placeholder]="color() ? null : ''">{{
+        color() || t().placeholder
+      }}</span>
+      <vd-icon name="chevron-down" />
+    </button>
+    <div
+      vdPopover
+      #popup="vdPopover"
+      class="vd-color-picker__popup"
+      [attr.aria-label]="t().pickerLabel"
+      (toggle)="onToggle($event)"
+      (focusout)="leavePopup($event)"
+    >
+      <div class="vd-color-picker__draft">
+        <span
+          class="vd-color-picker__preview"
+          aria-hidden="true"
+          [attr.data-empty]="draftColor() || color() ? null : ''"
+          [style.--vd-color-picker-value]="draftColor() || color()"
+        ></span>
+        <label class="vd-color-picker__hex-label" [for]="hexId">{{ t().hexLabel }}</label>
+      </div>
+      <input
+        #hex
+        class="vd-input vd-color-picker__hex"
+        type="text"
+        [id]="hexId"
+        [value]="draft()"
+        autocomplete="off"
+        spellcheck="false"
+        autocapitalize="characters"
+        dir="ltr"
+        [disabled]="locked()"
+        [attr.aria-invalid]="draftError() || null"
+        [attr.data-invalid]="draftError() ? '' : null"
+        [attr.aria-describedby]="draftError() ? errorId : null"
+        (input)="edit($event)"
+        (blur)="validateOnBlur()"
+        (keydown.enter)="apply($event)"
+      />
+      @if (palette().length) {
+        <div
+          class="vd-color-picker__palette"
+          role="radiogroup"
+          [attr.aria-label]="t().paletteLabel"
+        >
+          @for (swatch of palette(); track swatch.value; let i = $index) {
+            <button
+              type="button"
+              class="vd-color-picker__swatch"
+              role="radio"
+              [disabled]="locked()"
+              [attr.aria-label]="swatch.label"
+              [attr.aria-checked]="draftColor() === swatch.value"
+              [attr.tabindex]="i === paletteEntry() ? 0 : -1"
+              [style.--vd-color-picker-value]="swatch.value"
+              [style.--vd-color-picker-ink]="ink(swatch.value)"
+              (keydown)="paletteKey($event, i)"
+              (click)="commit(swatch.value)"
+            >
+              <span class="vd-color-picker__chip" aria-hidden="true"><vd-icon name="check" /></span>
+            </button>
+          }
+        </div>
+      }
+      @if (draftError()) {
+        <p class="vd-color-picker__error" [id]="errorId">
+          <vd-icon name="alert-circle" />{{ t().errorLabel }}
+        </p>
+      }
+      <button vdButton type="button" [disabled]="locked()" (click)="apply()">
+        {{ t().applyLabel }}
+      </button>
+    </div>
+  `,
+			host: {
+				class: "vd-color-picker",
+				"[attr.data-size]": "size()",
+				"[attr.data-open]": "open() ? \"\" : null",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.data-readonly]": "readonly() ? \"\" : null",
+				"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+				"[attr.aria-label]": "null",
+				"[attr.aria-labelledby]": "null",
+				"(focusout)": "onFocusOut($event)"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		swatches: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "swatches",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		pickerLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pickerLabel",
+				required: false
+			}]
+		}],
+		hexLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hexLabel",
+				required: false
+			}]
+		}],
+		paletteLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paletteLabel",
+				required: false
+			}]
+		}],
+		applyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applyLabel",
+				required: false
+			}]
+		}],
+		errorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorLabel",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		popup: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => VdPopover), { isSignal: true }]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		hex: [{
+			type: i0.ViewChild,
+			args: ["hex", { isSignal: true }]
+		}]
+	}
+});
+export { VdColorPicker };
+
+//# sourceMappingURL=vadem-ui-color-picker.mjs.map