@ks-digital/designsystem-angular 0.0.1-alpha.74 → 0.0.1-alpha.76

package/fesm2022/ks-digital-designsystem-angular-suggestion.mjs

@@ -1,291 +1,456 @@
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { viewChild, ChangeDetectionStrategy, Component, input, CUSTOM_ELEMENTS_SCHEMA, contentChildren, contentChild, booleanAttribute, model, output, computed, signal, afterRenderEffect, effect, untracked } from '@angular/core';
-import '@digdir/designsystemet-web';
-import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
-
-class SuggestionListEmpty {
-    /**
-     * Hack to get the content from parent component so that we can
-     * keep the dom structure needed without additional host elements
-     */
-    templateRef = viewChild('tpl', ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SuggestionListEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: SuggestionListEmpty, isStandalone: true, selector: "ksd-suggestion-list-empty", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SuggestionListEmpty, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-suggestion-list-empty',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: ` <ng-template #tpl><ng-content /></ng-template> `,
-                }]
-        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
-
-class SuggestionListOption {
-    /**
-     * Hack to get the content from parent component so that we can
-     * keep the dom structure needed without additional host elements
-     */
-    templateRef = viewChild('tpl', ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SuggestionListOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: SuggestionListOption, isStandalone: true, selector: "ksd-suggestion-list-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template #tpl><ng-content /></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SuggestionListOption, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-suggestion-list-option',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    imports: [],
-                    template: ` <ng-template #tpl><ng-content /></ng-template> `,
-                }]
-        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
-
-class SuggestionList {
-    /**
-     * Screen reader announcement template for singular result count.
-     *
-     * @default '%d forslag'
-     */
-    singular = input('%d forslag', ...(ngDevMode ? [{ debugName: "singular" }] : /* istanbul ignore next */ []));
-    /**
-     * Screen reader announcement template for plural result count.
-     *
-     * @default '%d forslag'
-     */
-    plural = input('%d forslag', ...(ngDevMode ? [{ debugName: "plural" }] : /* istanbul ignore next */ []));
-    options = contentChildren(SuggestionListOption, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
-    empty = contentChild(SuggestionListEmpty, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SuggestionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: SuggestionList, isStandalone: true, selector: "ksd-suggestion-list", inputs: { singular: { classPropertyName: "singular", publicName: "singular", isSignal: true, isRequired: false, transformFunction: null }, plural: { classPropertyName: "plural", publicName: "plural", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none;" }, queries: [{ propertyName: "options", predicate: SuggestionListOption, descendants: true, isSignal: true }, { propertyName: "empty", first: true, predicate: SuggestionListEmpty, descendants: true, isSignal: true }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SuggestionList, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-suggestion-list',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    host: {
-                        style: 'display: none;',
-                    },
-                    template: ``,
-                }]
-        }], propDecorators: { singular: [{ type: i0.Input, args: [{ isSignal: true, alias: "singular", required: false }] }], plural: [{ type: i0.Input, args: [{ isSignal: true, alias: "plural", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SuggestionListOption), { ...{
-                            descendants: true,
-                        }, isSignal: true }] }], empty: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SuggestionListEmpty), { isSignal: true }] }] } });
-
-const isSuggestionItem = (value) => typeof value === 'object' &&
-    value !== null &&
-    'label' in value &&
-    'value' in value;
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import "@digdir/designsystemet-web";
+import * as i1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+var SuggestionListEmpty = class SuggestionListEmpty {
+	templateRef = viewChild("tpl", ...ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SuggestionListEmpty,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: SuggestionListEmpty,
+		isStandalone: true,
+		selector: "ksd-suggestion-list-empty",
+		viewQueries: [{
+			propertyName: "templateRef",
+			first: true,
+			predicate: ["tpl"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: ` <ng-template #tpl><ng-content /></ng-template> `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SuggestionListEmpty,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-suggestion-list-empty",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: ` <ng-template #tpl><ng-content /></ng-template> `
+		}]
+	}],
+	propDecorators: { templateRef: [{
+		type: i0.ViewChild,
+		args: ["tpl", { isSignal: true }]
+	}] }
+});
+var SuggestionListOption = class SuggestionListOption {
+	templateRef = viewChild("tpl", ...ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SuggestionListOption,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: SuggestionListOption,
+		isStandalone: true,
+		selector: "ksd-suggestion-list-option",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		viewQueries: [{
+			propertyName: "templateRef",
+			first: true,
+			predicate: ["tpl"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: ` <ng-template #tpl><ng-content /></ng-template> `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SuggestionListOption,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-suggestion-list-option",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			imports: [],
+			template: ` <ng-template #tpl><ng-content /></ng-template> `
+		}]
+	}],
+	propDecorators: {
+		templateRef: [{
+			type: i0.ViewChild,
+			args: ["tpl", { isSignal: true }]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}]
+	}
+});
+var SuggestionList = class SuggestionList {
+	singular = input("%d forslag", ...ngDevMode ? [{ debugName: "singular" }] : /* istanbul ignore next */ []);
+	plural = input("%d forslag", ...ngDevMode ? [{ debugName: "plural" }] : /* istanbul ignore next */ []);
+	options = contentChildren(SuggestionListOption, {
+		...ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	empty = contentChild(SuggestionListEmpty, ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SuggestionList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: SuggestionList,
+		isStandalone: true,
+		selector: "ksd-suggestion-list",
+		inputs: {
+			singular: {
+				classPropertyName: "singular",
+				publicName: "singular",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			plural: {
+				classPropertyName: "plural",
+				publicName: "plural",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { styleAttribute: "display: none;" },
+		queries: [{
+			propertyName: "options",
+			predicate: SuggestionListOption,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "empty",
+			first: true,
+			predicate: SuggestionListEmpty,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: ``,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SuggestionList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-suggestion-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			host: { style: "display: none;" },
+			template: ``
+		}]
+	}],
+	propDecorators: {
+		singular: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "singular",
+				required: false
+			}]
+		}],
+		plural: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "plural",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => SuggestionListOption), {
+				descendants: true,
+				isSignal: true
+			}]
+		}],
+		empty: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => SuggestionListEmpty), { isSignal: true }]
+		}]
+	}
+});
+const isSuggestionItem = (value) => typeof value === "object" && value !== null && "label" in value && "value" in value;
 const sanitizeValues = (values) => values == null ? [] : Array.isArray(values) ? values : [values];
 const toValues = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
