@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-tag-input.mjs

@@ -0,0 +1,288 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Tag } from "@masmarino/gabarit/tag";
+let nextId = 0;
+var TagInput = class TagInput {
+	inputRef = viewChild("input", ...ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []);
+	id = input(`gbt-tag-input-${++nextId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	separatorKeys = input(["Enter", ","], ...ngDevMode ? [{ debugName: "separatorKeys" }] : /* istanbul ignore next */ []);
+	allowDuplicates = input(false, {
+		...ngDevMode ? { debugName: "allowDuplicates" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	color = input("#6b7280", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	removeLabel = input((value) => `Remove ${value}`, ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	tags = signal([], ...ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []);
+	draft = signal("", ...ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.tags.set(value ?? []);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	focusInput() {
+		if (!this.isDisabled()) this.inputRef()?.nativeElement.focus();
+	}
+	onInputChange(event) {
+		this.draft.set(event.target.value);
+	}
+	onInputKeydown(event) {
+		if (this.separatorKeys().includes(event.key)) {
+			event.preventDefault();
+			this.commitDraft();
+			return;
+		}
+		if (event.key === "Backspace" && this.draft() === "" && this.tags().length > 0) {
+			event.preventDefault();
+			this.removeTagAt(this.tags().length - 1);
+		}
+	}
+	onBlur() {
+		this.commitDraft();
+		this.onTouched();
+	}
+	removeTagAt(index) {
+		if (this.isDisabled()) return;
+		const next = this.tags().filter((_, i) => i !== index);
+		this.tags.set(next);
+		this.onChange(next);
+	}
+	commitDraft() {
+		const value = this.draft().trim();
+		this.draft.set("");
+		if (!value || this.isDisabled()) return;
+		if (!this.allowDuplicates() && this.tags().includes(value)) return;
+		const next = [...this.tags(), value];
+		this.tags.set(next);
+		this.onChange(next);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TagInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: TagInput,
+		isStandalone: true,
+		selector: "gbt-tag-input",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			separatorKeys: {
+				classPropertyName: "separatorKeys",
+				publicName: "separatorKeys",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allowDuplicates: {
+				classPropertyName: "allowDuplicates",
+				publicName: "allowDuplicates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => TagInput),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "inputRef",
+			first: true,
+			predicate: ["input"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-tag-input\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-tag-input__label\">{{ label() }}</label>\n  }\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"gbt-tag-input__field\"\n    [class.gbt-tag-input__field--disabled]=\"isDisabled()\"\n    (click)=\"focusInput()\"\n  >\n    @for (tag of tags(); track tag; let i = $index) {\n      <gbt-tag\n        [color]=\"color()\"\n        [removable]=\"!isDisabled()\"\n        [disabled]=\"isDisabled()\"\n        [removeLabel]=\"removeLabel()(tag)\"\n        (removed)=\"removeTagAt(i)\"\n      >\n        {{ tag }}\n      </gbt-tag>\n    }\n    <input\n      #input\n      type=\"text\"\n      [id]=\"id()\"\n      class=\"gbt-tag-input__input\"\n      [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"draft()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (input)=\"onInputChange($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-tag-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+		styles: [".gbt-tag-input{display:flex;flex-direction:column;gap:.375rem}.gbt-tag-input__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-tag-input__field{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:var(--gbt-control-height-md);padding:6px 8px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);cursor:text}.gbt-tag-input__field:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-tag-input__field--disabled{cursor:not-allowed;opacity:.5}.gbt-tag-input__input{flex:1;min-width:80px;padding:2px 0;background:none;border:none;color:var(--text-primary);font-size:14px}.gbt-tag-input__input:focus{outline:none}.gbt-tag-input__input:disabled{cursor:not-allowed}.gbt-tag-input__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Tag,
+			selector: "gbt-tag",
+			inputs: [
+				"color",
+				"removable",
+				"removeLabel",
+				"disabled"
+			],
+			outputs: ["removed"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TagInput,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-tag-input",
+			standalone: true,
+			imports: [Tag],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => TagInput),
+				multi: true
+			}],
+			template: "<div class=\"gbt-tag-input\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-tag-input__label\">{{ label() }}</label>\n  }\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"gbt-tag-input__field\"\n    [class.gbt-tag-input__field--disabled]=\"isDisabled()\"\n    (click)=\"focusInput()\"\n  >\n    @for (tag of tags(); track tag; let i = $index) {\n      <gbt-tag\n        [color]=\"color()\"\n        [removable]=\"!isDisabled()\"\n        [disabled]=\"isDisabled()\"\n        [removeLabel]=\"removeLabel()(tag)\"\n        (removed)=\"removeTagAt(i)\"\n      >\n        {{ tag }}\n      </gbt-tag>\n    }\n    <input\n      #input\n      type=\"text\"\n      [id]=\"id()\"\n      class=\"gbt-tag-input__input\"\n      [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"draft()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (input)=\"onInputChange($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-tag-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+			styles: [".gbt-tag-input{display:flex;flex-direction:column;gap:.375rem}.gbt-tag-input__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-tag-input__field{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:var(--gbt-control-height-md);padding:6px 8px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);cursor:text}.gbt-tag-input__field:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-tag-input__field--disabled{cursor:not-allowed;opacity:.5}.gbt-tag-input__input{flex:1;min-width:80px;padding:2px 0;background:none;border:none;color:var(--text-primary);font-size:14px}.gbt-tag-input__input:focus{outline:none}.gbt-tag-input__input:disabled{cursor:not-allowed}.gbt-tag-input__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"]
+		}]
+	}],
+	propDecorators: {
+		inputRef: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		separatorKeys: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "separatorKeys",
+				required: false
+			}]
+		}],
+		allowDuplicates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowDuplicates",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { TagInput };
+
+//# sourceMappingURL=masmarino-gabarit-tag-input.mjs.map

package/fesm2022/masmarino-gabarit-tag-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-tag-input.mjs","names":[],"sources":["../../../projects/gabarit/tag-input/tag-input.ts","../../../projects/gabarit/tag-input/tag-input.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport { Tag } from '@masmarino/gabarit/tag'\n\nlet nextId = 0\n\n@Component({\n  selector: 'gbt-tag-input',\n  standalone: true,\n  imports: [Tag],\n  templateUrl: './tag-input.html',\n  styleUrl: './tag-input.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => TagInput),\n      multi: true,\n    },\n  ],\n})\nexport class TagInput implements ControlValueAccessor {\n  private readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('input')\n\n  id = input<string>(`gbt-tag-input-${++nextId}`)\n  label = input<string>('')\n  placeholder = input<string>('')\n  disabled = input(false, { transform: booleanAttribute })\n  errorMessage = input<string | null>(null)\n  separatorKeys = input<string[]>(['Enter', ','])\n  allowDuplicates = input(false, { transform: booleanAttribute })\n  color = input<string>('#6b7280')\n  removeLabel = input<(value: string) => string>((value) => `Remove ${value}`)\n\n  protected readonly tags = signal<string[]>([])\n  protected readonly draft = signal('')\n\n  private readonly formDisabled = signal(false)\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  private onChange: (value: string[]) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  writeValue(value: string[] | null): void {\n    this.tags.set(value ?? [])\n  }\n\n  registerOnChange(fn: (value: 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  protected focusInput(): void {\n    if (!this.isDisabled()) {\n      this.inputRef()?.nativeElement.focus()\n    }\n  }\n\n  protected onInputChange(event: Event): void {\n    this.draft.set((event.target as HTMLInputElement).value)\n  }\n\n  protected onInputKeydown(event: KeyboardEvent): void {\n    if (this.separatorKeys().includes(event.key)) {\n      event.preventDefault()\n      this.commitDraft()\n      return\n    }\n    if (event.key === 'Backspace' && this.draft() === '' && this.tags().length > 0) {\n      event.preventDefault()\n      this.removeTagAt(this.tags().length - 1)\n    }\n  }\n\n  protected onBlur(): void {\n    this.commitDraft()\n    this.onTouched()\n  }\n\n  protected removeTagAt(index: number): void {\n    if (this.isDisabled()) {\n      return\n    }\n    const next = this.tags().filter((_, i) => i !== index)\n    this.tags.set(next)\n    this.onChange(next)\n  }\n\n  private commitDraft(): void {\n    const value = this.draft().trim()\n    this.draft.set('')\n    if (!value || this.isDisabled()) {\n      return\n    }\n    if (!this.allowDuplicates() && this.tags().includes(value)) {\n      return\n    }\n    const next = [...this.tags(), value]\n    this.tags.set(next)\n    this.onChange(next)\n  }\n}\n","<div class=\"gbt-tag-input\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-tag-input__label\">{{ label() }}</label>\n  }\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"gbt-tag-input__field\"\n    [class.gbt-tag-input__field--disabled]=\"isDisabled()\"\n    (click)=\"focusInput()\"\n  >\n    @for (tag of tags(); track tag; let i = $index) {\n      <gbt-tag\n        [color]=\"color()\"\n        [removable]=\"!isDisabled()\"\n        [disabled]=\"isDisabled()\"\n        [removeLabel]=\"removeLabel()(tag)\"\n        (removed)=\"removeTagAt(i)\"\n      >\n        {{ tag }}\n      </gbt-tag>\n    }\n    <input\n      #input\n      type=\"text\"\n      [id]=\"id()\"\n      class=\"gbt-tag-input__input\"\n      [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"draft()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (input)=\"onInputChange($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-tag-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-tag.mjs

@@ -0,0 +1,155 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+const HEX_6 = /^#?[0-9a-fA-F]{6}$/;
+function normalizeHex(hex) {
+	if (!HEX_6.test(hex)) throw new Error(`getReadableTextColor: expected a 6-digit hex color such as "#dc2626" or "dc2626", got ${JSON.stringify(hex)}. Shorthand hex (#abc), CSS named colors, rgb()/hsl() and custom properties are not supported.`);
+	return hex.replace("#", "");
+}
+function linearizeChannel(value) {
+	const c = value / 255;
+	return c <= .03928 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
+}
+function relativeLuminance(normalizedHex) {
+	const r = parseInt(normalizedHex.substring(0, 2), 16);
+	const g = parseInt(normalizedHex.substring(2, 4), 16);
+	const b = parseInt(normalizedHex.substring(4, 6), 16);
+	return .2126 * linearizeChannel(r) + .7152 * linearizeChannel(g) + .0722 * linearizeChannel(b);
+}
+function contrastRatio(normalizedA, normalizedB) {
+	const lA = relativeLuminance(normalizedA);
+	const lB = relativeLuminance(normalizedB);
+	const lighter = Math.max(lA, lB);
+	const darker = Math.min(lA, lB);
+	return (lighter + .05) / (darker + .05);
+}
+function getReadableTextColor(backgroundHex) {
+	const background = normalizeHex(backgroundHex);
+	return contrastRatio(background, "ffffff") >= contrastRatio(background, "000000") ? "#ffffff" : "#000000";
+}
+var Tag = class Tag {
+	color = input.required(...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	removable = input(false, ...ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []);
+	removeLabel = input("Remove", ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	removed = output();
+	textColor = computed(() => getReadableTextColor(this.color()), ...ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []);
+	onRemoveClick(event) {
+		event.stopPropagation();
+		this.removed.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Tag,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Tag,
+		isStandalone: true,
+		selector: "gbt-tag",
+		inputs: {
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			removable: {
+				classPropertyName: "removable",
+				publicName: "removable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { removed: "removed" },
+		ngImport: i0,
+		template: "<span\n  class=\"gbt-tag\"\n  [style.background]=\"color()\"\n  [style.color]=\"textColor()\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n>\n  <span class=\"gbt-tag__label\"><ng-content /></span>\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"gbt-tag__remove\"\n      [attr.aria-label]=\"removeLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n",
+		styles: [":host{display:inline-flex;max-width:100%}.gbt-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--site-border-radius-sm);font-size:.75rem;font-weight:600;line-height:1.4;max-width:100%}.gbt-tag__label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-tag__remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;border-radius:4px;color:currentColor;cursor:pointer;transition:background var(--site-transition-fast)}.gbt-tag__remove:hover{background:color-mix(in srgb,currentColor 20%,transparent)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Tag,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-tag",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span\n  class=\"gbt-tag\"\n  [style.background]=\"color()\"\n  [style.color]=\"textColor()\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n>\n  <span class=\"gbt-tag__label\"><ng-content /></span>\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"gbt-tag__remove\"\n      [attr.aria-label]=\"removeLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n",
+			styles: [":host{display:inline-flex;max-width:100%}.gbt-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--site-border-radius-sm);font-size:.75rem;font-weight:600;line-height:1.4;max-width:100%}.gbt-tag__label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-tag__remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;border-radius:4px;color:currentColor;cursor:pointer;transition:background var(--site-transition-fast)}.gbt-tag__remove:hover{background:color-mix(in srgb,currentColor 20%,transparent)}\n"]
+		}]
+	}],
+	propDecorators: {
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: true
+			}]
+		}],
+		removable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removable",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		removed: [{
+			type: i0.Output,
+			args: ["removed"]
+		}]
+	}
+});
+export { Tag };
+
+//# sourceMappingURL=masmarino-gabarit-tag.mjs.map

