@star-ng/ui 0.0.0-placeholder.0 → 0.1.0

package/fesm2022/star-ng-ui-knob.mjs

@@ -0,0 +1,514 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, output } from "@angular/core";
+import { STAR_UI_TEXT } from "@star-ng/ui/core";
+var StarKnob = class StarKnob {
+	value = model(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	min = input(0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	size = input(120, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	valueTemplate = input("{value}", ...ngDevMode ? [{ debugName: "valueTemplate" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* 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
+	});
+	touch = output();
+	id = inject(_IdGenerator).getId("star-knob-");
+	lowest = computed(() => this.min() ?? 0, ...ngDevMode ? [{ debugName: "lowest" }] : /* istanbul ignore next */ []);
+	highest = computed(() => this.max() ?? 100, ...ngDevMode ? [{ debugName: "highest" }] : /* istanbul ignore next */ []);
+	ratio = computed(() => (this.value() - this.lowest()) / Math.max(1, this.highest() - this.lowest()), ...ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []);
+	text = computed(() => this.valueTemplate().replace("{value}", String(this.value())), ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	arc(ratio) {
+		const start = 135 * Math.PI / 180;
+		const end = start + Math.max(1e-4, ratio) * 1.5 * Math.PI;
+		const p = (a) => `${(50 + 40 * Math.cos(a)).toFixed(2)} ${(50 + 40 * Math.sin(a)).toFixed(2)}`;
+		return `M ${p(start)} A 40 40 0 ${end - start > Math.PI ? 1 : 0} 1 ${p(end)}`;
+	}
+	set(next) {
+		if (this.disabled() || this.readonly()) return;
+		const stepped = Math.round(next / this.step()) * this.step();
+		this.value.set(Math.min(this.highest(), Math.max(this.lowest(), stepped)));
+	}
+	onKeydown(event) {
+		const big = (this.highest() - this.lowest()) / 10;
+		const moves = {
+			ArrowUp: this.step(),
+			ArrowRight: this.step(),
+			ArrowDown: -this.step(),
+			ArrowLeft: -this.step(),
+			PageUp: big,
+			PageDown: -big
+		};
+		if (event.key in moves) {
+			event.preventDefault();
+			this.set(this.value() + moves[event.key]);
+		} else if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			this.set(event.key === "Home" ? this.lowest() : this.highest());
+		}
+	}
+	onPointer(event) {
+		const box = event.currentTarget.getBoundingClientRect();
+		let degrees = Math.atan2(event.clientY - (box.top + box.height / 2), event.clientX - (box.left + box.width / 2)) * 180 / Math.PI - 135;
+		if (degrees < 0) degrees += 360;
+		if (degrees > 270) return;
+		this.set(this.lowest() + degrees / 270 * (this.highest() - this.lowest()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarKnob,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarKnob,
+		isStandalone: true,
+		selector: "star-knob",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueTemplate: {
+				classPropertyName: "valueTemplate",
+				publicName: "valueTemplate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				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
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			properties: { "class.star-knob--disabled": "disabled()" },
+			classAttribute: "star-knob"
+		},
+		ngImport: i0,
+		template: `
+    <svg
+      viewBox="0 0 100 100"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      role="slider"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuemin]="lowest()"
+      [attr.aria-valuemax]="highest()"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-valuetext]="text()"
+      [attr.aria-disabled]="disabled() || null"
+      (keydown)="onKeydown($event)"
+      (pointerdown)="onPointer($event)"
+      (pointermove)="$event.buttons === 1 && onPointer($event)"
+      (blur)="touch.emit()"
+    >
+      <path class="star-knob__track" [attr.d]="arc(1)" />
+      <path class="star-knob__value" [attr.d]="arc(ratio())" />
+      <text class="star-knob__text" x="50" y="57" text-anchor="middle">{{ text() }}</text>
+    </svg>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarKnob,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-knob",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-knob",
+				"[class.star-knob--disabled]": "disabled()"
+			},
+			template: `
+    <svg
+      viewBox="0 0 100 100"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      role="slider"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuemin]="lowest()"
+      [attr.aria-valuemax]="highest()"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-valuetext]="text()"
+      [attr.aria-disabled]="disabled() || null"
+      (keydown)="onKeydown($event)"
+      (pointerdown)="onPointer($event)"
+      (pointermove)="$event.buttons === 1 && onPointer($event)"
+      (blur)="touch.emit()"
+    >
+      <path class="star-knob__track" [attr.d]="arc(1)" />
+      <path class="star-knob__value" [attr.d]="arc(ratio())" />
+      <text class="star-knob__text" x="50" y="57" text-anchor="middle">{{ text() }}</text>
+    </svg>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		valueTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueTemplate",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+const SWATCHES = [
+	"#4f46e5",
+	"#0369a1",
+	"#16a34a",
+	"#d97706",
+	"#dc2626",
+	"#6250d6",
+	"#0f172a",
+	"#64748b"
+];
+var StarColorPicker = class StarColorPicker {
+	text = inject(STAR_UI_TEXT);
+	value = model("#4f46e5", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	swatches = input(SWATCHES, ...ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	onHex(input) {
+		const raw = input.value.trim();
+		const hex = raw.startsWith("#") ? raw : `#${raw}`;
+		if (/^#[0-9a-f]{6}$/i.test(hex)) this.value.set(hex.toLowerCase());
+		else input.value = this.value();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarColorPicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarColorPicker,
+		isStandalone: true,
+		selector: "star-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
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: { classAttribute: "star-color" },
+		ngImport: i0,
+		template: `
+    <div
+      class="star-color__swatches"
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() ?? text.colorLabel"
+    >
+      @for (swatch of swatches(); track swatch) {
+        <button
+          type="button"
+          role="radio"
+          class="star-color__swatch"
+          [style.background]="swatch"
+          [attr.aria-checked]="swatch.toLowerCase() === value().toLowerCase()"
+          [attr.aria-label]="swatch"
+          [disabled]="disabled()"
+          (click)="value.set(swatch)"
+        ></button>
+      }
+    </div>
+    <label class="star-color__custom">
+      <input
+        type="color"
+        class="star-color__native"
+        [value]="value()"
+        [disabled]="disabled()"
+        (input)="value.set($any($event.target).value)"
+        (blur)="touch.emit()"
+      />
+      <span class="star-sr-only">{{ text.customColor }}</span>
+    </label>
+    <input
+      class="star-input star-input--sm star-color__hex"
+      [value]="value()"
+      [disabled]="disabled()"
+      [attr.aria-label]="text.hexValue(ariaLabel() ?? text.colorLabel)"
+      maxlength="7"
+      (change)="onHex($any($event.target))"
+    />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarColorPicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-color-picker",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-color" },
+			template: `
+    <div
+      class="star-color__swatches"
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() ?? text.colorLabel"
+    >
+      @for (swatch of swatches(); track swatch) {
+        <button
+          type="button"
+          role="radio"
+          class="star-color__swatch"
+          [style.background]="swatch"
+          [attr.aria-checked]="swatch.toLowerCase() === value().toLowerCase()"
+          [attr.aria-label]="swatch"
+          [disabled]="disabled()"
+          (click)="value.set(swatch)"
+        ></button>
+      }
+    </div>
+    <label class="star-color__custom">
+      <input
+        type="color"
+        class="star-color__native"
+        [value]="value()"
+        [disabled]="disabled()"
+        (input)="value.set($any($event.target).value)"
+        (blur)="touch.emit()"
+      />
+      <span class="star-sr-only">{{ text.customColor }}</span>
+    </label>
+    <input
+      class="star-input star-input--sm star-color__hex"
+      [value]="value()"
+      [disabled]="disabled()"
+      [attr.aria-label]="text.hexValue(ariaLabel() ?? text.colorLabel)"
+      maxlength="7"
+      (change)="onHex($any($event.target))"
+    />
+  `
+		}]
+	}],
+	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
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+export { StarColorPicker, StarKnob };
+
+//# sourceMappingURL=star-ng-ui-knob.mjs.map

package/fesm2022/star-ng-ui-knob.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-knob.mjs","names":[],"sources":["../../../projects/star-ng/knob/knob.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { STAR_UI_TEXT } from '@star-ng/ui/core';\n\n/**\n * Knob (PrimeNG `p-knob`): circular value dial, `role=\"slider\"` with Arrow / PageUp / PageDown /\n * Home / End keys; drag around the dial with a pointer.\n * `<star-knob [(value)]=\"completion\" [max]=\"100\" valueTemplate=\"{value}%\" ariaLabel=\"Completion\" />`\n */\n@Component({\n  selector: 'star-knob',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-knob', '[class.star-knob--disabled]': 'disabled()' },\n  template: `\n    <svg\n      viewBox=\"0 0 100 100\"\n      [attr.width]=\"size()\"\n      [attr.height]=\"size()\"\n      role=\"slider\"\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-valuemin]=\"lowest()\"\n      [attr.aria-valuemax]=\"highest()\"\n      [attr.aria-valuenow]=\"value()\"\n      [attr.aria-valuetext]=\"text()\"\n      [attr.aria-disabled]=\"disabled() || null\"\n      (keydown)=\"onKeydown($event)\"\n      (pointerdown)=\"onPointer($event)\"\n      (pointermove)=\"$event.buttons === 1 && onPointer($event)\"\n      (blur)=\"touch.emit()\"\n    >\n      <path class=\"star-knob__track\" [attr.d]=\"arc(1)\" />\n      <path class=\"star-knob__value\" [attr.d]=\"arc(ratio())\" />\n      <text class=\"star-knob__text\" x=\"50\" y=\"57\" text-anchor=\"middle\">{{ text() }}</text>\n    </svg>\n  `,\n})\nexport class StarKnob implements FormValueControl<number> {\n  readonly value = model(0);\n  readonly min = input<number | undefined>(0);\n  readonly max = input<number | undefined>(100);\n  readonly step = input(1);\n  readonly size = input(120);\n  /** `{value}` is replaced by the number, for example `{value}%`. */\n  readonly valueTemplate = input('{value}');\n  readonly ariaLabel = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly touch = output<void>();\n  protected readonly id = inject(_IdGenerator).getId('star-knob-');\n\n  protected readonly lowest = computed(() => this.min() ?? 0);\n  protected readonly highest = computed(() => this.max() ?? 100);\n  protected readonly ratio = computed(\n    () => (this.value() - this.lowest()) / Math.max(1, this.highest() - this.lowest()),\n  );\n  protected readonly text = computed(() =>\n    this.valueTemplate().replace('{value}', String(this.value())),\n  );\n\n  /** 270° arc from the lower left, clockwise. */\n  protected arc(ratio: number): string {\n    const start = (135 * Math.PI) / 180;\n    const end = start + Math.max(0.0001, ratio) * 1.5 * Math.PI;\n    const p = (a: number) =>\n      `${(50 + 40 * Math.cos(a)).toFixed(2)} ${(50 + 40 * Math.sin(a)).toFixed(2)}`;\n    return `M ${p(start)} A 40 40 0 ${end - start > Math.PI ? 1 : 0} 1 ${p(end)}`;\n  }\n\n  private set(next: number): void {\n    if (this.disabled() || this.readonly()) return;\n    const stepped = Math.round(next / this.step()) * this.step();\n    this.value.set(Math.min(this.highest(), Math.max(this.lowest(), stepped)));\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const big = (this.highest() - this.lowest()) / 10;\n    const moves: Record<string, number> = {\n      ArrowUp: this.step(),\n      ArrowRight: this.step(),\n      ArrowDown: -this.step(),\n      ArrowLeft: -this.step(),\n      PageUp: big,\n      PageDown: -big,\n    };\n    if (event.key in moves) {\n      event.preventDefault();\n      this.set(this.value() + moves[event.key]);\n    } else if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      this.set(event.key === 'Home' ? this.lowest() : this.highest());\n    }\n  }\n\n  protected onPointer(event: PointerEvent): void {\n    const svg = event.currentTarget as SVGSVGElement;\n    const box = svg.getBoundingClientRect();\n    const angle = Math.atan2(\n      event.clientY - (box.top + box.height / 2),\n      event.clientX - (box.left + box.width / 2),\n    );\n    let degrees = (angle * 180) / Math.PI - 135;\n    if (degrees < 0) degrees += 360;\n    if (degrees > 270) return;\n    this.set(this.lowest() + (degrees / 270) * (this.highest() - this.lowest()));\n  }\n}\n\nconst SWATCHES = [\n  '#4f46e5',\n  '#0369a1',\n  '#16a34a',\n  '#d97706',\n  '#dc2626',\n  '#6250d6',\n  '#0f172a',\n  '#64748b',\n];\n\n/**\n * Color picker (PrimeNG `p-colorpicker`): preset swatches, the native color dialog and a\n * hex field. Value: `#rrggbb`.\n * `<star-color-picker [(value)]=\"tagColor\" ariaLabel=\"Tag color\" />`\n */\n@Component({\n  selector: 'star-color-picker',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-color' },\n  template: `\n    <div\n      class=\"star-color__swatches\"\n      role=\"radiogroup\"\n      [attr.aria-label]=\"ariaLabel() ?? text.colorLabel\"\n    >\n      @for (swatch of swatches(); track swatch) {\n        <button\n          type=\"button\"\n          role=\"radio\"\n          class=\"star-color__swatch\"\n          [style.background]=\"swatch\"\n          [attr.aria-checked]=\"swatch.toLowerCase() === value().toLowerCase()\"\n          [attr.aria-label]=\"swatch\"\n          [disabled]=\"disabled()\"\n          (click)=\"value.set(swatch)\"\n        ></button>\n      }\n    </div>\n    <label class=\"star-color__custom\">\n      <input\n        type=\"color\"\n        class=\"star-color__native\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        (input)=\"value.set($any($event.target).value)\"\n        (blur)=\"touch.emit()\"\n      />\n      <span class=\"star-sr-only\">{{ text.customColor }}</span>\n    </label>\n    <input\n      class=\"star-input star-input--sm star-color__hex\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"text.hexValue(ariaLabel() ?? text.colorLabel)\"\n      maxlength=\"7\"\n      (change)=\"onHex($any($event.target))\"\n    />\n  `,\n})\nexport class StarColorPicker implements FormValueControl<string> {\n  protected readonly text = inject(STAR_UI_TEXT);\n  readonly value = model('#4f46e5');\n  readonly swatches = input<readonly string[]>(SWATCHES);\n  readonly ariaLabel = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly touch = output<void>();\n\n  protected onHex(input: HTMLInputElement): void {\n    const raw = input.value.trim();\n    const hex = raw.startsWith('#') ? raw : `#${raw}`;\n    if (/^#[0-9a-f]{6}$/i.test(hex)) this.value.set(hex.toLowerCase());\n    else input.value = this.value();\n  }\n}\n"],"mappings":"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"}