-/** Extracts the labels carried by any items passed to `[selected]`. */
-const labelEntries = (values) => sanitizeValues(values)
-    .filter(isSuggestionItem)
-    .map((item) => [item.value, item.label]);
-/** Normalizes anything accepted by `[selected]` into the primitive value model. */
+const labelEntries = (values) => sanitizeValues(values).filter(isSuggestionItem).map((item) => [item.value, item.label]);
 const toValue = (values) => {
-    if (values == null)
-        return undefined;
-    const primitives = sanitizeValues(values).map((value) => isSuggestionItem(value) ? value.value : value);
-    return Array.isArray(values) ? primitives : primitives[0];
+	if (values == null) return void 0;
+	const primitives = sanitizeValues(values).map((value) => isSuggestionItem(value) ? value.value : value);
+	return Array.isArray(values) ? primitives : primitives[0];
 };
 const resolveItems = (value, labels) => toValues(value).map((optionValue) => ({
-    label: labels.get(optionValue) ?? optionValue,
-    value: optionValue,
+	label: labels.get(optionValue) ?? optionValue,
+	value: optionValue
 }));
-/** Resolves a primitive value into items, using known labels where available. */
 const toSelected = (value, labels) => {
-    if (value == null)
-        return undefined;
-    const items = resolveItems(value, labels);
-    return Array.isArray(value) ? items : items[0];
+	if (value == null) return void 0;
+	const items = resolveItems(value, labels);
+	return Array.isArray(value) ? items : items[0];
 };
 const sameValue = (left, right) => {
-    if (Array.isArray(left) && Array.isArray(right)) {
-        return (left.length === right.length &&
-            left.every((value, index) => value === right[index]));
-    }
-    return left === right;
+	if (Array.isArray(left) && Array.isArray(right)) return left.length === right.length && left.every((value, index) => value === right[index]);
+	return left === right;
 };
 const nextSelected = (data, previous, multiple) => {
-    const value = data.value;
-    if (!multiple)
-        return data.isConnected ? undefined : value;
-    const previousValues = toValues(previous);
-    return data.isConnected
-        ? previousValues.filter((previousValue) => previousValue !== value)
-        : [...previousValues, value];
+	const value = data.value;
+	if (!multiple) return data.isConnected ? void 0 : value;
+	const previousValues = toValues(previous);
+	return data.isConnected ? previousValues.filter((previousValue) => previousValue !== value) : [...previousValues, value];
 };
