@star-ng/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,786 @@
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, booleanAttribute, computed, effect, inject, input, linkedSignal, model, output, signal, untracked, viewChild } from "@angular/core";
+import { matchesFilter } from "@star-ng/ui/core";
+import { StarOptionListBase } from "@star-ng/ui/select";
+var StarAutoCompleteBase = class StarAutoCompleteBase extends StarOptionListBase {
+	suggestions = input(null, ...ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []);
+	minQueryLength = input(1, ...ngDevMode ? [{ debugName: "minQueryLength" }] : /* istanbul ignore next */ []);
+	delay = input(300, ...ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []);
+	dropdown = input(false, {
+		...ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autoHighlight = input(false, {
+		...ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showEmptyMessage = input(true, {
+		...ngDevMode ? { debugName: "showEmptyMessage" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	completeMethod = output();
+	closeOnChoose = true;
+	control = viewChild.required("control", ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	known = signal([], ...ngDevMode ? [{ debugName: "known" }] : /* istanbul ignore next */ []);
+	showAll = signal(false, ...ngDevMode ? [{ debugName: "showAll" }] : /* istanbul ignore next */ []);
+	searchTimer;
+	query = linkedSignal(() => this.queryFromValue(), ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	visibleOptions = computed(() => {
+		const remote = this.suggestions();
+		const query = this.query();
+		const candidates = remote ?? (this.showAll() || !query ? this.options() : this.options().filter((option) => matchesFilter(this.labelOf(option), query)));
+		return this.groupedOrder(this.isMultiple ? candidates.filter((option) => !this.isSelected(option)) : candidates);
+	}, ...ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []);
+	queryLongEnough = computed(() => this.showAll() || this.query().length >= this.minQueryLength(), ...ngDevMode ? [{ debugName: "queryLongEnough" }] : /* istanbul ignore next */ []);
+	panelVisible = computed(() => this.open() && this.queryLongEnough() && (this.visibleOptions().length > 0 || this.loading() || this.showEmptyMessage()), ...ngDevMode ? [{ debugName: "panelVisible" }] : /* istanbul ignore next */ []);
+	liveText = computed(() => {
+		if (!this.panelVisible()) return "";
+		if (this.loading()) return this.text.searching;
+		const count = this.visibleOptions().length;
+		return count ? this.text.resultsAvailable(count) : this.emptyText();
+	}, ...ngDevMode ? [{ debugName: "liveText" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.searchTimer));
+		effect(() => {
+			this.visibleOptions();
+			untracked(() => {
+				this.resetScroll();
+				this.activeIndex.set(this.autoHighlight() ? this.firstEnabledFrom(0, 1) : -1);
+			});
+		});
+	}
+	initialActiveIndex() {
+		return this.autoHighlight() ? this.firstEnabledFrom(0, 1) : -1;
+	}
+	optionForValue(value) {
+		const pools = [
+			this.known(),
+			this.suggestions() ?? [],
+			this.options()
+		];
+		for (const pool of pools) {
+			const match = pool.find((option) => this.equals(this.valueOf(option), value));
+			if (match !== void 0) return match;
+		}
+	}
+	labelForValue(value) {
+		const option = this.optionForValue(value);
+		if (option !== void 0) return this.labelOf(option);
+		return this.optionValue() === null ? this.labelOf(value) : String(value);
+	}
+	remember(option) {
+		this.known.update((known) => known.includes(option) ? known : [...known, option]);
+	}
+	onQuery(text) {
+		this.query.set(text);
+		this.showAll.set(false);
+		clearTimeout(this.searchTimer);
+		if (text.length < this.minQueryLength()) {
+			this.closePanel(false);
+			return;
+		}
+		this.openPanel();
+		this.searchTimer = setTimeout(() => this.completeMethod.emit({ query: text }), this.delay());
+	}
+	showAllOptions() {
+		if (!this.interactive()) return;
+		if (this.panelVisible()) {
+			this.closePanel();
+			return;
+		}
+		this.showAll.set(true);
+		this.completeMethod.emit({ query: "" });
+		this.openPanel();
+		this.focus();
+	}
+	onOutsideClick(event) {
+		if (this.control().nativeElement.contains(event.target)) return;
+		this.closePanel(false);
+		this.onBlurCommit();
+		this.touch.emit();
+	}
+	onInputBlur() {
+		if (this.panelVisible()) return;
+		this.onBlurCommit();
+		this.touch.emit();
+	}
+	onKeydown(event) {
+		if (event.key === "Home" || event.key === "End") return;
+		if (event.key === "Enter" && !this.panelVisible()) return;
+		if (event.key === "ArrowDown" && !this.open() && !this.queryLongEnough()) return;
+		super.onKeydown(event);
+	}
+	setText(text) {
+		this.query.set(text);
+		this.trigger().nativeElement.value = text;
+	}
+	highlight(label) {
+		const query = this.query().trim();
+		const index = query ? label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) : -1;
+		if (index < 0) return [
+			label,
+			"",
+			""
+		];
+		return [
+			label.slice(0, index),
+			label.slice(index, index + query.length),
+			label.slice(index + query.length)
+		];
+	}
+	chips() {
+		return [];
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarAutoCompleteBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.6",
+		type: StarAutoCompleteBase,
+		isStandalone: true,
+		inputs: {
+			suggestions: {
+				classPropertyName: "suggestions",
+				publicName: "suggestions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minQueryLength: {
+				classPropertyName: "minQueryLength",
+				publicName: "minQueryLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			delay: {
+				classPropertyName: "delay",
+				publicName: "delay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dropdown: {
+				classPropertyName: "dropdown",
+				publicName: "dropdown",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoHighlight: {
+				classPropertyName: "autoHighlight",
+				publicName: "autoHighlight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showEmptyMessage: {
+				classPropertyName: "showEmptyMessage",
+				publicName: "showEmptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { completeMethod: "completeMethod" },
+		viewQueries: [{
+			propertyName: "control",
+			first: true,
+			predicate: ["control"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarAutoCompleteBase,
+	decorators: [{ type: Directive }],
+	ctorParameters: () => [],
+	propDecorators: {
+		suggestions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suggestions",
+				required: false
+			}]
+		}],
+		minQueryLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minQueryLength",
+				required: false
+			}]
+		}],
+		delay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "delay",
+				required: false
+			}]
+		}],
+		dropdown: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dropdown",
+				required: false
+			}]
+		}],
+		autoHighlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoHighlight",
+				required: false
+			}]
+		}],
+		showEmptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showEmptyMessage",
+				required: false
+			}]
+		}],
+		completeMethod: [{
+			type: i0.Output,
+			args: ["completeMethod"]
+		}],
+		control: [{
+			type: i0.ViewChild,
+			args: ["control", { isSignal: true }]
+		}]
+	}
+});
+const TEMPLATE = `
+  <div #control class="star-select__control star-ac__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+    @if (isMultiple) {
+      @for (chip of chips(); track $index) {
+        <span class="star-chip star-chip--sm">
+          {{ chip.label }}
+          @if (interactive()) {
+            <button
+              type="button"
+              class="star-chip__remove"
+              tabindex="-1"
+              [attr.aria-label]="text.removeItem(chip.label)"
+              (click)="removeValue(chip.value)"
+            >
+              <i class="ph-bold ph-x" aria-hidden="true"></i>
+            </button>
+          }
+        </span>
+      }
+    }
+    <input
+      #trigger
+      type="text"
+      class="star-ac__input"
+      role="combobox"
+      aria-autocomplete="list"
+      autocomplete="off"
+      [id]="inputId()"
+      [attr.name]="name() || null"
+      [value]="query()"
+      [attr.placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [readOnly]="readonly()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledBy()"
+      [attr.aria-required]="required() || null"
+      [attr.aria-invalid]="showInvalid() || null"
+      [attr.aria-expanded]="panelVisible()"
+      [attr.aria-controls]="panelVisible() ? listId : null"
+      [attr.aria-activedescendant]="panelVisible() ? activeId() : null"
+      (input)="onQuery(trigger.value)"
+      (keydown)="onKeydown($event)"
+      (blur)="onInputBlur()"
+    />
+    @if (loading()) {
+      <i class="ph-bold ph-spinner-gap star-spin star-select__caret" aria-hidden="true"></i>
+    }
+    @if (showClear() && hasValue() && interactive()) {
+      <button type="button" class="star-select__icon-btn" [attr.aria-label]="text.clear" (click)="clear()">
+        <i class="ph-bold ph-x" aria-hidden="true"></i>
+      </button>
+    }
+    @if (dropdown()) {
+      <button
+        type="button"
+        class="star-select__icon-btn"
+        tabindex="-1"
+        [attr.aria-label]="text.showOptions"
+        [disabled]="!interactive()"
+        (click)="showAllOptions()"
+      >
+        <i class="ph-bold ph-caret-down" aria-hidden="true"></i>
+      </button>
+    }
+  </div>
+  <span class="star-sr-only" aria-live="polite">{{ liveText() }}</span>
+
+  <ng-template
+    cdkConnectedOverlay
+    cdkConnectedOverlayUsePopover="inline"
+    cdkConnectedOverlayMatchWidth
+    [cdkConnectedOverlayOrigin]="origin"
+    [cdkConnectedOverlayOpen]="panelVisible()"
+    [cdkConnectedOverlayPositions]="positions"
+    (attach)="onPanelAttached()"
+    (detach)="closePanel(false)"
+    (overlayOutsideClick)="onOutsideClick($event)"
+  >
+    <div class="star-panel" (mousedown)="onPanelMousedown($event)">
+      <ul
+        class="star-listbox"
+        role="listbox"
+        [id]="listId"
+        [class.star-listbox--virtual]="virtualScroll()"
+        [style.--star-item-size.px]="virtualScroll() ? virtualItemSize() : null"
+        [style.max-height]="scrollHeight()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        (scroll)="onListScroll($event)"
+      >
+        @if (virtualWindow().before) {
+          <li class="star-listbox__spacer" role="presentation" [style.height.px]="virtualWindow().before"></li>
+        }
+        @for (row of renderedRows(); track row.key) {
+          @if (row.kind === 'group') {
+            <li class="star-listbox__group" role="presentation" [id]="row.id">{{ row.label }}</li>
+          } @else {
+          @let option = row.option;
+          @let i = row.index;
+          <!-- Keyboard is handled on the combobox via aria-activedescendant (WAI-ARIA combobox pattern). -->
+          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+          <li
+            class="star-listbox__option"
+            role="option"
+            [id]="optionId(i)"
+            [class.star-listbox__option--active]="activeIndex() === i"
+            [attr.aria-selected]="activeIndex() === i"
+            [attr.aria-disabled]="isDisabled(option) || null"
+            [attr.aria-describedby]="describedBy(row)"
+            [attr.aria-setsize]="virtualScroll() ? visibleOptions().length : null"
+            [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
+            (click)="onOptionClick(option, i)"
+            (mousemove)="isDisabled(option) || activeIndex.set(i)"
+          >
+            <span class="star-listbox__label">
+              @if (optionTemplate(); as custom) {
+                <ng-container *ngTemplateOutlet="custom.template; context: optionContext(option, i)" />
+              } @else {
+                @let parts = highlight(labelOf(option));
+                {{ parts[0] }}<mark class="star-ac__match">{{ parts[1] }}</mark>{{ parts[2] }}
+              }
+            </span>
+          </li>
+          }
+        } @empty {
+          <li class="star-listbox__empty" role="presentation">
+            {{ loading() ? text.searching : emptyText() }}
+          </li>
+        }
+        @if (virtualWindow().after) {
+          <li class="star-listbox__spacer" role="presentation" [style.height.px]="virtualWindow().after"></li>
+        }
+      </ul>
+    </div>
+  </ng-template>
+`;
+const HOST = {
+	class: "star-select star-ac",
+	"[class.star-select--open]": "panelVisible()",
+	"[class.star-select--disabled]": "disabled()",
+	"[class.star-select--invalid]": "showInvalid()",
+	"[class.star-select--sm]": "size() === 'sm'"
+};
+var StarAutoComplete = class StarAutoComplete extends StarAutoCompleteBase {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	selected = output();
+	isMultiple = false;
+	hasValue = computed(() => this.value() !== null || !!this.query(), ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+	queryFromValue() {
+		const value = this.value();
+		return value === null ? "" : this.labelForValue(value);
+	}
+	isSelected(option) {
+		const value = this.value();
+		return value !== null && this.equals(this.valueOf(option), value);
+	}
+	choose(option) {
+		this.remember(option);
+		this.value.set(this.valueOf(option));
+		this.setText(this.labelOf(option));
+		this.selected.emit(option);
+	}
+	onBlurCommit() {
+		const text = this.query().trim();
+		if (!text) {
+			if (this.value() !== null) this.value.set(null);
+			return;
+		}
+		if (text === this.queryFromValue()) return;
+		const exact = this.visibleOptions().find((option) => !this.isDisabled(option) && this.labelOf(option).toLocaleLowerCase() === text.toLocaleLowerCase());
+		if (exact !== void 0) this.choose(exact);
+		else this.setText(this.queryFromValue());
+	}
+	removeValue(_value) {
+		this.clear();
+	}
+	clear() {
+		this.value.set(null);
+		this.setText("");
+		this.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarAutoComplete,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarAutoComplete,
+		isStandalone: true,
+		selector: "star-autocomplete",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: {
+			value: "valueChange",
+			selected: "selected"
+		},
+		host: {
+			properties: {
+				"class.star-select--open": "panelVisible()",
+				"class.star-select--disabled": "disabled()",
+				"class.star-select--invalid": "showInvalid()",
+				"class.star-select--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-select star-ac"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: "\n  <div #control class=\"star-select__control star-ac__control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    @if (isMultiple) {\n      @for (chip of chips(); track $index) {\n        <span class=\"star-chip star-chip--sm\">\n          {{ chip.label }}\n          @if (interactive()) {\n            <button\n              type=\"button\"\n              class=\"star-chip__remove\"\n              tabindex=\"-1\"\n              [attr.aria-label]=\"text.removeItem(chip.label)\"\n              (click)=\"removeValue(chip.value)\"\n            >\n              <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </span>\n      }\n    }\n    <input\n      #trigger\n      type=\"text\"\n      class=\"star-ac__input\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [id]=\"inputId()\"\n      [attr.name]=\"name() || null\"\n      [value]=\"query()\"\n      [attr.placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"showInvalid() || null\"\n      [attr.aria-expanded]=\"panelVisible()\"\n      [attr.aria-controls]=\"panelVisible() ? listId : null\"\n      [attr.aria-activedescendant]=\"panelVisible() ? activeId() : null\"\n      (input)=\"onQuery(trigger.value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onInputBlur()\"\n    />\n    @if (loading()) {\n      <i class=\"ph-bold ph-spinner-gap star-spin star-select__caret\" aria-hidden=\"true\"></i>\n    }\n    @if (showClear() && hasValue() && interactive()) {\n      <button type=\"button\" class=\"star-select__icon-btn\" [attr.aria-label]=\"text.clear\" (click)=\"clear()\">\n        <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    @if (dropdown()) {\n      <button\n        type=\"button\"\n        class=\"star-select__icon-btn\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"text.showOptions\"\n        [disabled]=\"!interactive()\"\n        (click)=\"showAllOptions()\"\n      >\n        <i class=\"ph-bold ph-caret-down\" aria-hidden=\"true\"></i>\n      </button>\n    }\n  </div>\n  <span class=\"star-sr-only\" aria-live=\"polite\">{{ liveText() }}</span>\n\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayUsePopover=\"inline\"\n    cdkConnectedOverlayMatchWidth\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelVisible()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (attach)=\"onPanelAttached()\"\n    (detach)=\"closePanel(false)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n  >\n    <div class=\"star-panel\" (mousedown)=\"onPanelMousedown($event)\">\n      <ul\n        class=\"star-listbox\"\n        role=\"listbox\"\n        [id]=\"listId\"\n        [class.star-listbox--virtual]=\"virtualScroll()\"\n        [style.--star-item-size.px]=\"virtualScroll() ? virtualItemSize() : null\"\n        [style.max-height]=\"scrollHeight()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        (scroll)=\"onListScroll($event)\"\n      >\n        @if (virtualWindow().before) {\n          <li class=\"star-listbox__spacer\" role=\"presentation\" [style.height.px]=\"virtualWindow().before\"></li>\n        }\n        @for (row of renderedRows(); track row.key) {\n          @if (row.kind === 'group') {\n            <li class=\"star-listbox__group\" role=\"presentation\" [id]=\"row.id\">{{ row.label }}</li>\n          } @else {\n          @let option = row.option;\n          @let i = row.index;\n          <!-- Keyboard is handled on the combobox via aria-activedescendant (WAI-ARIA combobox pattern). -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            class=\"star-listbox__option\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [class.star-listbox__option--active]=\"activeIndex() === i\"\n            [attr.aria-selected]=\"activeIndex() === i\"\n            [attr.aria-disabled]=\"isDisabled(option) || null\"\n            [attr.aria-describedby]=\"describedBy(row)\"\n            [attr.aria-setsize]=\"virtualScroll() ? visibleOptions().length : null\"\n            [attr.aria-posinset]=\"virtualScroll() ? i + 1 : null\"\n            (click)=\"onOptionClick(option, i)\"\n            (mousemove)=\"isDisabled(option) || activeIndex.set(i)\"\n          >\n            <span class=\"star-listbox__label\">\n              @if (optionTemplate(); as custom) {\n                <ng-container *ngTemplateOutlet=\"custom.template; context: optionContext(option, i)\" />\n              } @else {\n                @let parts = highlight(labelOf(option));\n                {{ parts[0] }}<mark class=\"star-ac__match\">{{ parts[1] }}</mark>{{ parts[2] }}\n              }\n            </span>\n          </li>\n          }\n        } @empty {\n          <li class=\"star-listbox__empty\" role=\"presentation\">\n            {{ loading() ? text.searching : emptyText() }}\n          </li>\n        }\n        @if (virtualWindow().after) {\n          <li class=\"star-listbox__spacer\" role=\"presentation\" [style.height.px]=\"virtualWindow().after\"></li>\n        }\n      </ul>\n    </div>\n  </ng-template>\n",
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: 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: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarAutoComplete,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-autocomplete",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: HOST,
+			template: TEMPLATE
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}]
+	}
+});
+var StarMultiAutoComplete = class StarMultiAutoComplete extends StarAutoCompleteBase {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	selectionLimit = input(0, ...ngDevMode ? [{ debugName: "selectionLimit" }] : /* istanbul ignore next */ []);
+	isMultiple = true;
+	hasValue = computed(() => this.value().length > 0, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+	queryFromValue() {
+		return "";
+	}
+	chips() {
+		return this.value().map((value) => ({
+			value,
+			label: this.labelForValue(value)
+		}));
+	}
+	isSelected(option) {
+		const optionValue = this.valueOf(option);
+		return this.value().some((value) => this.equals(value, optionValue));
+	}
+	choose(option) {
+		const limit = this.selectionLimit();
+		if (this.isSelected(option) || limit > 0 && this.value().length >= limit) return;
+		this.remember(option);
+		this.value.update((values) => [...values, this.valueOf(option)]);
+		this.setText("");
+	}
+	onBlurCommit() {
+		this.setText("");
+	}
+	onKeydown(event) {
+		if (event.key === "Backspace" && !this.query() && this.value().length && this.interactive()) {
+			this.value.update((values) => values.slice(0, -1));
+			return;
+		}
+		super.onKeydown(event);
+	}
+	removeValue(value) {
+		this.value.update((values) => values.filter((v) => !this.equals(v, value)));
+		this.focus();
+	}
+	clear() {
+		this.value.set([]);
+		this.setText("");
+		this.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMultiAutoComplete,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarMultiAutoComplete,
+		isStandalone: true,
+		selector: "star-multi-autocomplete",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionLimit: {
+				classPropertyName: "selectionLimit",
+				publicName: "selectionLimit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			properties: {
+				"class.star-select--open": "panelVisible()",
+				"class.star-select--disabled": "disabled()",
+				"class.star-select--invalid": "showInvalid()",
+				"class.star-select--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-select star-ac star-ac--multi"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: "\n  <div #control class=\"star-select__control star-ac__control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    @if (isMultiple) {\n      @for (chip of chips(); track $index) {\n        <span class=\"star-chip star-chip--sm\">\n          {{ chip.label }}\n          @if (interactive()) {\n            <button\n              type=\"button\"\n              class=\"star-chip__remove\"\n              tabindex=\"-1\"\n              [attr.aria-label]=\"text.removeItem(chip.label)\"\n              (click)=\"removeValue(chip.value)\"\n            >\n              <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </span>\n      }\n    }\n    <input\n      #trigger\n      type=\"text\"\n      class=\"star-ac__input\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      autocomplete=\"off\"\n      [id]=\"inputId()\"\n      [attr.name]=\"name() || null\"\n      [value]=\"query()\"\n      [attr.placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledBy()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"showInvalid() || null\"\n      [attr.aria-expanded]=\"panelVisible()\"\n      [attr.aria-controls]=\"panelVisible() ? listId : null\"\n      [attr.aria-activedescendant]=\"panelVisible() ? activeId() : null\"\n      (input)=\"onQuery(trigger.value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onInputBlur()\"\n    />\n    @if (loading()) {\n      <i class=\"ph-bold ph-spinner-gap star-spin star-select__caret\" aria-hidden=\"true\"></i>\n    }\n    @if (showClear() && hasValue() && interactive()) {\n      <button type=\"button\" class=\"star-select__icon-btn\" [attr.aria-label]=\"text.clear\" (click)=\"clear()\">\n        <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    @if (dropdown()) {\n      <button\n        type=\"button\"\n        class=\"star-select__icon-btn\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"text.showOptions\"\n        [disabled]=\"!interactive()\"\n        (click)=\"showAllOptions()\"\n      >\n        <i class=\"ph-bold ph-caret-down\" aria-hidden=\"true\"></i>\n      </button>\n    }\n  </div>\n  <span class=\"star-sr-only\" aria-live=\"polite\">{{ liveText() }}</span>\n\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayUsePopover=\"inline\"\n    cdkConnectedOverlayMatchWidth\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"panelVisible()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (attach)=\"onPanelAttached()\"\n    (detach)=\"closePanel(false)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n  >\n    <div class=\"star-panel\" (mousedown)=\"onPanelMousedown($event)\">\n      <ul\n        class=\"star-listbox\"\n        role=\"listbox\"\n        [id]=\"listId\"\n        [class.star-listbox--virtual]=\"virtualScroll()\"\n        [style.--star-item-size.px]=\"virtualScroll() ? virtualItemSize() : null\"\n        [style.max-height]=\"scrollHeight()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledBy()\"\n        (scroll)=\"onListScroll($event)\"\n      >\n        @if (virtualWindow().before) {\n          <li class=\"star-listbox__spacer\" role=\"presentation\" [style.height.px]=\"virtualWindow().before\"></li>\n        }\n        @for (row of renderedRows(); track row.key) {\n          @if (row.kind === 'group') {\n            <li class=\"star-listbox__group\" role=\"presentation\" [id]=\"row.id\">{{ row.label }}</li>\n          } @else {\n          @let option = row.option;\n          @let i = row.index;\n          <!-- Keyboard is handled on the combobox via aria-activedescendant (WAI-ARIA combobox pattern). -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n          <li\n            class=\"star-listbox__option\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [class.star-listbox__option--active]=\"activeIndex() === i\"\n            [attr.aria-selected]=\"activeIndex() === i\"\n            [attr.aria-disabled]=\"isDisabled(option) || null\"\n            [attr.aria-describedby]=\"describedBy(row)\"\n            [attr.aria-setsize]=\"virtualScroll() ? visibleOptions().length : null\"\n            [attr.aria-posinset]=\"virtualScroll() ? i + 1 : null\"\n            (click)=\"onOptionClick(option, i)\"\n            (mousemove)=\"isDisabled(option) || activeIndex.set(i)\"\n          >\n            <span class=\"star-listbox__label\">\n              @if (optionTemplate(); as custom) {\n                <ng-container *ngTemplateOutlet=\"custom.template; context: optionContext(option, i)\" />\n              } @else {\n                @let parts = highlight(labelOf(option));\n                {{ parts[0] }}<mark class=\"star-ac__match\">{{ parts[1] }}</mark>{{ parts[2] }}\n              }\n            </span>\n          </li>\n          }\n        } @empty {\n          <li class=\"star-listbox__empty\" role=\"presentation\">\n            {{ loading() ? text.searching : emptyText() }}\n          </li>\n        }\n        @if (virtualWindow().after) {\n          <li class=\"star-listbox__spacer\" role=\"presentation\" [style.height.px]=\"virtualWindow().after\"></li>\n        }\n      </ul>\n    </div>\n  </ng-template>\n",
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: 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: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMultiAutoComplete,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-multi-autocomplete",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				...HOST,
+				class: "star-select star-ac star-ac--multi"
+			},
+			template: TEMPLATE
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		selectionLimit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionLimit",
+				required: false
+			}]
+		}]
+	}
+});
+export { StarAutoComplete, StarAutoCompleteBase, StarMultiAutoComplete };
+
+//# sourceMappingURL=star-ng-ui-autocomplete.mjs.map