package/fesm2022/masmarino-gabarit-tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-tag.mjs","names":[],"sources":["../../../projects/gabarit/tag/tag-contrast.ts","../../../projects/gabarit/tag/tag.ts","../../../projects/gabarit/tag/tag.html"],"sourcesContent":["const HEX_6 = /^#?[0-9a-fA-F]{6}$/\n\nfunction normalizeHex(hex: string): string {\n  if (!HEX_6.test(hex)) {\n    throw new Error(\n      `getReadableTextColor: expected a 6-digit hex color such as \"#dc2626\" or \"dc2626\", got ${JSON.stringify(hex)}. ` +\n        'Shorthand hex (#abc), CSS named colors, rgb()/hsl() and custom properties are not supported.',\n    )\n  }\n  return hex.replace('#', '')\n}\n\nfunction linearizeChannel(value: number): number {\n  const c = value / 255\n  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)\n}\n\nfunction relativeLuminance(normalizedHex: string): number {\n  const r = parseInt(normalizedHex.substring(0, 2), 16)\n  const g = parseInt(normalizedHex.substring(2, 4), 16)\n  const b = parseInt(normalizedHex.substring(4, 6), 16)\n  return 0.2126 * linearizeChannel(r) + 0.7152 * linearizeChannel(g) + 0.0722 * linearizeChannel(b)\n}\n\nfunction contrastRatio(normalizedA: string, normalizedB: string): number {\n  const lA = relativeLuminance(normalizedA)\n  const lB = relativeLuminance(normalizedB)\n  const lighter = Math.max(lA, lB)\n  const darker = Math.min(lA, lB)\n  return (lighter + 0.05) / (darker + 0.05)\n}\n\nexport function getReadableTextColor(backgroundHex: string): string {\n  const background = normalizeHex(backgroundHex)\n  const white = 'ffffff'\n  const dark = '000000'\n  return contrastRatio(background, white) >= contrastRatio(background, dark) ? '#ffffff' : '#000000'\n}\n","import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { getReadableTextColor } from './tag-contrast'\n\n@Component({\n  selector: 'gbt-tag',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './tag.html',\n  styleUrl: './tag.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Tag {\n  color = input.required<string>()\n  removable = input<boolean>(false)\n  removeLabel = input<string>('Remove')\n  disabled = input<boolean>(false)\n\n  removed = output<void>()\n\n  protected readonly textColor = computed(() => getReadableTextColor(this.color()))\n\n  protected onRemoveClick(event: MouseEvent): void {\n    event.stopPropagation()\n    this.removed.emit()\n  }\n}\n","<span\n  class=\"gbt-tag\"\n  [style.background]=\"color()\"\n  [style.color]=\"textColor()\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n>\n  <span class=\"gbt-tag__label\"><ng-content /></span>\n  @if (removable()) {\n    <button\n      type=\"button\"\n      class=\"gbt-tag__remove\"\n      [attr.aria-label]=\"removeLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</span>\n"],"mappings":"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"}