@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-select.mjs

@@ -0,0 +1,512 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, computed, forwardRef, inject, input, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Icon } from "@masmarino/gabarit/icon";
+import { Tag } from "@masmarino/gabarit/tag";
+import { floatingPanelAnchor, followPageScroll } from "@masmarino/gabarit/floating-panel";
+let nextSelectId = 0;
+var Select = class Select {
+	elementRef = inject(ElementRef);
+	id = input(`gbt-select-${++nextSelectId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	hideLabel = input(false, {
+		...ngDevMode ? { debugName: "hideLabel" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	fullWidth = input(false, {
+		...ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	chips = input(false, {
+		...ngDevMode ? { debugName: "chips" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input("Select…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	selectedCountLabel = input((count) => `${count} selected`, ...ngDevMode ? [{ debugName: "selectedCountLabel" }] : /* istanbul ignore next */ []);
+	chipRemoveLabel = input((label) => `Remove ${label}`, ...ngDevMode ? [{ debugName: "chipRemoveLabel" }] : /* istanbul ignore next */ []);
+	noOptionsMessage = input("No options", ...ngDevMode ? [{ debugName: "noOptionsMessage" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	selected = signal([], ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	panelStyle = signal(null, ...ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	labelId = computed(() => `${this.id()}-label`, ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
+	chipsId = computed(() => `${this.id()}-chips`, ...ngDevMode ? [{ debugName: "chipsId" }] : /* istanbul ignore next */ []);
+	hintId = computed(() => `${this.id()}-hint`, ...ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []);
+	showHint = computed(() => !!this.hint() && !this.errorMessage(), ...ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	writeValue(value) {
+		if (this.multiple()) this.selected.set(Array.isArray(value) ? value : []);
+		else this.selected.set(value === null || value === void 0 ? [] : [value]);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	selectedOptions = computed(() => {
+		const selected = this.selected();
+		return this.options().filter((option) => selected.includes(option.value));
+	}, ...ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []);
+	triggerLabel = computed(() => {
+		const opts = this.selectedOptions();
+		if (opts.length === 0) return this.placeholder();
+		if (this.chips() && this.multiple()) return this.placeholder();
+		if (this.multiple() && opts.length > 1) return this.selectedCountLabel()(opts.length);
+		return opts[0].label;
+	}, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
+	chipsVisible = computed(() => this.chips() && this.multiple() && this.selectedOptions().length > 0, ...ngDevMode ? [{ debugName: "chipsVisible" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		const ids = [];
+		if (this.chipsVisible()) ids.push(this.chipsId());
+		if (this.errorMessage()) ids.push(`${this.id()}-error`);
+		else if (this.showHint()) ids.push(this.hintId());
+		return ids.length > 0 ? ids.join(" ") : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	triggerIcon = computed(() => {
+		const opts = this.selectedOptions();
+		return opts.length === 1 ? opts[0].icon : void 0;
+	}, ...ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []);
+	activeOptionId = computed(() => this.open() && this.activeIndex() >= 0 ? `${this.id()}-option-${this.activeIndex()}` : null, ...ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []);
+	hasNoOptions = computed(() => this.options().length === 0, ...ngDevMode ? [{ debugName: "hasNoOptions" }] : /* istanbul ignore next */ []);
+	isSelected(value) {
+		return this.selected().includes(value);
+	}
+	toggleOpen() {
+		if (this.isDisabled()) return;
+		this.open.update((value) => !value);
+		if (this.open()) {
+			const options = this.options();
+			this.activeIndex.set(options.length === 0 ? -1 : Math.max(0, options.findIndex((o) => this.isSelected(o.value))));
+			this.updatePanelPosition();
+		} else this.onTouched();
+	}
+	constructor() {
+		followPageScroll(() => this.updatePanelPosition());
+	}
+	updatePanelPosition() {
+		const trigger = this.elementRef.nativeElement.querySelector(".gbt-select__trigger");
+		const anchor = floatingPanelAnchor(this.open(), trigger, (rect) => {
+			const chipRow = this.elementRef.nativeElement.querySelector(".gbt-select__chips");
+			return chipRow ? Math.max(rect.bottom, chipRow.getBoundingClientRect().bottom) : rect.bottom;
+		});
+		if (anchor) this.panelStyle.set({
+			top: `${anchor.bottom}px`,
+			left: `${anchor.left}px`,
+			width: `${anchor.rect.width}px`
+		});
+	}
+	removeChip(value, index) {
+		if (this.isDisabled()) return;
+		const host = this.elementRef.nativeElement;
+		const removeButtons = Array.from(host.querySelectorAll(".gbt-select__chips .gbt-tag__remove"));
+		const nextFocus = removeButtons[index + 1] ?? removeButtons[index - 1] ?? host.querySelector(".gbt-select__trigger");
+		this.selectOption(value);
+		nextFocus?.focus();
+	}
+	selectOption(value) {
+		if (this.multiple()) {
+			const current = this.selected();
+			const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+			this.selected.set(next);
+			this.onChange(next);
+			this.onTouched();
+		} else {
+			this.selected.set([value]);
+			this.onChange(value);
+			this.open.set(false);
+			this.onTouched();
+		}
+	}
+	handleClickOutside(event) {
+		if (this.open() && !this.elementRef.nativeElement.contains(event.target)) {
+			this.open.set(false);
+			this.onTouched();
+		}
+	}
+	onKeydown(event) {
+		if (this.isDisabled()) return;
+		if (!this.open()) {
+			if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				this.toggleOpen();
+			}
+			return;
+		}
+		const options = this.options();
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				this.open.set(false);
+				this.onTouched();
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				if (options.length > 0) this.activeIndex.update((i) => Math.min(i + 1, options.length - 1));
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				if (options.length > 0) this.activeIndex.update((i) => Math.max(i - 1, 0));
+				break;
+			case "Enter":
+			case " ": {
+				event.preventDefault();
+				const active = options[this.activeIndex()];
+				if (active) this.selectOption(active.value);
+				break;
+			}
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Select,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Select,
+		isStandalone: true,
+		selector: "gbt-select",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideLabel: {
+				classPropertyName: "hideLabel",
+				publicName: "hideLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fullWidth: {
+				classPropertyName: "fullWidth",
+				publicName: "fullWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chips: {
+				classPropertyName: "chips",
+				publicName: "chips",
+				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
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedCountLabel: {
+				classPropertyName: "selectedCountLabel",
+				publicName: "selectedCountLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chipRemoveLabel: {
+				classPropertyName: "chipRemoveLabel",
+				publicName: "chipRemoveLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noOptionsMessage: {
+				classPropertyName: "noOptionsMessage",
+				publicName: "noOptionsMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"document:click": "handleClickOutside($event)",
+				"keydown": "onKeydown($event)",
+				"window:resize": "updatePanelPosition()"
+			},
+			properties: {
+				"class.gbt-select--sm": "size() === 'sm'",
+				"class.gbt-select--full": "fullWidth()"
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => Select),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label\n      [id]=\"labelId()\"\n      [for]=\"id()\"\n      class=\"gbt-select__label\"\n      [class.gbt-select__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-label]=\"label() ? null : placeholder() || null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (chipsVisible()) {\n    <div class=\"gbt-select__chips\" [id]=\"chipsId()\">\n      @for (option of selectedOptions(); track option.value; let i = $index) {\n        <gbt-tag\n          [color]=\"option.color ?? '#6b7280'\"\n          [removable]=\"!isDisabled()\"\n          [disabled]=\"isDisabled()\"\n          [removeLabel]=\"chipRemoveLabel()(option.label)\"\n          (removed)=\"removeChip(option.value, i)\"\n        >\n          {{ option.label }}\n        </gbt-tag>\n      }\n    </div>\n  }\n  @if (chips() && multiple()) {\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n      {{ selectedCountLabel()(selectedOptions().length) }}\n    </div>\n  }\n  @if (open() && panelStyle(); as style) {\n    @if (hasNoOptions()) {\n      <div\n        [id]=\"id() + '-listbox'\"\n        class=\"gbt-select__panel gbt-select__empty\"\n        role=\"status\"\n        [style.top]=\"style.top\"\n        [style.left]=\"style.left\"\n        [style.width]=\"style.width\"\n      >\n        {{ noOptionsMessage() }}\n      </div>\n    } @else {\n      <ul\n        [id]=\"id() + '-listbox'\"\n        class=\"gbt-select__panel\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || placeholder()\"\n        [attr.aria-multiselectable]=\"multiple()\"\n        [style.top]=\"style.top\"\n        [style.left]=\"style.left\"\n        [style.width]=\"style.width\"\n      >\n        @for (option of options(); track option.value; let i = $index) {\n          <li role=\"presentation\">\n            <button\n              [id]=\"id() + '-option-' + i\"\n              type=\"button\"\n              role=\"option\"\n              tabindex=\"-1\"\n              class=\"gbt-select__option\"\n              [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n              [class.gbt-select__option--active]=\"i === activeIndex()\"\n              [attr.aria-selected]=\"isSelected(option.value)\"\n              (click)=\"selectOption(option.value)\"\n              (mouseenter)=\"activeIndex.set(i)\"\n            >\n              @if (option.icon) {\n                <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n              }\n              <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n              @if (isSelected(option.value)) {\n                <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n              }\n            </button>\n          </li>\n        }\n      </ul>\n    }\n  }\n  @if (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-select__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+		styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host(.gbt-select--full){display:block;width:100%}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:var(--gbt-control-height-md);padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:var(--gbt-control-height-sm);padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__empty{box-sizing:border-box;padding:10px 12px;color:var(--text-secondary);font-size:13px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:var(--gbt-radius-menu, 4px);color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__chips{display:flex;flex-wrap:wrap;gap:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gbt-select__hint{margin:0;font-size:.75rem;color:var(--text-secondary)}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}, {
+			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: Select,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-select",
+			standalone: true,
+			imports: [Icon, Tag],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(document:click)": "handleClickOutside($event)",
+				"(keydown)": "onKeydown($event)",
+				"(window:resize)": "updatePanelPosition()",
+				"[class.gbt-select--sm]": "size() === 'sm'",
+				"[class.gbt-select--full]": "fullWidth()"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => Select),
+				multi: true
+			}],
+			template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label\n      [id]=\"labelId()\"\n      [for]=\"id()\"\n      class=\"gbt-select__label\"\n      [class.gbt-select__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-label]=\"label() ? null : placeholder() || null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (chipsVisible()) {\n    <div class=\"gbt-select__chips\" [id]=\"chipsId()\">\n      @for (option of selectedOptions(); track option.value; let i = $index) {\n        <gbt-tag\n          [color]=\"option.color ?? '#6b7280'\"\n          [removable]=\"!isDisabled()\"\n          [disabled]=\"isDisabled()\"\n          [removeLabel]=\"chipRemoveLabel()(option.label)\"\n          (removed)=\"removeChip(option.value, i)\"\n        >\n          {{ option.label }}\n        </gbt-tag>\n      }\n    </div>\n  }\n  @if (chips() && multiple()) {\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n      {{ selectedCountLabel()(selectedOptions().length) }}\n    </div>\n  }\n  @if (open() && panelStyle(); as style) {\n    @if (hasNoOptions()) {\n      <div\n        [id]=\"id() + '-listbox'\"\n        class=\"gbt-select__panel gbt-select__empty\"\n        role=\"status\"\n        [style.top]=\"style.top\"\n        [style.left]=\"style.left\"\n        [style.width]=\"style.width\"\n      >\n        {{ noOptionsMessage() }}\n      </div>\n    } @else {\n      <ul\n        [id]=\"id() + '-listbox'\"\n        class=\"gbt-select__panel\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || placeholder()\"\n        [attr.aria-multiselectable]=\"multiple()\"\n        [style.top]=\"style.top\"\n        [style.left]=\"style.left\"\n        [style.width]=\"style.width\"\n      >\n        @for (option of options(); track option.value; let i = $index) {\n          <li role=\"presentation\">\n            <button\n              [id]=\"id() + '-option-' + i\"\n              type=\"button\"\n              role=\"option\"\n              tabindex=\"-1\"\n              class=\"gbt-select__option\"\n              [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n              [class.gbt-select__option--active]=\"i === activeIndex()\"\n              [attr.aria-selected]=\"isSelected(option.value)\"\n              (click)=\"selectOption(option.value)\"\n              (mouseenter)=\"activeIndex.set(i)\"\n            >\n              @if (option.icon) {\n                <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n              }\n              <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n              @if (isSelected(option.value)) {\n                <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n              }\n            </button>\n          </li>\n        }\n      </ul>\n    }\n  }\n  @if (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-select__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+			styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host(.gbt-select--full){display:block;width:100%}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:var(--gbt-control-height-md);padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:var(--gbt-control-height-sm);padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__empty{box-sizing:border-box;padding:10px 12px;color:var(--text-secondary);font-size:13px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:var(--gbt-radius-menu, 4px);color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__chips{display:flex;flex-wrap:wrap;gap:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gbt-select__hint{margin:0;font-size:.75rem;color:var(--text-secondary)}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		hideLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideLabel",
+				required: false
+			}]
+		}],
+		fullWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullWidth",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		chips: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chips",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		selectedCountLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedCountLabel",
+				required: false
+			}]
+		}],
+		chipRemoveLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chipRemoveLabel",
+				required: false
+			}]
+		}],
+		noOptionsMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noOptionsMessage",
+				required: false
+			}]
+		}]
+	}
+});
+export { Select };
+
+//# sourceMappingURL=masmarino-gabarit-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-select.mjs","names":[],"sources":["../../../projects/gabarit/select/select.ts","../../../projects/gabarit/select/select.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  signal,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { Tag } from '@masmarino/gabarit/tag'\nimport { floatingPanelAnchor, followPageScroll } from '@masmarino/gabarit/floating-panel'\n\nexport interface SelectOption<T = string> {\n  value: T\n  label: string\n  icon?: string\n  color?: string\n}\n\nlet nextSelectId = 0\n\n@Component({\n  selector: 'gbt-select',\n  standalone: true,\n  imports: [Icon, Tag],\n  templateUrl: './select.html',\n  styleUrl: './select.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(document:click)': 'handleClickOutside($event)',\n    '(keydown)': 'onKeydown($event)',\n    '(window:resize)': 'updatePanelPosition()',\n    '[class.gbt-select--sm]': \"size() === 'sm'\",\n    '[class.gbt-select--full]': 'fullWidth()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => Select),\n      multi: true,\n    },\n  ],\n})\nexport class Select<T = string> implements ControlValueAccessor {\n  private readonly elementRef = inject(ElementRef)\n\n  id = input<string>(`gbt-select-${++nextSelectId}`)\n  label = input<string>('')\n  size = input<'md' | 'sm'>('md')\n  hint = input<string>('')\n  hideLabel = input(false, { transform: booleanAttribute })\n  fullWidth = input(false, { transform: booleanAttribute })\n  options = input.required<SelectOption<T>[]>()\n  multiple = input(false, { transform: booleanAttribute })\n  chips = input(false, { transform: booleanAttribute })\n  placeholder = input<string>('Select…')\n  disabled = input(false, { transform: booleanAttribute })\n  required = input(false, { transform: booleanAttribute })\n  errorMessage = input<string | null>(null)\n  selectedCountLabel = input<(count: number) => string>((count) => `${count} selected`)\n  chipRemoveLabel = input<(label: string) => string>((label) => `Remove ${label}`)\n  noOptionsMessage = input<string>('No options')\n\n  protected readonly open = signal(false)\n  protected readonly activeIndex = signal(-1)\n  protected readonly selected = signal<T[]>([])\n  protected readonly panelStyle = signal<{ top: string; left: string; width: string } | null>(null)\n  private readonly formDisabled = signal(false)\n\n  protected readonly labelId = computed(() => `${this.id()}-label`)\n  protected readonly chipsId = computed(() => `${this.id()}-chips`)\n  protected readonly hintId = computed(() => `${this.id()}-hint`)\n  protected readonly showHint = computed(() => !!this.hint() && !this.errorMessage())\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  private onChange: (value: T | T[] | null) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled)\n  }\n\n  writeValue(value: T | T[] | null): void {\n    if (this.multiple()) {\n      this.selected.set(Array.isArray(value) ? (value as T[]) : [])\n    } else {\n      this.selected.set(value === null || value === undefined ? [] : [value as T])\n    }\n  }\n\n  registerOnChange(fn: (value: T | T[] | null) => void): void {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn\n  }\n\n  protected readonly selectedOptions = computed(() => {\n    const selected = this.selected()\n    return this.options().filter((option) => selected.includes(option.value))\n  })\n\n  protected readonly triggerLabel = computed(() => {\n    const opts = this.selectedOptions()\n    if (opts.length === 0) {\n      return this.placeholder()\n    }\n    if (this.chips() && this.multiple()) {\n      return this.placeholder()\n    }\n    if (this.multiple() && opts.length > 1) {\n      return this.selectedCountLabel()(opts.length)\n    }\n    return opts[0].label\n  })\n\n  protected readonly chipsVisible = computed(\n    () => this.chips() && this.multiple() && this.selectedOptions().length > 0,\n  )\n\n  protected readonly describedBy = computed(() => {\n    const ids: string[] = []\n    if (this.chipsVisible()) {\n      ids.push(this.chipsId())\n    }\n    if (this.errorMessage()) {\n      ids.push(`${this.id()}-error`)\n    } else if (this.showHint()) {\n      ids.push(this.hintId())\n    }\n    return ids.length > 0 ? ids.join(' ') : null\n  })\n\n  protected readonly triggerIcon = computed(() => {\n    const opts = this.selectedOptions()\n    return opts.length === 1 ? opts[0].icon : undefined\n  })\n\n  protected readonly activeOptionId = computed(() =>\n    this.open() && this.activeIndex() >= 0 ? `${this.id()}-option-${this.activeIndex()}` : null,\n  )\n\n  protected readonly hasNoOptions = computed(() => this.options().length === 0)\n\n  protected isSelected(value: T): boolean {\n    return this.selected().includes(value)\n  }\n\n  protected toggleOpen(): void {\n    if (this.isDisabled()) {\n      return\n    }\n    this.open.update((value) => !value)\n    if (this.open()) {\n      const options = this.options()\n      this.activeIndex.set(\n        options.length === 0\n          ? -1\n          : Math.max(\n              0,\n              options.findIndex((o) => this.isSelected(o.value)),\n            ),\n      )\n      this.updatePanelPosition()\n    } else {\n      this.onTouched()\n    }\n  }\n\n  constructor() {\n    followPageScroll(() => this.updatePanelPosition())\n  }\n\n  protected updatePanelPosition(): void {\n    const trigger = this.elementRef.nativeElement.querySelector(\n      '.gbt-select__trigger',\n    ) as HTMLElement | null\n    const anchor = floatingPanelAnchor(this.open(), trigger, (rect) => {\n      const chipRow = this.elementRef.nativeElement.querySelector(\n        '.gbt-select__chips',\n      ) as HTMLElement | null\n      return chipRow ? Math.max(rect.bottom, chipRow.getBoundingClientRect().bottom) : rect.bottom\n    })\n    if (anchor) {\n      this.panelStyle.set({\n        top: `${anchor.bottom}px`,\n        left: `${anchor.left}px`,\n        width: `${anchor.rect.width}px`,\n      })\n    }\n  }\n\n  protected removeChip(value: T, index: number): void {\n    if (this.isDisabled()) {\n      return\n    }\n    const host = this.elementRef.nativeElement as HTMLElement\n    const removeButtons = Array.from(\n      host.querySelectorAll<HTMLElement>('.gbt-select__chips .gbt-tag__remove'),\n    )\n    const nextFocus =\n      removeButtons[index + 1] ??\n      removeButtons[index - 1] ??\n      host.querySelector<HTMLElement>('.gbt-select__trigger')\n    this.selectOption(value)\n    nextFocus?.focus()\n  }\n\n  protected selectOption(value: T): void {\n    if (this.multiple()) {\n      const current = this.selected()\n      const next = current.includes(value)\n        ? current.filter((v) => v !== value)\n        : [...current, value]\n      this.selected.set(next)\n      this.onChange(next)\n      this.onTouched()\n    } else {\n      this.selected.set([value])\n      this.onChange(value)\n      this.open.set(false)\n      this.onTouched()\n    }\n  }\n\n  protected handleClickOutside(event: MouseEvent): void {\n    if (this.open() && !this.elementRef.nativeElement.contains(event.target)) {\n      this.open.set(false)\n      this.onTouched()\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (this.isDisabled()) {\n      return\n    }\n    if (!this.open()) {\n      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault()\n        this.toggleOpen()\n      }\n      return\n    }\n    const options = this.options()\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault()\n        event.stopPropagation()\n        this.open.set(false)\n        this.onTouched()\n        break\n      case 'ArrowDown':\n        event.preventDefault()\n        if (options.length > 0) {\n          this.activeIndex.update((i) => Math.min(i + 1, options.length - 1))\n        }\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        if (options.length > 0) {\n          this.activeIndex.update((i) => Math.max(i - 1, 0))\n        }\n        break\n      case 'Enter':\n      case ' ': {\n        event.preventDefault()\n        const active = options[this.activeIndex()]\n        if (active) {\n          this.selectOption(active.value)\n        }\n        break\n      }\n    }\n  }\n}\n","<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label\n      [id]=\"labelId()\"\n      [for]=\"id()\"\n      class=\"gbt-select__label\"\n      [class.gbt-select__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-label]=\"label() ? null : placeholder() || null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (chipsVisible()) {\n    <div class=\"gbt-select__chips\" [id]=\"chipsId()\">\n      @for (option of selectedOptions(); track option.value; let i = $index) {\n        <gbt-tag\n          [color]=\"option.color ?? '#6b7280'\"\n          [removable]=\"!isDisabled()\"\n          [disabled]=\"isDisabled()\"\n          [removeLabel]=\"chipRemoveLabel()(option.label)\"\n          (removed)=\"removeChip(option.value, i)\"\n        >\n          {{ option.label }}\n        </gbt-tag>\n      }\n    </div>\n  }\n  @if (chips() && multiple()) {\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n      {{ selectedCountLabel()(selectedOptions().length) }}\n    </div>\n  }\n  @if (open() && panelStyle(); as style) {\n    @if (hasNoOptions()) {\n      <div\n        [id]=\"id() + '-listbox'\"\n        class=\"gbt-select__panel gbt-select__empty\"\n        role=\"status\"\n        [style.top]=\"style.top\"\n        [style.left]=\"style.left\"\n        [style.width]=\"style.width\"\n      >\n        {{ noOptionsMessage() }}\n      </div>\n    } @else {\n      <ul\n        [id]=\"id() + '-listbox'\"\n        class=\"gbt-select__panel\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || placeholder()\"\n        [attr.aria-multiselectable]=\"multiple()\"\n        [style.top]=\"style.top\"\n        [style.left]=\"style.left\"\n        [style.width]=\"style.width\"\n      >\n        @for (option of options(); track option.value; let i = $index) {\n          <li role=\"presentation\">\n            <button\n              [id]=\"id() + '-option-' + i\"\n              type=\"button\"\n              role=\"option\"\n              tabindex=\"-1\"\n              class=\"gbt-select__option\"\n              [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n              [class.gbt-select__option--active]=\"i === activeIndex()\"\n              [attr.aria-selected]=\"isSelected(option.value)\"\n              (click)=\"selectOption(option.value)\"\n              (mouseenter)=\"activeIndex.set(i)\"\n            >\n              @if (option.icon) {\n                <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n              }\n              <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n              @if (isSelected(option.value)) {\n                <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n              }\n            </button>\n          </li>\n        }\n      </ul>\n    }\n  }\n  @if (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-select__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n"],"mappings":"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"}