@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs

@@ -0,0 +1,688 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, HostListener, afterRenderEffect, computed, forwardRef, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i1 from "@angular/cdk/overlay";
+import { OverlayModule } from "@angular/cdk/overlay";
+import { Subject, catchError, debounce, defer, of, switchMap, timer } from "rxjs";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { SpinnerComponent } from "@lifecorner/angular-ui-kit/spinner";
+import { ChipComponent } from "@lifecorner/angular-ui-kit/chip";
+var ComboboxComponent = class ComboboxComponent {
+	static nextId = 0;
+	inputId = `lc-combobox-${++ComboboxComponent.nextId}`;
+	listboxId = `${this.inputId}-listbox`;
+	createOptionId = `${this.listboxId}-create`;
+	inputEl = viewChild("inputEl", ...ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []);
+	dropdownEl = viewChild("dropdownEl", ...ngDevMode ? [{ debugName: "dropdownEl" }] : /* istanbul ignore next */ []);
+	elRef = inject(ElementRef);
+	querySubject = new Subject();
+	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	loadOptions = input(...ngDevMode ? [void 0, { debugName: "loadOptions" }] : /* istanbul ignore next */ []);
+	debounceMs = input(250, ...ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []);
+	minChars = input(1, ...ngDevMode ? [{ debugName: "minChars" }] : /* istanbul ignore next */ []);
+	placeholder = input("Search…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	helperText = input(...ngDevMode ? [void 0, { debugName: "helperText" }] : /* istanbul ignore next */ []);
+	error = input(...ngDevMode ? [void 0, { debugName: "error" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	multiple = input(false, ...ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []);
+	allowCreate = input(false, ...ngDevMode ? [{ debugName: "allowCreate" }] : /* istanbul ignore next */ []);
+	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	emptyMessage = input("No results", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	clearAriaLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
+	createOptionLabel = input("Create", ...ngDevMode ? [{ debugName: "createOptionLabel" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	queryChange = output();
+	optionSelected = output();
+	created = output();
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	highlightedIndex = signal(-1, ...ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []);
+	asyncOptions = signal([], ...ngDevMode ? [{ debugName: "asyncOptions" }] : /* istanbul ignore next */ []);
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	selectedSingle = signal(null, ...ngDevMode ? [{ debugName: "selectedSingle" }] : /* istanbul ignore next */ []);
+	selectedMultiple = signal([], ...ngDevMode ? [{ debugName: "selectedMultiple" }] : /* istanbul ignore next */ []);
+	visibleOptions = computed(() => {
+		const q = this.query().toLowerCase();
+		const loader = this.loadOptions();
+		let opts;
+		if (loader) opts = this.asyncOptions();
+		else {
+			opts = this.options();
+			if (q.length >= this.minChars()) opts = opts.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q) || o.description && o.description.toLowerCase().includes(q));
+		}
+		if (this.multiple()) {
+			const selected = new Set(this.selectedMultiple().map((s) => s.value));
+			opts = opts.filter((o) => !selected.has(o.value));
+		}
+		return opts;
+	}, ...ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []);
+	groupedOptions = computed(() => {
+		const opts = this.visibleOptions();
+		const groups = /* @__PURE__ */ new Map();
+		for (const opt of opts) {
+			const group = opt.group || "";
+			if (!groups.has(group)) groups.set(group, []);
+			groups.get(group).push(opt);
+		}
+		return Array.from(groups.entries()).map(([label, items]) => ({
+			label,
+			items
+		}));
+	}, ...ngDevMode ? [{ debugName: "groupedOptions" }] : /* istanbul ignore next */ []);
+	flatOptions = computed(() => {
+		return this.groupedOptions().flatMap((g) => g.items);
+	}, ...ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []);
+	showCreateOption = computed(() => {
+		if (!this.allowCreate()) return false;
+		const q = this.query().trim();
+		if (!q) return false;
+		return !this.visibleOptions().some((o) => o.label.toLowerCase() === q.toLowerCase());
+	}, ...ngDevMode ? [{ debugName: "showCreateOption" }] : /* istanbul ignore next */ []);
+	activeDescendantId = computed(() => {
+		if (!this.isOpen()) return null;
+		const i = this.highlightedIndex();
+		if (i < 0) return null;
+		if (i === this.flatOptions().length) return this.showCreateOption() ? this.createOptionId : null;
+		return i < this.flatOptions().length ? this.optionId(i) : null;
+	}, ...ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		if (this.error()) return `${this.inputId}-error`;
+		if (this.helperText()) return `${this.inputId}-helper`;
+		return null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	containerClasses = computed(() => {
+		const classes = [`lc-combobox`, `lc-combobox--${this.size()}`];
+		if (this.isDisabled()) classes.push("lc-combobox--disabled");
+		if (this.error()) classes.push("lc-combobox--error");
+		if (this.isOpen()) classes.push("lc-combobox--open");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []);
+	optionId(index) {
+		return `${this.listboxId}-opt-${index}`;
+	}
+	onChange = () => {};
+	onTouched = () => {};
+	constructor() {
+		this.querySubject.pipe(debounce(() => timer(this.debounceMs())), switchMap((q) => {
+			const loader = this.loadOptions();
+			if (!loader || q.length < this.minChars()) return of([]);
+			this.isLoading.set(true);
+			return defer(() => loader(q)).pipe(catchError(() => of([])));
+		}), takeUntilDestroyed()).subscribe((results) => {
+			this.asyncOptions.set(results);
+			this.isLoading.set(false);
+		});
+		afterRenderEffect(() => {
+			const id = this.activeDescendantId();
+			if (!id) return;
+			untracked(() => {
+				this.dropdownEl()?.nativeElement.querySelector(`#${id}`)?.scrollIntoView?.({ block: "nearest" });
+			});
+		});
+	}
+	writeValue(value) {
+		if (this.multiple()) this.selectedMultiple.set(Array.isArray(value) ? value : []);
+		else {
+			const single = value && !Array.isArray(value) ? value : null;
+			this.selectedSingle.set(single);
+			this.query.set(single ? single.label : "");
+		}
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+		if (isDisabled) this.isOpen.set(false);
+	}
+	clear() {
+		this.query.set("");
+		this.highlightedIndex.set(-1);
+		this.isOpen.set(false);
+		const value = this.multiple() ? [] : null;
+		if (this.multiple()) this.selectedMultiple.set([]);
+		else this.selectedSingle.set(null);
+		this.onChange(value);
+		this.valueChange.emit(value);
+	}
+	onClearClick() {
+		if (this.isDisabled()) return;
+		this.clear();
+		this.inputEl()?.nativeElement.focus();
+	}
+	onInputChange(event) {
+		const value = event.target.value;
+		this.query.set(value);
+		this.queryChange.emit(value);
+		this.highlightedIndex.set(-1);
+		if (this.loadOptions()) this.querySubject.next(value);
+		if (value.length >= this.minChars()) this.isOpen.set(true);
+	}
+	onInputFocus() {
+		if (this.query().length >= this.minChars() || this.options().length > 0) this.isOpen.set(true);
+	}
+	onInputBlur() {
+		this.onTouched();
+		setTimeout(() => this.isOpen.set(false), 200);
+	}
+	onKeydown(event) {
+		const flat = this.flatOptions();
+		const total = flat.length + (this.showCreateOption() ? 1 : 0);
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.isOpen.set(true);
+				if (total > 0) this.highlightedIndex.update((i) => (i + 1) % total);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				if (total > 0) this.highlightedIndex.update((i) => (i - 1 + total) % total);
+				break;
+			case "Enter":
+				event.preventDefault();
+				if (this.highlightedIndex() >= 0) {
+					if (this.highlightedIndex() === flat.length && this.showCreateOption()) this.onCreateNew();
+					else {
+						const opt = flat[this.highlightedIndex()];
+						if (opt && !opt.disabled) this.selectOption(opt);
+					}
+				} else if (this.showCreateOption()) this.onCreateNew();
+				break;
+			case "Escape":
+				if (this.isOpen()) {
+					this.isOpen.set(false);
+					this.highlightedIndex.set(-1);
+					event.stopPropagation();
+				}
+				break;
+			case "Tab":
+				if (this.highlightedIndex() >= 0 && this.isOpen()) {
+					const opt = flat[this.highlightedIndex()];
+					if (opt && !opt.disabled) this.selectOption(opt);
+				}
+				this.isOpen.set(false);
+				break;
+			case "Backspace": if (this.multiple() && !this.query() && this.selectedMultiple().length > 0) this.removeSelected(this.selectedMultiple()[this.selectedMultiple().length - 1]);
+		}
+	}
+	selectOption(option) {
+		if (this.multiple()) {
+			this.selectedMultiple.update((sel) => [...sel, option]);
+			this.query.set("");
+			const value = this.selectedMultiple();
+			this.onChange(value);
+			this.valueChange.emit(value);
+		} else {
+			this.selectedSingle.set(option);
+			this.query.set(option.label);
+			this.onChange(option);
+			this.valueChange.emit(option);
+		}
+		this.optionSelected.emit(option);
+		this.isOpen.set(false);
+		this.highlightedIndex.set(-1);
+	}
+	removeSelected(option) {
+		if (this.isDisabled()) return;
+		this.selectedMultiple.update((sel) => sel.filter((s) => s.value !== option.value));
+		const value = this.selectedMultiple();
+		this.onChange(value);
+		this.valueChange.emit(value);
+		this.inputEl()?.nativeElement.focus();
+	}
+	onCreateNew() {
+		const q = this.query().trim();
+		if (!q) return;
+		const newOption = {
+			value: q,
+			label: q
+		};
+		this.created.emit(q);
+		this.selectOption(newOption);
+	}
+	onDocumentClick(event) {
+		const target = event.target;
+		if (!this.elRef.nativeElement.contains(target) && !this.dropdownEl()?.nativeElement.contains(target)) this.isOpen.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ComboboxComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ComboboxComponent,
+		isStandalone: true,
+		selector: "lc-combobox",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadOptions: {
+				classPropertyName: "loadOptions",
+				publicName: "loadOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			debounceMs: {
+				classPropertyName: "debounceMs",
+				publicName: "debounceMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minChars: {
+				classPropertyName: "minChars",
+				publicName: "minChars",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			helperText: {
+				classPropertyName: "helperText",
+				publicName: "helperText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allowCreate: {
+				classPropertyName: "allowCreate",
+				publicName: "allowCreate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearAriaLabel: {
+				classPropertyName: "clearAriaLabel",
+				publicName: "clearAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			createOptionLabel: {
+				classPropertyName: "createOptionLabel",
+				publicName: "createOptionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			valueChange: "valueChange",
+			queryChange: "queryChange",
+			optionSelected: "optionSelected",
+			created: "created"
+		},
+		host: { listeners: { "document:click": "onDocumentClick($event)" } },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => ComboboxComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "inputEl",
+			first: true,
+			predicate: ["inputEl"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "dropdownEl",
+			first: true,
+			predicate: ["dropdownEl"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"lc-combobox__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n\n  <div #inputWrapper class=\"lc-combobox__input-wrapper\">\n    <!-- Selected chips (multiple mode) -->\n    @if (multiple()) {\n      @for (sel of selectedMultiple(); track sel.value) {\n        <lc-chip\n          [removable]=\"!isDisabled()\"\n          size=\"sm\"\n          (remove)=\"removeSelected(sel)\"\n        >{{ sel.label }}</lc-chip>\n      }\n    }\n\n    <input\n      #inputEl\n      type=\"text\"\n      class=\"lc-combobox__input\"\n      [id]=\"inputId\"\n      [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n      [value]=\"query()\"\n      [disabled]=\"isDisabled()\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    @if (isLoading() || loading()) {\n      <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n    } @else if (!multiple() && selectedSingle()) {\n      <button\n        type=\"button\"\n        class=\"lc-combobox__clear\"\n        [disabled]=\"isDisabled()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"onClearClick()\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n      >\n        <lc-icon name=\"x-mark\" size=\"xs\" />\n      </button>\n    }\n  </div>\n\n  <!-- Dropdown: rendered in the CDK overlay container so overflow-hidden\n       ancestors cannot clip it. Focus stays in the input (mousedown is\n       prevented on the panel), keyboard nav uses aria-activedescendant. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"inputWrapper\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayMatchWidth]=\"true\"\n    (detach)=\"isOpen.set(false)\"\n  >\n    <div\n      #dropdownEl\n      class=\"lc-combobox__dropdown\"\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      @for (group of groupedOptions(); track group.label) {\n        @if (group.label) {\n          <div class=\"lc-combobox__group-header\" role=\"presentation\">{{ group.label }}</div>\n        }\n        @for (option of group.items; track option.value) {\n          @let idx = flatOptions().indexOf(option);\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n          <div\n            class=\"lc-combobox__option\"\n            [class.lc-combobox__option--highlighted]=\"idx === highlightedIndex()\"\n            [class.lc-combobox__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [id]=\"optionId(idx)\"\n            [attr.aria-selected]=\"idx === highlightedIndex()\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"!option.disabled && selectOption(option)\"\n            (mouseenter)=\"highlightedIndex.set(idx)\"\n          >\n            @if (option.icon) {\n              <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" />\n            }\n            <div class=\"lc-combobox__option-content\">\n              <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n              @if (option.description) {\n                <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n              }\n            </div>\n          </div>\n        }\n      }\n\n      @if (showCreateOption()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n        <div\n          class=\"lc-combobox__option lc-combobox__option--create\"\n          [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n          role=\"option\"\n          [id]=\"createOptionId\"\n          [attr.aria-selected]=\"highlightedIndex() === flatOptions().length\"\n          (click)=\"onCreateNew()\"\n          (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n        >\n          <lc-icon name=\"plus\" size=\"sm\" />\n          <span>{{ createOptionLabel() }} \"{{ query() }}\"</span>\n        </div>\n      }\n\n      @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n        <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n      }\n    </div>\n  </ng-template>\n\n  @if (helperText() && !error()) {\n    <span class=\"lc-combobox__helper\" [id]=\"inputId + '-helper'\">{{ helperText() }}</span>\n  }\n  @if (error()) {\n    <span class=\"lc-combobox__error\" [id]=\"inputId + '-error'\" role=\"alert\">{{ error() }}</span>\n  }\n</div>\n",
+		styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-surface-2);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:hover{border-color:var(--color-text-secondary)}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error-default) 20%,transparent)}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.6;cursor:not-allowed;background-color:var(--color-surface-muted)}.lc-combobox--disabled .lc-combobox__input-wrapper:hover{border-color:var(--color-border)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-text-tertiary)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;color:var(--color-text-tertiary);border-radius:var(--border-radius-sm, .25rem);flex-shrink:0}.lc-combobox__clear:hover:not(:disabled){color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-combobox__clear:disabled{cursor:not-allowed}.lc-combobox__dropdown{margin-top:.25rem;max-height:240px;overflow-y:auto;background-color:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md, .375rem);box-shadow:var(--elevation-3)}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-surface-hover)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600);font-weight:500;border-top:1px solid var(--color-divider)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-text-error)}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: OverlayModule
+			},
+			{
+				kind: "directive",
+				type: i1.CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			},
+			{
+				kind: "component",
+				type: SpinnerComponent,
+				selector: "lc-spinner",
+				inputs: [
+					"size",
+					"message",
+					"loadingLabel"
+				]
+			},
+			{
+				kind: "component",
+				type: ChipComponent,
+				selector: "lc-chip",
+				inputs: [
+					"variant",
+					"size",
+					"icon",
+					"removable",
+					"removeAriaLabel",
+					"clickable",
+					"disabled"
+				],
+				outputs: ["remove", "chipClick"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ComboboxComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-combobox",
+			standalone: true,
+			imports: [
+				OverlayModule,
+				IconComponent,
+				SpinnerComponent,
+				ChipComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => ComboboxComponent),
+				multi: true
+			}],
+			template: "<div [class]=\"containerClasses()\">\n  @if (label()) {\n    <label class=\"lc-combobox__label\" [for]=\"inputId\">{{ label() }}</label>\n  }\n\n  <div #inputWrapper class=\"lc-combobox__input-wrapper\">\n    <!-- Selected chips (multiple mode) -->\n    @if (multiple()) {\n      @for (sel of selectedMultiple(); track sel.value) {\n        <lc-chip\n          [removable]=\"!isDisabled()\"\n          size=\"sm\"\n          (remove)=\"removeSelected(sel)\"\n        >{{ sel.label }}</lc-chip>\n      }\n    }\n\n    <input\n      #inputEl\n      type=\"text\"\n      class=\"lc-combobox__input\"\n      [id]=\"inputId\"\n      [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n      [value]=\"query()\"\n      [disabled]=\"isDisabled()\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [attr.aria-invalid]=\"error() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    @if (isLoading() || loading()) {\n      <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n    } @else if (!multiple() && selectedSingle()) {\n      <button\n        type=\"button\"\n        class=\"lc-combobox__clear\"\n        [disabled]=\"isDisabled()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"onClearClick()\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n      >\n        <lc-icon name=\"x-mark\" size=\"xs\" />\n      </button>\n    }\n  </div>\n\n  <!-- Dropdown: rendered in the CDK overlay container so overflow-hidden\n       ancestors cannot clip it. Focus stays in the input (mousedown is\n       prevented on the panel), keyboard nav uses aria-activedescendant. -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"inputWrapper\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayMatchWidth]=\"true\"\n    (detach)=\"isOpen.set(false)\"\n  >\n    <div\n      #dropdownEl\n      class=\"lc-combobox__dropdown\"\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      @for (group of groupedOptions(); track group.label) {\n        @if (group.label) {\n          <div class=\"lc-combobox__group-header\" role=\"presentation\">{{ group.label }}</div>\n        }\n        @for (option of group.items; track option.value) {\n          @let idx = flatOptions().indexOf(option);\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n          <div\n            class=\"lc-combobox__option\"\n            [class.lc-combobox__option--highlighted]=\"idx === highlightedIndex()\"\n            [class.lc-combobox__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [id]=\"optionId(idx)\"\n            [attr.aria-selected]=\"idx === highlightedIndex()\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"!option.disabled && selectOption(option)\"\n            (mouseenter)=\"highlightedIndex.set(idx)\"\n          >\n            @if (option.icon) {\n              <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" />\n            }\n            <div class=\"lc-combobox__option-content\">\n              <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n              @if (option.description) {\n                <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n              }\n            </div>\n          </div>\n        }\n      }\n\n      @if (showCreateOption()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n        <div\n          class=\"lc-combobox__option lc-combobox__option--create\"\n          [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n          role=\"option\"\n          [id]=\"createOptionId\"\n          [attr.aria-selected]=\"highlightedIndex() === flatOptions().length\"\n          (click)=\"onCreateNew()\"\n          (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n        >\n          <lc-icon name=\"plus\" size=\"sm\" />\n          <span>{{ createOptionLabel() }} \"{{ query() }}\"</span>\n        </div>\n      }\n\n      @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n        <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n      }\n    </div>\n  </ng-template>\n\n  @if (helperText() && !error()) {\n    <span class=\"lc-combobox__helper\" [id]=\"inputId + '-helper'\">{{ helperText() }}</span>\n  }\n  @if (error()) {\n    <span class=\"lc-combobox__error\" [id]=\"inputId + '-error'\" role=\"alert\">{{ error() }}</span>\n  }\n</div>\n",
+			styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-surface-2);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:hover{border-color:var(--color-text-secondary)}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error-default) 20%,transparent)}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.6;cursor:not-allowed;background-color:var(--color-surface-muted)}.lc-combobox--disabled .lc-combobox__input-wrapper:hover{border-color:var(--color-border)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-text-tertiary)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;color:var(--color-text-tertiary);border-radius:var(--border-radius-sm, .25rem);flex-shrink:0}.lc-combobox__clear:hover:not(:disabled){color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-combobox__clear:disabled{cursor:not-allowed}.lc-combobox__dropdown{margin-top:.25rem;max-height:240px;overflow-y:auto;background-color:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md, .375rem);box-shadow:var(--elevation-3)}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-surface-hover)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600);font-weight:500;border-top:1px solid var(--color-divider)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-text-error)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		inputEl: [{
+			type: i0.ViewChild,
+			args: ["inputEl", { isSignal: true }]
+		}],
+		dropdownEl: [{
+			type: i0.ViewChild,
+			args: ["dropdownEl", { isSignal: true }]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		loadOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadOptions",
+				required: false
+			}]
+		}],
+		debounceMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "debounceMs",
+				required: false
+			}]
+		}],
+		minChars: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minChars",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		helperText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helperText",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		allowCreate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowCreate",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		clearAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearAriaLabel",
+				required: false
+			}]
+		}],
+		createOptionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "createOptionLabel",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		queryChange: [{
+			type: i0.Output,
+			args: ["queryChange"]
+		}],
+		optionSelected: [{
+			type: i0.Output,
+			args: ["optionSelected"]
+		}],
+		created: [{
+			type: i0.Output,
+			args: ["created"]
+		}],
+		onDocumentClick: [{
+			type: HostListener,
+			args: ["document:click", ["$event"]]
+		}]
+	}
+});
+export { ComboboxComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-combobox.mjs.map