-
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
-// Distinguishes an unbound `selected` from one explicitly bound to `undefined`.
-const UNSET = Symbol('unset');
-class Suggestion {
-    /**
-     * Allows the user to select multiple items
-     *
-     * @default false
-     */
-    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Allows the user to create new items
-     *
-     * @default false
-     */
-    creatable = input(false, { ...(ngDevMode ? { debugName: "creatable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Filter options; boolean or a custom callback.
-     *
-     * @default true
-     */
-    filter = input(true, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
-    /**
-     * Current value, as primitive option values. Bound by Angular signal forms.
-     *
-     * @default undefined
-     */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Controlled selection. Accepts items or raw option values.
-     *
-     * @default undefined
-     */
-    selected = input(UNSET, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    /**
-     * Emits the resolved selection whenever the user changes it.
-     */
-    selectedChange = output();
-    /**
-     * Form-control dirty state.
-     *
-     * @default false
-     */
-    dirty = input(false, { ...(ngDevMode ? { debugName: "dirty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether the control has been touched. Synced with Angular signal forms.
-     *
-     * @default false
-     */
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    selectedArray = computed(() => resolveItems(this.value(), this.labels()), ...(ngDevMode ? [{ debugName: "selectedArray" }] : /* istanbul ignore next */ []));
-    suggestionElement = viewChild('suggestionElement', ...(ngDevMode ? [{ debugName: "suggestionElement" }] : /* istanbul ignore next */ []));
-    labels = signal(new Map(), ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
-    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
-    suggestionList = contentChild(SuggestionList, ...(ngDevMode ? [{ debugName: "suggestionList" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Runs after render, so projected options are present in the DOM.
-        afterRenderEffect(() => {
-            this.query();
-            this.filter();
-            this.suggestionList()?.options();
-            this.syncOptions();
-        });
-        // Apply the controlled `selected` input, when bound, to the value model.
-        effect(() => {
-            const selected = this.selected();
-            if (selected === UNSET)
-                return;
-            untracked(() => this.learnLabels(labelEntries(selected)));
-            const next = toValue(selected);
-            if (sameValue(next, untracked(() => this.value())))
-                return;
-            untracked(() => this.value.set(next));
-        });
-    }
-    onSelect(event) {
-        const customEvent = event;
-        customEvent.preventDefault();
-        const data = customEvent.detail;
-        if (!data)
-            return;
-        this.learnLabels([[data.value, data.textContent?.trim() || data.value]]);
-        this.setValue(nextSelected(data, this.value(), this.multiple()));
-    }
-    onFocusOut(event) {
-        const suggestionElement = this.suggestionElement()?.nativeElement;
-        const nextTarget = event.relatedTarget;
-        // Ignore focus changes within the composite widget; only mark touched
-        // when focus leaves the suggestion control entirely.
-        if (suggestionElement &&
-            nextTarget instanceof Node &&
-            suggestionElement.contains(nextTarget)) {
-            return;
-        }
-        this.touched.set(true);
-    }
-    onInput(event) {
-        const inputElement = event.target;
-        this.query.set(inputElement?.value ?? '');
-    }
-    setValue(value) {
-        if (sameValue(value, this.value()))
-            return;
-        this.value.set(value);
-        this.selectedChange.emit(toSelected(value, this.labels()));
-    }
-    learnLabels(entries) {
-        this.labels.update((current) => {
-            let next = null;
-            for (const [value, label] of entries) {
-                if (current.get(value) === label)
-                    continue;
-                next ??= new Map(current);
-                next.set(value, label);
-            }
-            return next ?? current;
-        });
-    }
-    syncOptions() {
-        const suggestionElement = this.suggestionElement()?.nativeElement;
-        if (!suggestionElement)
-            return;
-        const input = suggestionElement.querySelector('input');
-        const options = Array.from(suggestionElement.querySelectorAll('u-option:not([data-empty])'));
-        this.learnLabels(options.map((option) => [
-            option.value,
-            option.label ||
-                option.text ||
-                option.textContent?.trim() ||
-                option.value,
-        ]));
-        const filter = this.filter();
-        const filterFn = filter === true ? defaultFilter : filter;
-        if (filterFn && input) {
-            let index = 0;
-            for (const option of options) {
-                option.disabled = !filterFn({
-                    index,
-                    input,
-                    label: option.label,
-                    optionElement: option,
-                    text: option.text,
-                    value: option.value,
-                });
-                index++;
-            }
-        }
-        else {
-            for (const option of options) {
-                option.disabled = false;
-            }
-        }
-        const visibleOptions = options.filter((option) => !option.disabled && !option.hidden);
-        const emptyOption = suggestionElement.querySelector('u-option[data-empty]');
-        if (!emptyOption)
-            return;
-        if (visibleOptions.length === 0) {
-            emptyOption.removeAttribute('hidden');
-            return;
-        }
-        emptyOption.setAttribute('hidden', '');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Suggestion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Suggestion, isStandalone: true, selector: "ksd-suggestion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedChange: "selectedChange", touched: "touchedChange" }, queries: [{ propertyName: "suggestionList", first: true, predicate: SuggestionList, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "suggestionElement", first: true, predicate: ["suggestionElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
+const UNSET = Symbol("unset");
+var Suggestion = class Suggestion {
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	creatable = input(false, {
+		...ngDevMode ? { debugName: "creatable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	filter = input(true, ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	selected = input(UNSET, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	selectedChange = output();
+	dirty = input(false, {
+		...ngDevMode ? { debugName: "dirty" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	selectedArray = computed(() => resolveItems(this.value(), this.labels()), ...ngDevMode ? [{ debugName: "selectedArray" }] : /* istanbul ignore next */ []);
+	suggestionElement = viewChild("suggestionElement", ...ngDevMode ? [{ debugName: "suggestionElement" }] : /* istanbul ignore next */ []);
+	labels = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	suggestionList = contentChild(SuggestionList, ...ngDevMode ? [{ debugName: "suggestionList" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			this.query();
+			this.filter();
+			this.suggestionList()?.options();
+			this.syncOptions();
+		});
+		effect(() => {
+			const selected = this.selected();
+			if (selected === UNSET) return;
+			untracked(() => this.learnLabels(labelEntries(selected)));
+			const next = toValue(selected);
+			if (sameValue(next, untracked(() => this.value()))) return;
+			untracked(() => this.value.set(next));
+		});
+	}
+	onSelect(event) {
+		const customEvent = event;
+		customEvent.preventDefault();
+		const data = customEvent.detail;
+		if (!data) return;
+		this.learnLabels([[data.value, data.textContent?.trim() || data.value]]);
+		this.setValue(nextSelected(data, this.value(), this.multiple()));
+	}
+	onFocusOut(event) {
+		const suggestionElement = this.suggestionElement()?.nativeElement;
+		const nextTarget = event.relatedTarget;
+		if (suggestionElement && nextTarget instanceof Node && suggestionElement.contains(nextTarget)) return;
+		this.touch.emit();
+	}
+	onInput(event) {
+		const inputElement = event.target;
+		this.query.set(inputElement?.value ?? "");
+	}
+	setValue(value) {
+		if (sameValue(value, this.value())) return;
+		this.value.set(value);
+		this.selectedChange.emit(toSelected(value, this.labels()));
+	}
+	learnLabels(entries) {
+		this.labels.update((current) => {
+			let next = null;
+			for (const [value, label] of entries) {
+				if (current.get(value) === label) continue;
+				next ??= new Map(current);
+				next.set(value, label);
+			}
+			return next ?? current;
+		});
+	}
+	syncOptions() {
+		const suggestionElement = this.suggestionElement()?.nativeElement;
+		if (!suggestionElement) return;
+		const input = suggestionElement.querySelector("input");
+		const options = Array.from(suggestionElement.querySelectorAll("u-option:not([data-empty])"));
+		this.learnLabels(options.map((option) => [option.value, option.label || option.text || option.textContent?.trim() || option.value]));
+		const filter = this.filter();
+		const filterFn = filter === true ? defaultFilter : filter;
+		if (filterFn && input) {
+			let index = 0;
+			for (const option of options) {
+				option.disabled = !filterFn({
+					index,
+					input,
+					label: option.label,
+					optionElement: option,
+					text: option.text,
+					value: option.value
+				});
+				index++;
+			}
+		} else for (const option of options) option.disabled = false;
+		const visibleOptions = options.filter((option) => !option.disabled && !option.hidden);
+		const emptyOption = suggestionElement.querySelector("u-option[data-empty]");
+		if (!emptyOption) return;
+		if (visibleOptions.length === 0) {
+			emptyOption.removeAttribute("hidden");
+			return;
+		}
+		emptyOption.setAttribute("hidden", "");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Suggestion,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Suggestion,
+		isStandalone: true,
+		selector: "ksd-suggestion",
+		inputs: {
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			creatable: {
+				classPropertyName: "creatable",
+				publicName: "creatable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filter: {
+				classPropertyName: "filter",
+				publicName: "filter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dirty: {
+				classPropertyName: "dirty",
+				publicName: "dirty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			selectedChange: "selectedChange",
+			touch: "touch"
+		},
+		queries: [{
+			propertyName: "suggestionList",
+			first: true,
+			predicate: SuggestionList,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "suggestionElement",
+			first: true,
+			predicate: ["suggestionElement"],
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{
+			directive: i1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
     <ds-suggestion
       #suggestionElement
       class="ds-suggestion"
@@ -318,20 +483,42 @@ class Suggestion {
         }
       </u-datalist>
     </ds-suggestion>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Suggestion, decorators: [{
-            type: Component,
-            args: [{ selector: 'ksd-suggestion', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: HostSize,
-                            inputs: ['data-size'],
-                        },
-                        {
-                            directive: HostColor,
-                            inputs: ['data-color'],
-                        },
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [NgTemplateOutlet], template: `
+  `,
+		isInline: true,
+		styles: [":host{display:block}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Suggestion,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-suggestion",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			imports: [NgTemplateOutlet],
+			template: `
     <ds-suggestion
       #suggestionElement
       class="ds-suggestion"
@@ -364,12 +551,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }
       </u-datalist>
     </ds-suggestion>
-  `, styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], suggestionElement: [{ type: i0.ViewChild, args: ['suggestionElement', { isSignal: true }] }], suggestionList: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SuggestionList), { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `,
+			styles: [":host{display:block}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		creatable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "creatable",
+				required: false
+			}]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}],
+		selectedChange: [{
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		dirty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dirty",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		suggestionElement: [{
+			type: i0.ViewChild,
+			args: ["suggestionElement", { isSignal: true }]
+		}],
+		suggestionList: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => SuggestionList), { isSignal: true }]
+		}]
+	}
+});
 export { Suggestion, SuggestionList, SuggestionListEmpty, SuggestionListOption };
-//# sourceMappingURL=ks-digital-designsystem-angular-suggestion.mjs.map
+
+//# sourceMappingURL=ks-digital-designsystem-angular-suggestion.mjs.map