@ng-doc/app 22.0.0 → 22.2.0

package/fesm2022/ng-doc-app-type-controls-list-control.mjs

@@ -0,0 +1,792 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, signal, Injector, viewChild, effect, untracked, afterNextRender, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
+import { resolvePlaygroundOption } from '@ng-doc/app/helpers';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
+import { NgDocDropdownComponent, NgDocButtonIconComponent, NgDocDropdownOriginDirective, NgDocIconComponent, NgDocTagComponent } from '@ng-doc/ui-kit';
+import { DIControl } from 'di-controls';
+
+/** How far, in pixels, a pointer moves on a chip before it drags the chip. */
+const DRAG_THRESHOLD = 4;
+let nextId = 0;
+/**
+ * The base of the playground controls of array inputs: a chip combobox. The items are chips, in
+ * one field with a text field after them. Enter adds the typed value, Backspace in the empty field
+ * removes the last chip, and the × of a chip removes it. A chip is dragged to another place, or
+ * moved with Alt+Left and Alt+Right while it is focused, and the arrow keys move between chips.
+ * While the reader types, a dropdown lists the matching suggestions; the arrow keys move its
+ * highlight, and Enter or a click picks a row. Escape closes it.
+ *
+ * Subclasses decide what an item is: typed text (`parseItem`) for the arrays of strings and
+ * numbers, which suggest the input's default items and the items removed while the control is
+ * shown, or the values of a union, which the dropdown lists (`NgDocTypeAliasListControlComponent`).
+ *
+ * The control never changes an array it received: every edit reports a new array of plain values,
+ * so the value can be compared with the default and sent to an isolated demo as it is. An
+ * `undefined` or `null` value has no items and shows as such; the first added item makes it an
+ * array, and removing the last item leaves an empty array. Reset returns to the input's default,
+ * which is how an optional input gets back to `undefined`.
+ */
+class NgDocListControl extends DIControl {
+    constructor() {
+        super({
+            // The form writes back each value the control reports. Another value, such as the
+            // inspector's Reset, ends an edit or a drag of the items that it replaces.
+            onIncomingUpdate: (value) => {
+                if (value !== this.reported) {
+                    this.editing.set(null);
+                    this.cancelDrag();
+                }
+            },
+        });
+        /** Default value of the input; Reset returns to it. */
+        this.default = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "default" }] : /* istanbul ignore next */ []));
+        this.texts = inject(NG_DOC_TEXTS).playground;
+        /** The prefix of the IDs of the parts of the control. */
+        this.id = `ng-doc-list-control-${nextId++}`;
+        /** The items of the value; none when the value is not an array. */
+        this.items = computed(() => {
+            const value = this.model();
+            return Array.isArray(value) ? value : [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** The items as the chips show them: in the order of a drag in progress. */
+        this.shownItems = computed(() => this.dragOrder() ?? this.items(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shownItems" }] : /* istanbul ignore next */ []));
+        /**
+         * The text shown instead of the items when the value is not an array (`undefined` or `null`), or
+         * is an empty array (`[]`), so that the two can be told apart. These are code, not words.
+         */
+        this.literal = computed(() => {
+            const value = this.model();
+            if (Array.isArray(value)) {
+                return value.length ? '' : '[]';
+            }
+            return value === null ? 'null' : 'undefined';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "literal" }] : /* istanbul ignore next */ []));
+        /** Whether Reset is shown: the value differs from the default. */
+        this.canReset = computed(() => !sameItems(this.model(), this.default()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canReset" }] : /* istanbul ignore next */ []));
+        /** The text of the text field. */
+        this.text = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Whether the reader asked for the dropdown, by typing, clicking or an arrow key. */
+        this.expanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /** The position of the highlighted row of the dropdown, or `-1`. */
+        this.highlighted = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        /** The position of the item edited in place, or `null`. */
+        this.editing = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+        /** The text of the field that edits an item in place. */
+        this.editText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editText" }] : /* istanbul ignore next */ []));
+        /** The position of the chip in the tab order; the others are reached with the arrow keys. */
+        this.tabStop = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []));
+        /** The position of the chip being dragged, or `null`. */
+        this.dragIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
+        /** What the live region announces: the new position of a moved item. */
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        /** The width of the dropdown: the width of the field. */
+        this.panelWidth = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+        /** Whether the text field holds text that is not an item, such as a word in a `number[]`. */
+        this.invalid = computed(() => this.freeText && this.text().trim() !== '' && this.parseItem(this.text()) === undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /** Whether the field that edits an item holds text that is not an item. */
+        this.editInvalid = computed(() => this.editing() !== null && this.parseItem(this.editText()) === undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * The rows of the dropdown: the values of `candidates()` whose text contains the typed text (the
+         * one equal to it first), and, when the typed text is an item that no row adds, a row that adds
+         * it, first.
+         */
+        this.rows = computed(() => {
+            const text = this.text();
+            const query = text.trim().toLowerCase();
+            const items = this.items();
+            const typed = this.freeText && query ? this.parseItem(text) : undefined;
+            const rows = this.candidates()
+                .map((value) => ({
+                kind: 'item',
+                value,
+                label: this.labelOf(value),
+                selected: items.some((item) => Object.is(item, value)),
+            }))
+                .filter((row) => row.label.toLowerCase().includes(query));
+            const exact = typed === undefined
+                ? -1
+                : rows.findIndex((row) => Object.is(row.value, typed));
+            if (exact > 0) {
+                rows.unshift(...rows.splice(exact, 1));
+            }
+            return typed !== undefined && exact < 0
+                ? [{ kind: 'add', value: typed, label: this.labelOf(typed), selected: false }, ...rows]
+                : rows;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the dropdown is open: the reader asked for it and it has rows, or, for a union, says
+         * that no value matches the typed text.
+         */
+        this.panelOpen = computed(() => this.expanded() &&
+            !this.disabled &&
+            (this.rows().length > 0 || (!this.freeText && this.text().trim() !== '')), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+        /** The items removed while the control is shown, which the arrays of strings and numbers suggest. */
+        this.removed = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "removed" }] : /* istanbul ignore next */ []));
+        this.injector = inject(Injector);
+        this.dropdown = viewChild(NgDocDropdownComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
+        this.fieldBox = viewChild('fieldBox', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldBox" }] : /* istanbul ignore next */ []));
+        /** The items in the order of a drag in progress, or `null`. */
+        this.dragOrder = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragOrder" }] : /* istanbul ignore next */ []));
+        this.drag = null;
+        /** The last array the control reported, which the form writes back. */
+        this.reported = null;
+        // The dropdown is an overlay; it follows the state, and it closes itself on an outside click.
+        effect(() => {
+            const open = this.panelOpen();
+            const dropdown = this.dropdown();
+            untracked(() => {
+                if (open) {
+                    this.panelWidth.set(this.fieldBox()?.nativeElement.offsetWidth ?? 0);
+                    dropdown?.open();
+                }
+                else {
+                    dropdown?.close();
+                }
+            });
+        });
+    }
+    /**
+     * The values that the dropdown can list, before the typed text filters them: for an array of
+     * strings or numbers, the items of the default and the removed items that the array doesn't
+     * hold. Plain arrays may hold an item twice, so typed text that is an item is added again, but
+     * the suggestions never repeat an item.
+     */
+    candidates() {
+        const items = this.items();
+        const pool = [...(this.default() ?? []), ...this.removed()];
+        return pool.filter((value, index) => pool.findIndex((other) => Object.is(other, value)) === index &&
+            !items.some((item) => Object.is(item, value)));
+    }
+    /**
+     * The text of an item.
+     * @param item - The item.
+     */
+    labelOf(item) {
+        return String(item);
+    }
+    /**
+     * The text of a chip: the item's text, or `""` for an empty string.
+     * @param item - The item.
+     */
+    chipText(item) {
+        return this.labelOf(item) || '""';
+    }
+    /**
+     * Reads the text field as the reader types.
+     * @param text - The text of the field.
+     */
+    type(text) {
+        this.text.set(text);
+        this.expanded.set(true);
+        // With text, the first row is the typed value or the value that matches it best.
+        this.highlighted.set(text.trim() && this.rows().length ? 0 : -1);
+    }
+    /**
+     * Handles the keys of the text field.
+     * @param event - The key event.
+     * @param field - The text field.
+     */
+    fieldKeydown(event, field) {
+        const count = this.items().length;
+        switch (event.key) {
+            case 'Enter':
+                event.preventDefault();
+                this.enter();
+                break;
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveHighlight(event.key === 'ArrowDown' ? 1 : -1);
+                break;
+            case 'Escape':
+                if (this.panelOpen()) {
+                    // The dropdown closes; the key does not reach the page.
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.expanded.set(false);
+                }
+                break;
+            case 'Backspace':
+                if (field.value === '' && count) {
+                    event.preventDefault();
+                    this.remove(count - 1);
+                }
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                // The key toward the chips, at the start of the field, focuses the last chip.
+                if (event.key === (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') &&
+                    field.selectionStart === 0 &&
+                    field.selectionEnd === 0 &&
+                    count) {
+                    event.preventDefault();
+                    this.expanded.set(false);
+                    this.focusChip(count - 1);
+                }
+                break;
+            case 'Tab':
+                this.expanded.set(false);
+                break;
+        }
+    }
+    /**
+     * Opens the dropdown when the reader clicks the field, and focuses the text field when the click
+     * is not on a chip or a button.
+     * @param event - The click.
+     * @param field - The text field.
+     */
+    fieldClick(event, field) {
+        const target = event.target instanceof Element ? event.target : null;
+        if (this.disabled || target?.closest('[data-ng-doc-list-item], button')) {
+            return;
+        }
+        field.focus();
+        this.expanded.set(true);
+    }
+    /**
+     * Picks a row of the dropdown: adds its value, or removes a picked value of a union.
+     * @param row - The row.
+     */
+    pick(row) {
+        if (!this.freeText && row.selected) {
+            this.remove(this.items().findIndex((item) => Object.is(item, row.value)), false);
+        }
+        else {
+            this.add(row.value);
+        }
+        this.text.set('');
+        if (this.freeText) {
+            this.expanded.set(false);
+            this.highlighted.set(-1);
+        }
+        else {
+            // A union keeps its values open, so that the reader can pick several; the highlight stays on
+            // the picked value.
+            this.highlighted.set(this.rows().findIndex((other) => Object.is(other.value, row.value)));
+        }
+    }
+    /**
+     * Handles the keys of a focused chip.
+     * @param event - The key event.
+     * @param index - The position of the chip.
+     */
+    chipKeydown(event, index) {
+        const count = this.items().length;
+        const forward = this.isRtl() ? 'ArrowLeft' : 'ArrowRight';
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowRight': {
+                const offset = event.key === forward ? 1 : -1;
+                event.preventDefault();
+                if (event.altKey) {
+                    this.move(index, offset);
+                }
+                else if (index + offset >= count) {
+                    this.focusField();
+                }
+                else {
+                    this.focusChip(Math.max(index + offset, 0));
+                }
+                break;
+            }
+            case 'Home':
+            case 'End':
+                event.preventDefault();
+                this.focusChip(event.key === 'Home' ? 0 : count - 1);
+                break;
+            case 'Delete':
+            case 'Backspace':
+                event.preventDefault();
+                this.remove(index);
+                break;
+            case 'Enter':
+            case 'F2':
+                if (this.freeText) {
+                    event.preventDefault();
+                    this.startEdit(index);
+                }
+                break;
+        }
+    }
+    /**
+     * Removes an item. The focus goes to the chip that takes its place, the previous chip, or the
+     * text field when the field had it, or no chip is left.
+     * @param index - The position of the item.
+     * @param focus - Whether the focus moves; a pick in the dropdown keeps it in the text field.
+     */
+    remove(index, focus = true) {
+        const items = this.items();
+        const value = items[index];
+        const rest = items.filter((_item, position) => position !== index);
+        const fromField = this.isFocused(this.fieldElement());
+        if (!this.removed().some((item) => Object.is(item, value))) {
+            this.removed.set([...this.removed(), value]);
+        }
+        this.report(rest);
+        if (!focus) {
+            return;
+        }
+        if (fromField || !rest.length) {
+            this.focusField();
+        }
+        else {
+            this.focusChip(Math.min(index, rest.length - 1));
+        }
+    }
+    /**
+     * Edits an item in place: its chip becomes a text field.
+     * @param index - The position of the item.
+     */
+    startEdit(index) {
+        if (!this.freeText || this.disabled) {
+            return;
+        }
+        this.expanded.set(false);
+        this.editText.set(String(this.items()[index]));
+        this.editing.set(index);
+        afterNextRender(() => {
+            const field = this.host().querySelector('[data-ng-doc-list-edit]');
+            field?.focus();
+            field?.select();
+        }, { injector: this.injector });
+    }
+    /**
+     * Handles the keys of the field that edits an item: Enter keeps the text, Escape the item.
+     * @param event - The key event.
+     */
+    editKeydown(event) {
+        const index = this.editing();
+        if (index === null) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (this.commitEdit()) {
+                this.focusChip(index);
+            }
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.editing.set(null);
+            this.focusChip(index);
+        }
+    }
+    /** Ends an edit when its field loses the focus: with the text when it is an item. */
+    editBlur() {
+        if (this.editing() !== null && !this.commitEdit()) {
+            this.editing.set(null);
+        }
+    }
+    /**
+     * Starts to follow a pointer that went down on a chip.
+     * @param event - The pointer event.
+     * @param index - The position of the chip.
+     */
+    chipPointerDown(event, index) {
+        if (this.disabled || event.button !== 0 || this.editing() !== null) {
+            return;
+        }
+        this.drag = {
+            pointerId: event.pointerId,
+            x: event.clientX,
+            y: event.clientY,
+            index,
+            started: false,
+        };
+        // The chip keeps the pointer while it moves over the other chips.
+        event.currentTarget?.setPointerCapture?.(event.pointerId);
+    }
+    /**
+     * Drags the chip once the pointer has moved far enough, and moves it in front of or behind the
+     * chip under the pointer once the pointer passes that chip's middle.
+     * @param event - The pointer event.
+     */
+    chipPointerMove(event) {
+        const drag = this.drag;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        if (!drag.started) {
+            if (Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < DRAG_THRESHOLD) {
+                return;
+            }
+            drag.started = true;
+            this.expanded.set(false);
+            this.dragOrder.set([...this.items()]);
+            this.dragIndex.set(drag.index);
+        }
+        const from = this.dragIndex();
+        const order = this.dragOrder();
+        const target = from === null ? null : this.dropTarget(event, from);
+        if (from !== null && order && target !== null) {
+            this.dragOrder.set(moveItem(order, from, target));
+            this.dragIndex.set(target);
+        }
+    }
+    /**
+     * Drops a dragged chip: the items take the order of the drag.
+     * @param event - The pointer event.
+     */
+    chipPointerUp(event) {
+        const drag = this.drag;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        const order = this.dragOrder();
+        const index = this.dragIndex();
+        this.cancelDrag();
+        if (drag.started && order && index !== null && index !== drag.index) {
+            this.report(order);
+            this.announceMove(order, index);
+            this.focusChip(index);
+        }
+    }
+    /** Stops following the pointer; a drag in progress leaves the items as they were. */
+    cancelDrag() {
+        this.drag = null;
+        this.dragOrder.set(null);
+        this.dragIndex.set(null);
+    }
+    /**
+     * Closes the dropdown and marks the control as touched when the focus leaves the control.
+     * @param event - The focus event.
+     */
+    leave(event) {
+        const next = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+        if (!next || !this.host().contains(next)) {
+            this.expanded.set(false);
+            this.touch();
+        }
+    }
+    /** Sets the value back to the default of the input. */
+    reset() {
+        const value = this.default();
+        this.text.set('');
+        this.editing.set(null);
+        this.report(Array.isArray(value) ? [...value] : value);
+    }
+    /**
+     * The ID of a row of the dropdown, which the text field names as its active descendant.
+     * @param index - The position of the row.
+     */
+    rowId(index) {
+        return `${this.id}-row-${index}`;
+    }
+    /**
+     * Adds an item at the end.
+     * @param value - The item.
+     */
+    add(value) {
+        this.report([...this.items(), value]);
+    }
+    /** Adds the highlighted row, or the typed text when it is an item. */
+    enter() {
+        const rows = this.rows();
+        const row = this.panelOpen()
+            ? rows[this.highlighted()]
+            : undefined;
+        if (row) {
+            this.pick(row);
+            return;
+        }
+        const typed = this.freeText && this.text().trim() ? this.parseItem(this.text()) : undefined;
+        if (typed !== undefined) {
+            this.add(typed);
+            this.text.set('');
+            this.expanded.set(false);
+        }
+    }
+    /**
+     * Moves the highlight of the dropdown, and opens it.
+     * @param step - `1` for the next row, `-1` for the previous one.
+     */
+    moveHighlight(step) {
+        const count = this.rows().length;
+        const current = this.panelOpen() ? this.highlighted() : -1;
+        this.expanded.set(true);
+        if (count) {
+            this.highlighted.set(current < 0 ? (step > 0 ? 0 : count - 1) : (current + step + count) % count);
+        }
+    }
+    /**
+     * Moves an item one place, with the focus.
+     * @param index - The position of the item.
+     * @param offset - `-1` toward the start, `1` toward the end.
+     */
+    move(index, offset) {
+        const target = index + offset;
+        const items = this.items();
+        if (target < 0 || target >= items.length) {
+            return;
+        }
+        const order = moveItem(items, index, target);
+        this.report(order);
+        this.announceMove(order, target);
+        this.focusChip(target);
+    }
+    /**
+     * Sets the edited item from the text of its field.
+     * @returns Whether the text is an item.
+     */
+    commitEdit() {
+        const index = this.editing();
+        const value = this.parseItem(this.editText());
+        if (index === null || value === undefined) {
+            return false;
+        }
+        this.editing.set(null);
+        if (!Object.is(value, this.items()[index])) {
+            this.report(this.items().map((item, position) => (position === index ? value : item)));
+        }
+        return true;
+    }
+    /**
+     * The position a dragged chip moves to: the position of the chip under the pointer, once the
+     * pointer has passed its middle in the direction of the move.
+     * @param event - The pointer event.
+     * @param from - The position of the dragged chip.
+     */
+    dropTarget(event, from) {
+        const rtl = this.isRtl();
+        for (const chip of Array.from(this.host().querySelectorAll('[data-ng-doc-list-item]'))) {
+            const index = Number(chip.getAttribute('data-ng-doc-list-item'));
+            const rect = chip.getBoundingClientRect();
+            if (index === from ||
+                event.clientX < rect.left ||
+                event.clientX > rect.right ||
+                event.clientY < rect.top ||
+                event.clientY > rect.bottom) {
+                continue;
+            }
+            const middle = rect.left + rect.width / 2;
+            const pastMiddle = index > from !== rtl ? event.clientX > middle : event.clientX < middle;
+            return pastMiddle ? index : null;
+        }
+        return null;
+    }
+    /**
+     * Reports a new value.
+     * @param value - The value.
+     */
+    report(value) {
+        this.reported = value;
+        this.updateModel(value);
+    }
+    /**
+     * Announces the new position of a moved item.
+     * @param order - The items after the move.
+     * @param index - The new position of the item.
+     */
+    announceMove(order, index) {
+        this.announcement.set(this.texts.itemMoved({
+            item: this.chipText(order[index]),
+            position: index + 1,
+            count: order.length,
+        }));
+    }
+    /**
+     * Focuses a chip once the chips have rendered: they are tracked by position, so the focused
+     * element may show another item, or be gone.
+     * @param index - The position of the chip.
+     */
+    focusChip(index) {
+        this.tabStop.set(index);
+        afterNextRender(() => this.host()
+            .querySelector(`[data-ng-doc-list-item="${index}"] [data-ng-doc-list-chip]`)
+            ?.focus(), { injector: this.injector });
+    }
+    /** Focuses the text field once the chips have rendered. */
+    focusField() {
+        afterNextRender(() => this.fieldElement()?.focus(), { injector: this.injector });
+    }
+    fieldElement() {
+        return this.host().querySelector('[data-ng-doc-list-field]');
+    }
+    isFocused(element) {
+        return !!element && element.ownerDocument.activeElement === element;
+    }
+    /** Whether the chips flow from right to left, which turns the arrow keys round. */
+    isRtl() {
+        const host = this.host();
+        return host.ownerDocument.defaultView?.getComputedStyle(host).direction === 'rtl';
+    }
+    host() {
+        return this.elementRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocListControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.2.1", type: NgDocListControl, isStandalone: true, inputs: { default: { classPropertyName: "default", publicName: "default", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "leave($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgDocDropdownComponent, descendants: true, isSignal: true }, { propertyName: "fieldBox", first: true, predicate: ["fieldBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocListControl, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '(focusout)': 'leave($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { default: [{ type: i0.Input, args: [{ isSignal: true, alias: "default", required: false }] }], dropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgDocDropdownComponent), { isSignal: true }] }], fieldBox: [{ type: i0.ViewChild, args: ['fieldBox', { isSignal: true }] }] } });
+/** The shared metadata of the array controls. */
+const LIST_CONTROL_IMPORTS = [
+    NgDocButtonIconComponent,
+    NgDocDropdownComponent,
+    NgDocDropdownOriginDirective,
+    NgDocIconComponent,
+    NgDocTagComponent,
+];
+/**
+ * The playground control of `string[]` inputs: a chip combobox (`NgDocListControl`). Typed text is
+ * an item as it is, and a double click, Enter or F2 edits a chip in place.
+ */
+class NgDocStringListControlComponent extends NgDocListControl {
+    constructor() {
+        super();
+        this.freeText = true;
+    }
+    parseItem(text) {
+        return text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocStringListControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocStringListControlComponent, isStandalone: true, selector: "ng-doc-string-list-control", usesInheritance: true, ngImport: i0, template: "<!-- The chips and the text field share one field-styled box, which the dropdown is attached to. -->\n<div\n  #fieldBox\n  class=\"ng-doc-list-control-box\"\n  ngDocDropdownOrigin\n  [attr.data-ng-doc-invalid]=\"invalid() || editInvalid()\"\n  [attr.data-ng-doc-disabled]=\"disabled\"\n  (click)=\"fieldClick($event, field)\">\n  <div class=\"ng-doc-list-control-flow\">\n    <!-- `display: contents` lets the chips and the text field wrap as one line of content. -->\n    <ul class=\"ng-doc-list-control-chips\" role=\"list\">\n      @for (item of shownItems(); track $index) {\n        <li\n          class=\"ng-doc-list-control-item\"\n          [attr.data-ng-doc-list-item]=\"$index\"\n          [attr.data-ng-doc-dragging]=\"dragIndex() === $index\">\n          @if (editing() === $index) {\n            <input\n              class=\"ng-doc-list-control-edit\"\n              data-ng-doc-list-edit\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              [size]=\"editText().length || 1\"\n              [value]=\"editText()\"\n              [attr.aria-label]=\"texts.editItem({ item: chipText(item) })\"\n              [attr.aria-invalid]=\"editInvalid() ? 'true' : null\"\n              [attr.aria-describedby]=\"editInvalid() ? id + '-error' : null\"\n              (input)=\"editText.set(edit.value)\"\n              (keydown)=\"editKeydown($event)\"\n              (blur)=\"editBlur()\"\n              #edit />\n          } @else {\n            <ng-doc-tag class=\"ng-doc-list-control-chip\" mod=\"light\">\n              <span\n                class=\"ng-doc-list-control-chip-text\"\n                data-ng-doc-list-chip\n                [class.ng-doc-list-control-empty-string]=\"labelOf(item) === ''\"\n                [attr.role]=\"freeText ? 'button' : null\"\n                [attr.tabindex]=\"\n                  disabled ? null : $index === tabStop() || ($last && tabStop() > $index) ? 0 : -1\n                \"\n                [attr.aria-describedby]=\"\n                  freeText ? id + '-edit-keys ' + id + '-keys' : id + '-keys'\n                \"\n                (focus)=\"tabStop.set($index)\"\n                (keydown)=\"chipKeydown($event, $index)\"\n                (dblclick)=\"startEdit($index)\"\n                (pointerdown)=\"chipPointerDown($event, $index)\"\n                (pointermove)=\"chipPointerMove($event)\"\n                (pointerup)=\"chipPointerUp($event)\"\n                (pointercancel)=\"cancelDrag()\"\n                >{{ chipText(item) }}</span\n              >\n              <button\n                type=\"button\"\n                class=\"ng-doc-list-control-remove\"\n                data-ng-doc-list-remove\n                tabindex=\"-1\"\n                [attr.aria-label]=\"texts.removeItem({ item: chipText(item) })\"\n                [disabled]=\"disabled\"\n                (click)=\"remove($index)\">\n                <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n              </button>\n            </ng-doc-tag>\n          }\n        </li>\n      }\n    </ul>\n    @if (literal(); as literal) {\n      <code class=\"ng-doc-list-control-literal\" data-ng-doc-list-literal>{{ literal }}</code>\n    }\n    <input\n      #field\n      class=\"ng-doc-list-control-field\"\n      data-ng-doc-list-field\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      spellcheck=\"false\"\n      autocomplete=\"off\"\n      [value]=\"text()\"\n      [placeholder]=\"items().length ? '' : texts.addItem\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"texts.addItem\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [attr.aria-controls]=\"id + '-rows'\"\n      [attr.aria-activedescendant]=\"panelOpen() && highlighted() >= 0 ? rowId(highlighted()) : null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [attr.aria-describedby]=\"invalid() ? id + '-error' : null\"\n      (input)=\"type(field.value)\"\n      (keydown)=\"fieldKeydown($event, field)\" />\n  </div>\n  @if (canReset()) {\n    <button\n      ng-doc-button-icon-transparent\n      type=\"button\"\n      size=\"small\"\n      class=\"ng-doc-list-control-reset\"\n      data-ng-doc-list-reset\n      [rounded]=\"false\"\n      [attr.aria-label]=\"texts.resetToDefault\"\n      [disabled]=\"disabled\"\n      (click)=\"reset()\">\n      <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n    </button>\n  }\n  <!-- The dropdown's host takes the focus while it is open, to move it into the overlay. The rows\n       here are never focused (the text field names the highlighted one), so the host is inert. -->\n  <span class=\"ng-doc-list-control-dropdown\" inert>\n    <ng-doc-dropdown\n      [content]=\"panel\"\n      [positions]=\"['bottom-center', 'top-center']\"\n      [maxHeight]=\"240\"\n      (beforeClose)=\"expanded.set(false)\"></ng-doc-dropdown>\n  </span>\n</div>\n@if (invalid() || editInvalid()) {\n  <span class=\"ng-doc-list-control-error\" [id]=\"id + '-error'\">{{ texts.invalidNumber }}</span>\n}\n<span hidden [id]=\"id + '-keys'\">{{ texts.itemKeys }}</span>\n<span hidden [id]=\"id + '-edit-keys'\">{{ texts.editKeys }}</span>\n<span class=\"ng-doc-list-control-status\" role=\"status\">{{ announcement() }}</span>\n\n<ng-template #panel>\n  <!-- A press on a row keeps the focus in the text field. -->\n  <div\n    class=\"ng-doc-list-control-panel\"\n    [style.width.px]=\"panelWidth()\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (rows().length) {\n      <div\n        role=\"listbox\"\n        class=\"ng-doc-list-control-rows\"\n        [id]=\"id + '-rows'\"\n        [attr.aria-label]=\"texts.suggestions\"\n        [attr.aria-multiselectable]=\"freeText ? null : 'true'\">\n        @for (row of rows(); track $index) {\n          <div\n            role=\"option\"\n            class=\"ng-doc-list-control-row\"\n            [id]=\"rowId($index)\"\n            [attr.data-ng-doc-list-row]=\"row.kind\"\n            [attr.data-ng-doc-highlighted]=\"highlighted() === $index\"\n            [attr.aria-selected]=\"freeText ? highlighted() === $index : row.selected\"\n            (pointerenter)=\"highlighted.set($index)\"\n            (click)=\"pick(row)\">\n            <span class=\"ng-doc-list-control-row-text\">\n              {{ row.kind === 'add' ? texts.addValue({ value: row.label }) : row.label || '\"\"' }}\n            </span>\n            @if (row.selected) {\n              <ng-doc-icon\n                class=\"ng-doc-list-control-check\"\n                icon=\"check\"\n                aria-hidden=\"true\"></ng-doc-icon>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"ng-doc-list-control-no-matches\" role=\"status\">{{ texts.noMatches }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--ng-doc-space-1);width:100%;min-width:0}.ng-doc-list-control-box{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;min-width:0;min-height:var(--ng-doc-input-height);padding:5px var(--ng-doc-space-1) 5px 5px;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);background-color:var(--ng-doc-input-background-color);cursor:text}.ng-doc-list-control-box:hover:not([data-ng-doc-disabled=true]){border:var(--ng-doc-input-border-hover)}.ng-doc-list-control-box:has(:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-list-control-box[data-ng-doc-invalid=true],.ng-doc-list-control-box[data-ng-doc-invalid=true]:hover{border-color:var(--ng-doc-alert)}.ng-doc-list-control-box[data-ng-doc-disabled=true]{cursor:default;opacity:.6}.ng-doc-list-control-flow{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.ng-doc-list-control-chips{display:contents;margin:0;padding:0;list-style:none}.ng-doc-list-control-item{display:flex;min-width:0;max-width:100%}.ng-doc-list-control-item[data-ng-doc-dragging=true] .ng-doc-list-control-chip{opacity:.5}.ng-doc-list-control-chip{gap:2px;height:24px;max-width:100%;padding:0 2px 0 0;overflow:hidden;--ng-doc-font-size: 13px;--ng-doc-line-height: 24px}.ng-doc-list-control-chip-text{min-width:0;overflow:hidden;padding-left:var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);text-overflow:ellipsis;outline:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.ng-doc-list-control-chip-text:focus-visible{box-shadow:var(--ng-doc-focus-ring)}[data-ng-doc-disabled=true] .ng-doc-list-control-chip-text{cursor:default}.ng-doc-list-control-empty-string{font-family:var(--ng-doc-code-font);opacity:.7}.ng-doc-list-control-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:var(--ng-doc-radius-sm);background:transparent;color:inherit;cursor:pointer;opacity:.6;--ng-doc-icon-width: 12px;--ng-doc-icon-height: 12px}.ng-doc-list-control-remove ::ng-deep svg{width:12px;height:12px}.ng-doc-list-control-remove:hover:not(:disabled){opacity:1;background:var(--ng-doc-hover-background)}.ng-doc-list-control-remove:disabled{cursor:default}.ng-doc-list-control-edit{box-sizing:content-box;height:22px;min-width:2ch;max-width:100%;margin:0;padding:0 var(--ng-doc-space-2);border:1px solid var(--ng-doc-primary);border-radius:var(--ng-doc-radius-sm);outline:none;background:var(--ng-doc-input-background-color);color:var(--ng-doc-text);font:inherit;font-size:13px}.ng-doc-list-control-edit[aria-invalid=true]{border-color:var(--ng-doc-alert)}.ng-doc-list-control-literal{padding:0 var(--ng-doc-space-1);font-family:var(--ng-doc-code-font);font-size:13px;line-height:24px;color:var(--ng-doc-text-muted)}.ng-doc-list-control-field{flex:1 1 32px;min-width:32px;height:24px;margin:0;padding:0 var(--ng-doc-space-1);border:0;outline:none;background:transparent;color:var(--ng-doc-text);font-family:var(--ng-doc-font-family);font-size:14px}.ng-doc-list-control-field::placeholder{color:var(--ng-doc-text-muted)}.ng-doc-list-control-reset{flex:none}.ng-doc-list-control-dropdown{display:contents}.ng-doc-list-control-error{font-size:12px;line-height:16px;color:var(--ng-doc-alert)}.ng-doc-list-control-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-list-control-panel{box-sizing:border-box;min-width:160px;max-width:100vw;padding:var(--ng-doc-space-1) 0;font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px}.ng-doc-list-control-row{display:flex;align-items:center;gap:var(--ng-doc-space-2);padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text);cursor:pointer}.ng-doc-list-control-row[data-ng-doc-highlighted=true]{background:var(--ng-doc-hover-background)}.ng-doc-list-control-row[data-ng-doc-list-row=add]{color:var(--ng-doc-heading-color);font-weight:500}.ng-doc-list-control-row[aria-selected=true]:not([data-ng-doc-list-row=add]){color:var(--ng-doc-heading-color)}.ng-doc-list-control-row-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-list-control-check{flex:none;--ng-doc-icon-color: var(--ng-doc-primary)}.ng-doc-list-control-no-matches{padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text-muted)}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocDropdownComponent, selector: "ng-doc-dropdown", inputs: ["content", "origin", "closeIfOutsideClick", "closeIfInnerClick", "withArrow", "borderOffset", "panelClass", "contactBorder", "hasBackdrop", "positions", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"] }, { kind: "directive", type: NgDocDropdownOriginDirective, selector: "[ngDocDropdownOrigin]", exportAs: ["ngDocDropdownOrigin"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocStringListControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-string-list-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: LIST_CONTROL_IMPORTS, template: "<!-- The chips and the text field share one field-styled box, which the dropdown is attached to. -->\n<div\n  #fieldBox\n  class=\"ng-doc-list-control-box\"\n  ngDocDropdownOrigin\n  [attr.data-ng-doc-invalid]=\"invalid() || editInvalid()\"\n  [attr.data-ng-doc-disabled]=\"disabled\"\n  (click)=\"fieldClick($event, field)\">\n  <div class=\"ng-doc-list-control-flow\">\n    <!-- `display: contents` lets the chips and the text field wrap as one line of content. -->\n    <ul class=\"ng-doc-list-control-chips\" role=\"list\">\n      @for (item of shownItems(); track $index) {\n        <li\n          class=\"ng-doc-list-control-item\"\n          [attr.data-ng-doc-list-item]=\"$index\"\n          [attr.data-ng-doc-dragging]=\"dragIndex() === $index\">\n          @if (editing() === $index) {\n            <input\n              class=\"ng-doc-list-control-edit\"\n              data-ng-doc-list-edit\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              [size]=\"editText().length || 1\"\n              [value]=\"editText()\"\n              [attr.aria-label]=\"texts.editItem({ item: chipText(item) })\"\n              [attr.aria-invalid]=\"editInvalid() ? 'true' : null\"\n              [attr.aria-describedby]=\"editInvalid() ? id + '-error' : null\"\n              (input)=\"editText.set(edit.value)\"\n              (keydown)=\"editKeydown($event)\"\n              (blur)=\"editBlur()\"\n              #edit />\n          } @else {\n            <ng-doc-tag class=\"ng-doc-list-control-chip\" mod=\"light\">\n              <span\n                class=\"ng-doc-list-control-chip-text\"\n                data-ng-doc-list-chip\n                [class.ng-doc-list-control-empty-string]=\"labelOf(item) === ''\"\n                [attr.role]=\"freeText ? 'button' : null\"\n                [attr.tabindex]=\"\n                  disabled ? null : $index === tabStop() || ($last && tabStop() > $index) ? 0 : -1\n                \"\n                [attr.aria-describedby]=\"\n                  freeText ? id + '-edit-keys ' + id + '-keys' : id + '-keys'\n                \"\n                (focus)=\"tabStop.set($index)\"\n                (keydown)=\"chipKeydown($event, $index)\"\n                (dblclick)=\"startEdit($index)\"\n                (pointerdown)=\"chipPointerDown($event, $index)\"\n                (pointermove)=\"chipPointerMove($event)\"\n                (pointerup)=\"chipPointerUp($event)\"\n                (pointercancel)=\"cancelDrag()\"\n                >{{ chipText(item) }}</span\n              >\n              <button\n                type=\"button\"\n                class=\"ng-doc-list-control-remove\"\n                data-ng-doc-list-remove\n                tabindex=\"-1\"\n                [attr.aria-label]=\"texts.removeItem({ item: chipText(item) })\"\n                [disabled]=\"disabled\"\n                (click)=\"remove($index)\">\n                <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n              </button>\n            </ng-doc-tag>\n          }\n        </li>\n      }\n    </ul>\n    @if (literal(); as literal) {\n      <code class=\"ng-doc-list-control-literal\" data-ng-doc-list-literal>{{ literal }}</code>\n    }\n    <input\n      #field\n      class=\"ng-doc-list-control-field\"\n      data-ng-doc-list-field\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      spellcheck=\"false\"\n      autocomplete=\"off\"\n      [value]=\"text()\"\n      [placeholder]=\"items().length ? '' : texts.addItem\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"texts.addItem\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [attr.aria-controls]=\"id + '-rows'\"\n      [attr.aria-activedescendant]=\"panelOpen() && highlighted() >= 0 ? rowId(highlighted()) : null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [attr.aria-describedby]=\"invalid() ? id + '-error' : null\"\n      (input)=\"type(field.value)\"\n      (keydown)=\"fieldKeydown($event, field)\" />\n  </div>\n  @if (canReset()) {\n    <button\n      ng-doc-button-icon-transparent\n      type=\"button\"\n      size=\"small\"\n      class=\"ng-doc-list-control-reset\"\n      data-ng-doc-list-reset\n      [rounded]=\"false\"\n      [attr.aria-label]=\"texts.resetToDefault\"\n      [disabled]=\"disabled\"\n      (click)=\"reset()\">\n      <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n    </button>\n  }\n  <!-- The dropdown's host takes the focus while it is open, to move it into the overlay. The rows\n       here are never focused (the text field names the highlighted one), so the host is inert. -->\n  <span class=\"ng-doc-list-control-dropdown\" inert>\n    <ng-doc-dropdown\n      [content]=\"panel\"\n      [positions]=\"['bottom-center', 'top-center']\"\n      [maxHeight]=\"240\"\n      (beforeClose)=\"expanded.set(false)\"></ng-doc-dropdown>\n  </span>\n</div>\n@if (invalid() || editInvalid()) {\n  <span class=\"ng-doc-list-control-error\" [id]=\"id + '-error'\">{{ texts.invalidNumber }}</span>\n}\n<span hidden [id]=\"id + '-keys'\">{{ texts.itemKeys }}</span>\n<span hidden [id]=\"id + '-edit-keys'\">{{ texts.editKeys }}</span>\n<span class=\"ng-doc-list-control-status\" role=\"status\">{{ announcement() }}</span>\n\n<ng-template #panel>\n  <!-- A press on a row keeps the focus in the text field. -->\n  <div\n    class=\"ng-doc-list-control-panel\"\n    [style.width.px]=\"panelWidth()\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (rows().length) {\n      <div\n        role=\"listbox\"\n        class=\"ng-doc-list-control-rows\"\n        [id]=\"id + '-rows'\"\n        [attr.aria-label]=\"texts.suggestions\"\n        [attr.aria-multiselectable]=\"freeText ? null : 'true'\">\n        @for (row of rows(); track $index) {\n          <div\n            role=\"option\"\n            class=\"ng-doc-list-control-row\"\n            [id]=\"rowId($index)\"\n            [attr.data-ng-doc-list-row]=\"row.kind\"\n            [attr.data-ng-doc-highlighted]=\"highlighted() === $index\"\n            [attr.aria-selected]=\"freeText ? highlighted() === $index : row.selected\"\n            (pointerenter)=\"highlighted.set($index)\"\n            (click)=\"pick(row)\">\n            <span class=\"ng-doc-list-control-row-text\">\n              {{ row.kind === 'add' ? texts.addValue({ value: row.label }) : row.label || '\"\"' }}\n            </span>\n            @if (row.selected) {\n              <ng-doc-icon\n                class=\"ng-doc-list-control-check\"\n                icon=\"check\"\n                aria-hidden=\"true\"></ng-doc-icon>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"ng-doc-list-control-no-matches\" role=\"status\">{{ texts.noMatches }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--ng-doc-space-1);width:100%;min-width:0}.ng-doc-list-control-box{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;min-width:0;min-height:var(--ng-doc-input-height);padding:5px var(--ng-doc-space-1) 5px 5px;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);background-color:var(--ng-doc-input-background-color);cursor:text}.ng-doc-list-control-box:hover:not([data-ng-doc-disabled=true]){border:var(--ng-doc-input-border-hover)}.ng-doc-list-control-box:has(:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-list-control-box[data-ng-doc-invalid=true],.ng-doc-list-control-box[data-ng-doc-invalid=true]:hover{border-color:var(--ng-doc-alert)}.ng-doc-list-control-box[data-ng-doc-disabled=true]{cursor:default;opacity:.6}.ng-doc-list-control-flow{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.ng-doc-list-control-chips{display:contents;margin:0;padding:0;list-style:none}.ng-doc-list-control-item{display:flex;min-width:0;max-width:100%}.ng-doc-list-control-item[data-ng-doc-dragging=true] .ng-doc-list-control-chip{opacity:.5}.ng-doc-list-control-chip{gap:2px;height:24px;max-width:100%;padding:0 2px 0 0;overflow:hidden;--ng-doc-font-size: 13px;--ng-doc-line-height: 24px}.ng-doc-list-control-chip-text{min-width:0;overflow:hidden;padding-left:var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);text-overflow:ellipsis;outline:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.ng-doc-list-control-chip-text:focus-visible{box-shadow:var(--ng-doc-focus-ring)}[data-ng-doc-disabled=true] .ng-doc-list-control-chip-text{cursor:default}.ng-doc-list-control-empty-string{font-family:var(--ng-doc-code-font);opacity:.7}.ng-doc-list-control-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:var(--ng-doc-radius-sm);background:transparent;color:inherit;cursor:pointer;opacity:.6;--ng-doc-icon-width: 12px;--ng-doc-icon-height: 12px}.ng-doc-list-control-remove ::ng-deep svg{width:12px;height:12px}.ng-doc-list-control-remove:hover:not(:disabled){opacity:1;background:var(--ng-doc-hover-background)}.ng-doc-list-control-remove:disabled{cursor:default}.ng-doc-list-control-edit{box-sizing:content-box;height:22px;min-width:2ch;max-width:100%;margin:0;padding:0 var(--ng-doc-space-2);border:1px solid var(--ng-doc-primary);border-radius:var(--ng-doc-radius-sm);outline:none;background:var(--ng-doc-input-background-color);color:var(--ng-doc-text);font:inherit;font-size:13px}.ng-doc-list-control-edit[aria-invalid=true]{border-color:var(--ng-doc-alert)}.ng-doc-list-control-literal{padding:0 var(--ng-doc-space-1);font-family:var(--ng-doc-code-font);font-size:13px;line-height:24px;color:var(--ng-doc-text-muted)}.ng-doc-list-control-field{flex:1 1 32px;min-width:32px;height:24px;margin:0;padding:0 var(--ng-doc-space-1);border:0;outline:none;background:transparent;color:var(--ng-doc-text);font-family:var(--ng-doc-font-family);font-size:14px}.ng-doc-list-control-field::placeholder{color:var(--ng-doc-text-muted)}.ng-doc-list-control-reset{flex:none}.ng-doc-list-control-dropdown{display:contents}.ng-doc-list-control-error{font-size:12px;line-height:16px;color:var(--ng-doc-alert)}.ng-doc-list-control-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-list-control-panel{box-sizing:border-box;min-width:160px;max-width:100vw;padding:var(--ng-doc-space-1) 0;font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px}.ng-doc-list-control-row{display:flex;align-items:center;gap:var(--ng-doc-space-2);padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text);cursor:pointer}.ng-doc-list-control-row[data-ng-doc-highlighted=true]{background:var(--ng-doc-hover-background)}.ng-doc-list-control-row[data-ng-doc-list-row=add]{color:var(--ng-doc-heading-color);font-weight:500}.ng-doc-list-control-row[aria-selected=true]:not([data-ng-doc-list-row=add]){color:var(--ng-doc-heading-color)}.ng-doc-list-control-row-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-list-control-check{flex:none;--ng-doc-icon-color: var(--ng-doc-primary)}.ng-doc-list-control-no-matches{padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text-muted)}\n"] }]
+        }], ctorParameters: () => [] });
+/**
+ * The playground control of `number[]` inputs: a chip combobox (`NgDocListControl`) whose items are
+ * numbers. Text that is not a number marks the field as invalid and adds nothing; a chip edited to
+ * such text keeps its number.
+ */
+class NgDocNumberListControlComponent extends NgDocListControl {
+    constructor() {
+        super();
+        this.freeText = true;
+    }
+    parseItem(text) {
+        const value = Number(text);
+        return text.trim() !== '' && Number.isFinite(value) ? value : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocNumberListControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocNumberListControlComponent, isStandalone: true, selector: "ng-doc-number-list-control", usesInheritance: true, ngImport: i0, template: "<!-- The chips and the text field share one field-styled box, which the dropdown is attached to. -->\n<div\n  #fieldBox\n  class=\"ng-doc-list-control-box\"\n  ngDocDropdownOrigin\n  [attr.data-ng-doc-invalid]=\"invalid() || editInvalid()\"\n  [attr.data-ng-doc-disabled]=\"disabled\"\n  (click)=\"fieldClick($event, field)\">\n  <div class=\"ng-doc-list-control-flow\">\n    <!-- `display: contents` lets the chips and the text field wrap as one line of content. -->\n    <ul class=\"ng-doc-list-control-chips\" role=\"list\">\n      @for (item of shownItems(); track $index) {\n        <li\n          class=\"ng-doc-list-control-item\"\n          [attr.data-ng-doc-list-item]=\"$index\"\n          [attr.data-ng-doc-dragging]=\"dragIndex() === $index\">\n          @if (editing() === $index) {\n            <input\n              class=\"ng-doc-list-control-edit\"\n              data-ng-doc-list-edit\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              [size]=\"editText().length || 1\"\n              [value]=\"editText()\"\n              [attr.aria-label]=\"texts.editItem({ item: chipText(item) })\"\n              [attr.aria-invalid]=\"editInvalid() ? 'true' : null\"\n              [attr.aria-describedby]=\"editInvalid() ? id + '-error' : null\"\n              (input)=\"editText.set(edit.value)\"\n              (keydown)=\"editKeydown($event)\"\n              (blur)=\"editBlur()\"\n              #edit />\n          } @else {\n            <ng-doc-tag class=\"ng-doc-list-control-chip\" mod=\"light\">\n              <span\n                class=\"ng-doc-list-control-chip-text\"\n                data-ng-doc-list-chip\n                [class.ng-doc-list-control-empty-string]=\"labelOf(item) === ''\"\n                [attr.role]=\"freeText ? 'button' : null\"\n                [attr.tabindex]=\"\n                  disabled ? null : $index === tabStop() || ($last && tabStop() > $index) ? 0 : -1\n                \"\n                [attr.aria-describedby]=\"\n                  freeText ? id + '-edit-keys ' + id + '-keys' : id + '-keys'\n                \"\n                (focus)=\"tabStop.set($index)\"\n                (keydown)=\"chipKeydown($event, $index)\"\n                (dblclick)=\"startEdit($index)\"\n                (pointerdown)=\"chipPointerDown($event, $index)\"\n                (pointermove)=\"chipPointerMove($event)\"\n                (pointerup)=\"chipPointerUp($event)\"\n                (pointercancel)=\"cancelDrag()\"\n                >{{ chipText(item) }}</span\n              >\n              <button\n                type=\"button\"\n                class=\"ng-doc-list-control-remove\"\n                data-ng-doc-list-remove\n                tabindex=\"-1\"\n                [attr.aria-label]=\"texts.removeItem({ item: chipText(item) })\"\n                [disabled]=\"disabled\"\n                (click)=\"remove($index)\">\n                <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n              </button>\n            </ng-doc-tag>\n          }\n        </li>\n      }\n    </ul>\n    @if (literal(); as literal) {\n      <code class=\"ng-doc-list-control-literal\" data-ng-doc-list-literal>{{ literal }}</code>\n    }\n    <input\n      #field\n      class=\"ng-doc-list-control-field\"\n      data-ng-doc-list-field\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      spellcheck=\"false\"\n      autocomplete=\"off\"\n      [value]=\"text()\"\n      [placeholder]=\"items().length ? '' : texts.addItem\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"texts.addItem\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [attr.aria-controls]=\"id + '-rows'\"\n      [attr.aria-activedescendant]=\"panelOpen() && highlighted() >= 0 ? rowId(highlighted()) : null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [attr.aria-describedby]=\"invalid() ? id + '-error' : null\"\n      (input)=\"type(field.value)\"\n      (keydown)=\"fieldKeydown($event, field)\" />\n  </div>\n  @if (canReset()) {\n    <button\n      ng-doc-button-icon-transparent\n      type=\"button\"\n      size=\"small\"\n      class=\"ng-doc-list-control-reset\"\n      data-ng-doc-list-reset\n      [rounded]=\"false\"\n      [attr.aria-label]=\"texts.resetToDefault\"\n      [disabled]=\"disabled\"\n      (click)=\"reset()\">\n      <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n    </button>\n  }\n  <!-- The dropdown's host takes the focus while it is open, to move it into the overlay. The rows\n       here are never focused (the text field names the highlighted one), so the host is inert. -->\n  <span class=\"ng-doc-list-control-dropdown\" inert>\n    <ng-doc-dropdown\n      [content]=\"panel\"\n      [positions]=\"['bottom-center', 'top-center']\"\n      [maxHeight]=\"240\"\n      (beforeClose)=\"expanded.set(false)\"></ng-doc-dropdown>\n  </span>\n</div>\n@if (invalid() || editInvalid()) {\n  <span class=\"ng-doc-list-control-error\" [id]=\"id + '-error'\">{{ texts.invalidNumber }}</span>\n}\n<span hidden [id]=\"id + '-keys'\">{{ texts.itemKeys }}</span>\n<span hidden [id]=\"id + '-edit-keys'\">{{ texts.editKeys }}</span>\n<span class=\"ng-doc-list-control-status\" role=\"status\">{{ announcement() }}</span>\n\n<ng-template #panel>\n  <!-- A press on a row keeps the focus in the text field. -->\n  <div\n    class=\"ng-doc-list-control-panel\"\n    [style.width.px]=\"panelWidth()\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (rows().length) {\n      <div\n        role=\"listbox\"\n        class=\"ng-doc-list-control-rows\"\n        [id]=\"id + '-rows'\"\n        [attr.aria-label]=\"texts.suggestions\"\n        [attr.aria-multiselectable]=\"freeText ? null : 'true'\">\n        @for (row of rows(); track $index) {\n          <div\n            role=\"option\"\n            class=\"ng-doc-list-control-row\"\n            [id]=\"rowId($index)\"\n            [attr.data-ng-doc-list-row]=\"row.kind\"\n            [attr.data-ng-doc-highlighted]=\"highlighted() === $index\"\n            [attr.aria-selected]=\"freeText ? highlighted() === $index : row.selected\"\n            (pointerenter)=\"highlighted.set($index)\"\n            (click)=\"pick(row)\">\n            <span class=\"ng-doc-list-control-row-text\">\n              {{ row.kind === 'add' ? texts.addValue({ value: row.label }) : row.label || '\"\"' }}\n            </span>\n            @if (row.selected) {\n              <ng-doc-icon\n                class=\"ng-doc-list-control-check\"\n                icon=\"check\"\n                aria-hidden=\"true\"></ng-doc-icon>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"ng-doc-list-control-no-matches\" role=\"status\">{{ texts.noMatches }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--ng-doc-space-1);width:100%;min-width:0}.ng-doc-list-control-box{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;min-width:0;min-height:var(--ng-doc-input-height);padding:5px var(--ng-doc-space-1) 5px 5px;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);background-color:var(--ng-doc-input-background-color);cursor:text}.ng-doc-list-control-box:hover:not([data-ng-doc-disabled=true]){border:var(--ng-doc-input-border-hover)}.ng-doc-list-control-box:has(:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-list-control-box[data-ng-doc-invalid=true],.ng-doc-list-control-box[data-ng-doc-invalid=true]:hover{border-color:var(--ng-doc-alert)}.ng-doc-list-control-box[data-ng-doc-disabled=true]{cursor:default;opacity:.6}.ng-doc-list-control-flow{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.ng-doc-list-control-chips{display:contents;margin:0;padding:0;list-style:none}.ng-doc-list-control-item{display:flex;min-width:0;max-width:100%}.ng-doc-list-control-item[data-ng-doc-dragging=true] .ng-doc-list-control-chip{opacity:.5}.ng-doc-list-control-chip{gap:2px;height:24px;max-width:100%;padding:0 2px 0 0;overflow:hidden;--ng-doc-font-size: 13px;--ng-doc-line-height: 24px}.ng-doc-list-control-chip-text{min-width:0;overflow:hidden;padding-left:var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);text-overflow:ellipsis;outline:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.ng-doc-list-control-chip-text:focus-visible{box-shadow:var(--ng-doc-focus-ring)}[data-ng-doc-disabled=true] .ng-doc-list-control-chip-text{cursor:default}.ng-doc-list-control-empty-string{font-family:var(--ng-doc-code-font);opacity:.7}.ng-doc-list-control-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:var(--ng-doc-radius-sm);background:transparent;color:inherit;cursor:pointer;opacity:.6;--ng-doc-icon-width: 12px;--ng-doc-icon-height: 12px}.ng-doc-list-control-remove ::ng-deep svg{width:12px;height:12px}.ng-doc-list-control-remove:hover:not(:disabled){opacity:1;background:var(--ng-doc-hover-background)}.ng-doc-list-control-remove:disabled{cursor:default}.ng-doc-list-control-edit{box-sizing:content-box;height:22px;min-width:2ch;max-width:100%;margin:0;padding:0 var(--ng-doc-space-2);border:1px solid var(--ng-doc-primary);border-radius:var(--ng-doc-radius-sm);outline:none;background:var(--ng-doc-input-background-color);color:var(--ng-doc-text);font:inherit;font-size:13px}.ng-doc-list-control-edit[aria-invalid=true]{border-color:var(--ng-doc-alert)}.ng-doc-list-control-literal{padding:0 var(--ng-doc-space-1);font-family:var(--ng-doc-code-font);font-size:13px;line-height:24px;color:var(--ng-doc-text-muted)}.ng-doc-list-control-field{flex:1 1 32px;min-width:32px;height:24px;margin:0;padding:0 var(--ng-doc-space-1);border:0;outline:none;background:transparent;color:var(--ng-doc-text);font-family:var(--ng-doc-font-family);font-size:14px}.ng-doc-list-control-field::placeholder{color:var(--ng-doc-text-muted)}.ng-doc-list-control-reset{flex:none}.ng-doc-list-control-dropdown{display:contents}.ng-doc-list-control-error{font-size:12px;line-height:16px;color:var(--ng-doc-alert)}.ng-doc-list-control-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-list-control-panel{box-sizing:border-box;min-width:160px;max-width:100vw;padding:var(--ng-doc-space-1) 0;font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px}.ng-doc-list-control-row{display:flex;align-items:center;gap:var(--ng-doc-space-2);padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text);cursor:pointer}.ng-doc-list-control-row[data-ng-doc-highlighted=true]{background:var(--ng-doc-hover-background)}.ng-doc-list-control-row[data-ng-doc-list-row=add]{color:var(--ng-doc-heading-color);font-weight:500}.ng-doc-list-control-row[aria-selected=true]:not([data-ng-doc-list-row=add]){color:var(--ng-doc-heading-color)}.ng-doc-list-control-row-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-list-control-check{flex:none;--ng-doc-icon-color: var(--ng-doc-primary)}.ng-doc-list-control-no-matches{padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text-muted)}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocDropdownComponent, selector: "ng-doc-dropdown", inputs: ["content", "origin", "closeIfOutsideClick", "closeIfInnerClick", "withArrow", "borderOffset", "panelClass", "contactBorder", "hasBackdrop", "positions", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"] }, { kind: "directive", type: NgDocDropdownOriginDirective, selector: "[ngDocDropdownOrigin]", exportAs: ["ngDocDropdownOrigin"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocNumberListControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-number-list-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: LIST_CONTROL_IMPORTS, template: "<!-- The chips and the text field share one field-styled box, which the dropdown is attached to. -->\n<div\n  #fieldBox\n  class=\"ng-doc-list-control-box\"\n  ngDocDropdownOrigin\n  [attr.data-ng-doc-invalid]=\"invalid() || editInvalid()\"\n  [attr.data-ng-doc-disabled]=\"disabled\"\n  (click)=\"fieldClick($event, field)\">\n  <div class=\"ng-doc-list-control-flow\">\n    <!-- `display: contents` lets the chips and the text field wrap as one line of content. -->\n    <ul class=\"ng-doc-list-control-chips\" role=\"list\">\n      @for (item of shownItems(); track $index) {\n        <li\n          class=\"ng-doc-list-control-item\"\n          [attr.data-ng-doc-list-item]=\"$index\"\n          [attr.data-ng-doc-dragging]=\"dragIndex() === $index\">\n          @if (editing() === $index) {\n            <input\n              class=\"ng-doc-list-control-edit\"\n              data-ng-doc-list-edit\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              [size]=\"editText().length || 1\"\n              [value]=\"editText()\"\n              [attr.aria-label]=\"texts.editItem({ item: chipText(item) })\"\n              [attr.aria-invalid]=\"editInvalid() ? 'true' : null\"\n              [attr.aria-describedby]=\"editInvalid() ? id + '-error' : null\"\n              (input)=\"editText.set(edit.value)\"\n              (keydown)=\"editKeydown($event)\"\n              (blur)=\"editBlur()\"\n              #edit />\n          } @else {\n            <ng-doc-tag class=\"ng-doc-list-control-chip\" mod=\"light\">\n              <span\n                class=\"ng-doc-list-control-chip-text\"\n                data-ng-doc-list-chip\n                [class.ng-doc-list-control-empty-string]=\"labelOf(item) === ''\"\n                [attr.role]=\"freeText ? 'button' : null\"\n                [attr.tabindex]=\"\n                  disabled ? null : $index === tabStop() || ($last && tabStop() > $index) ? 0 : -1\n                \"\n                [attr.aria-describedby]=\"\n                  freeText ? id + '-edit-keys ' + id + '-keys' : id + '-keys'\n                \"\n                (focus)=\"tabStop.set($index)\"\n                (keydown)=\"chipKeydown($event, $index)\"\n                (dblclick)=\"startEdit($index)\"\n                (pointerdown)=\"chipPointerDown($event, $index)\"\n                (pointermove)=\"chipPointerMove($event)\"\n                (pointerup)=\"chipPointerUp($event)\"\n                (pointercancel)=\"cancelDrag()\"\n                >{{ chipText(item) }}</span\n              >\n              <button\n                type=\"button\"\n                class=\"ng-doc-list-control-remove\"\n                data-ng-doc-list-remove\n                tabindex=\"-1\"\n                [attr.aria-label]=\"texts.removeItem({ item: chipText(item) })\"\n                [disabled]=\"disabled\"\n                (click)=\"remove($index)\">\n                <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n              </button>\n            </ng-doc-tag>\n          }\n        </li>\n      }\n    </ul>\n    @if (literal(); as literal) {\n      <code class=\"ng-doc-list-control-literal\" data-ng-doc-list-literal>{{ literal }}</code>\n    }\n    <input\n      #field\n      class=\"ng-doc-list-control-field\"\n      data-ng-doc-list-field\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      spellcheck=\"false\"\n      autocomplete=\"off\"\n      [value]=\"text()\"\n      [placeholder]=\"items().length ? '' : texts.addItem\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"texts.addItem\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [attr.aria-controls]=\"id + '-rows'\"\n      [attr.aria-activedescendant]=\"panelOpen() && highlighted() >= 0 ? rowId(highlighted()) : null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [attr.aria-describedby]=\"invalid() ? id + '-error' : null\"\n      (input)=\"type(field.value)\"\n      (keydown)=\"fieldKeydown($event, field)\" />\n  </div>\n  @if (canReset()) {\n    <button\n      ng-doc-button-icon-transparent\n      type=\"button\"\n      size=\"small\"\n      class=\"ng-doc-list-control-reset\"\n      data-ng-doc-list-reset\n      [rounded]=\"false\"\n      [attr.aria-label]=\"texts.resetToDefault\"\n      [disabled]=\"disabled\"\n      (click)=\"reset()\">\n      <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n    </button>\n  }\n  <!-- The dropdown's host takes the focus while it is open, to move it into the overlay. The rows\n       here are never focused (the text field names the highlighted one), so the host is inert. -->\n  <span class=\"ng-doc-list-control-dropdown\" inert>\n    <ng-doc-dropdown\n      [content]=\"panel\"\n      [positions]=\"['bottom-center', 'top-center']\"\n      [maxHeight]=\"240\"\n      (beforeClose)=\"expanded.set(false)\"></ng-doc-dropdown>\n  </span>\n</div>\n@if (invalid() || editInvalid()) {\n  <span class=\"ng-doc-list-control-error\" [id]=\"id + '-error'\">{{ texts.invalidNumber }}</span>\n}\n<span hidden [id]=\"id + '-keys'\">{{ texts.itemKeys }}</span>\n<span hidden [id]=\"id + '-edit-keys'\">{{ texts.editKeys }}</span>\n<span class=\"ng-doc-list-control-status\" role=\"status\">{{ announcement() }}</span>\n\n<ng-template #panel>\n  <!-- A press on a row keeps the focus in the text field. -->\n  <div\n    class=\"ng-doc-list-control-panel\"\n    [style.width.px]=\"panelWidth()\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (rows().length) {\n      <div\n        role=\"listbox\"\n        class=\"ng-doc-list-control-rows\"\n        [id]=\"id + '-rows'\"\n        [attr.aria-label]=\"texts.suggestions\"\n        [attr.aria-multiselectable]=\"freeText ? null : 'true'\">\n        @for (row of rows(); track $index) {\n          <div\n            role=\"option\"\n            class=\"ng-doc-list-control-row\"\n            [id]=\"rowId($index)\"\n            [attr.data-ng-doc-list-row]=\"row.kind\"\n            [attr.data-ng-doc-highlighted]=\"highlighted() === $index\"\n            [attr.aria-selected]=\"freeText ? highlighted() === $index : row.selected\"\n            (pointerenter)=\"highlighted.set($index)\"\n            (click)=\"pick(row)\">\n            <span class=\"ng-doc-list-control-row-text\">\n              {{ row.kind === 'add' ? texts.addValue({ value: row.label }) : row.label || '\"\"' }}\n            </span>\n            @if (row.selected) {\n              <ng-doc-icon\n                class=\"ng-doc-list-control-check\"\n                icon=\"check\"\n                aria-hidden=\"true\"></ng-doc-icon>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"ng-doc-list-control-no-matches\" role=\"status\">{{ texts.noMatches }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--ng-doc-space-1);width:100%;min-width:0}.ng-doc-list-control-box{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;min-width:0;min-height:var(--ng-doc-input-height);padding:5px var(--ng-doc-space-1) 5px 5px;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);background-color:var(--ng-doc-input-background-color);cursor:text}.ng-doc-list-control-box:hover:not([data-ng-doc-disabled=true]){border:var(--ng-doc-input-border-hover)}.ng-doc-list-control-box:has(:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-list-control-box[data-ng-doc-invalid=true],.ng-doc-list-control-box[data-ng-doc-invalid=true]:hover{border-color:var(--ng-doc-alert)}.ng-doc-list-control-box[data-ng-doc-disabled=true]{cursor:default;opacity:.6}.ng-doc-list-control-flow{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.ng-doc-list-control-chips{display:contents;margin:0;padding:0;list-style:none}.ng-doc-list-control-item{display:flex;min-width:0;max-width:100%}.ng-doc-list-control-item[data-ng-doc-dragging=true] .ng-doc-list-control-chip{opacity:.5}.ng-doc-list-control-chip{gap:2px;height:24px;max-width:100%;padding:0 2px 0 0;overflow:hidden;--ng-doc-font-size: 13px;--ng-doc-line-height: 24px}.ng-doc-list-control-chip-text{min-width:0;overflow:hidden;padding-left:var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);text-overflow:ellipsis;outline:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.ng-doc-list-control-chip-text:focus-visible{box-shadow:var(--ng-doc-focus-ring)}[data-ng-doc-disabled=true] .ng-doc-list-control-chip-text{cursor:default}.ng-doc-list-control-empty-string{font-family:var(--ng-doc-code-font);opacity:.7}.ng-doc-list-control-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:var(--ng-doc-radius-sm);background:transparent;color:inherit;cursor:pointer;opacity:.6;--ng-doc-icon-width: 12px;--ng-doc-icon-height: 12px}.ng-doc-list-control-remove ::ng-deep svg{width:12px;height:12px}.ng-doc-list-control-remove:hover:not(:disabled){opacity:1;background:var(--ng-doc-hover-background)}.ng-doc-list-control-remove:disabled{cursor:default}.ng-doc-list-control-edit{box-sizing:content-box;height:22px;min-width:2ch;max-width:100%;margin:0;padding:0 var(--ng-doc-space-2);border:1px solid var(--ng-doc-primary);border-radius:var(--ng-doc-radius-sm);outline:none;background:var(--ng-doc-input-background-color);color:var(--ng-doc-text);font:inherit;font-size:13px}.ng-doc-list-control-edit[aria-invalid=true]{border-color:var(--ng-doc-alert)}.ng-doc-list-control-literal{padding:0 var(--ng-doc-space-1);font-family:var(--ng-doc-code-font);font-size:13px;line-height:24px;color:var(--ng-doc-text-muted)}.ng-doc-list-control-field{flex:1 1 32px;min-width:32px;height:24px;margin:0;padding:0 var(--ng-doc-space-1);border:0;outline:none;background:transparent;color:var(--ng-doc-text);font-family:var(--ng-doc-font-family);font-size:14px}.ng-doc-list-control-field::placeholder{color:var(--ng-doc-text-muted)}.ng-doc-list-control-reset{flex:none}.ng-doc-list-control-dropdown{display:contents}.ng-doc-list-control-error{font-size:12px;line-height:16px;color:var(--ng-doc-alert)}.ng-doc-list-control-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-list-control-panel{box-sizing:border-box;min-width:160px;max-width:100vw;padding:var(--ng-doc-space-1) 0;font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px}.ng-doc-list-control-row{display:flex;align-items:center;gap:var(--ng-doc-space-2);padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text);cursor:pointer}.ng-doc-list-control-row[data-ng-doc-highlighted=true]{background:var(--ng-doc-hover-background)}.ng-doc-list-control-row[data-ng-doc-list-row=add]{color:var(--ng-doc-heading-color);font-weight:500}.ng-doc-list-control-row[aria-selected=true]:not([data-ng-doc-list-row=add]){color:var(--ng-doc-heading-color)}.ng-doc-list-control-row-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-list-control-check{flex:none;--ng-doc-icon-color: var(--ng-doc-primary)}.ng-doc-list-control-no-matches{padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text-muted)}\n"] }]
+        }], ctorParameters: () => [] });
+/**
+ * The playground control of arrays of a union of literals, such as `NgDocSize[]` or
+ * `('a' | 'b')[]`: a chip combobox (`NgDocListControl`) whose dropdown lists every value of the
+ * union, with the same texts as the control of the union (`NgDocTypeAliasControlComponent`).
+ * Picking a value adds it, and picking a value that the array holds, which is marked, removes it.
+ * The typed text filters the values; it is never an item itself.
+ */
+class NgDocTypeAliasListControlComponent extends NgDocListControl {
+    constructor() {
+        super();
+        /**
+         * The values of the items: the members of the union as written in code, plain values when
+         * `isManual` is set, or the names and values of enum members.
+         */
+        this.options = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** Whether `options` are values the user listed in the playground config. */
+        this.isManual = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isManual" }] : /* istanbul ignore next */ []));
+        this.freeText = false;
+        /** The values of the union that an item can be; `undefined`, `null` and repeats are left out. */
+        this.values = computed(() => {
+            const isManual = this.isManual();
+            const values = [];
+            for (const option of this.options() ?? []) {
+                try {
+                    const value = resolvePlaygroundOption(option, isManual);
+                    if (isListItem(value.value) &&
+                        !values.some((other) => Object.is(other.value, value.value))) {
+                        values.push(value);
+                    }
+                }
+                catch {
+                    // A member that is not a value, such as a type, is not offered.
+                }
+            }
+            return values;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    }
+    candidates() {
+        return this.values().map((option) => option.value);
+    }
+    labelOf(item) {
+        return (this.values().find((option) => Object.is(option.value, item))
+            ?.label ?? String(item));
+    }
+    parseItem() {
+        return undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTypeAliasListControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocTypeAliasListControlComponent, isStandalone: true, selector: "ng-doc-type-alias-list-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isManual: { classPropertyName: "isManual", publicName: "isManual", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<!-- The chips and the text field share one field-styled box, which the dropdown is attached to. -->\n<div\n  #fieldBox\n  class=\"ng-doc-list-control-box\"\n  ngDocDropdownOrigin\n  [attr.data-ng-doc-invalid]=\"invalid() || editInvalid()\"\n  [attr.data-ng-doc-disabled]=\"disabled\"\n  (click)=\"fieldClick($event, field)\">\n  <div class=\"ng-doc-list-control-flow\">\n    <!-- `display: contents` lets the chips and the text field wrap as one line of content. -->\n    <ul class=\"ng-doc-list-control-chips\" role=\"list\">\n      @for (item of shownItems(); track $index) {\n        <li\n          class=\"ng-doc-list-control-item\"\n          [attr.data-ng-doc-list-item]=\"$index\"\n          [attr.data-ng-doc-dragging]=\"dragIndex() === $index\">\n          @if (editing() === $index) {\n            <input\n              class=\"ng-doc-list-control-edit\"\n              data-ng-doc-list-edit\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              [size]=\"editText().length || 1\"\n              [value]=\"editText()\"\n              [attr.aria-label]=\"texts.editItem({ item: chipText(item) })\"\n              [attr.aria-invalid]=\"editInvalid() ? 'true' : null\"\n              [attr.aria-describedby]=\"editInvalid() ? id + '-error' : null\"\n              (input)=\"editText.set(edit.value)\"\n              (keydown)=\"editKeydown($event)\"\n              (blur)=\"editBlur()\"\n              #edit />\n          } @else {\n            <ng-doc-tag class=\"ng-doc-list-control-chip\" mod=\"light\">\n              <span\n                class=\"ng-doc-list-control-chip-text\"\n                data-ng-doc-list-chip\n                [class.ng-doc-list-control-empty-string]=\"labelOf(item) === ''\"\n                [attr.role]=\"freeText ? 'button' : null\"\n                [attr.tabindex]=\"\n                  disabled ? null : $index === tabStop() || ($last && tabStop() > $index) ? 0 : -1\n                \"\n                [attr.aria-describedby]=\"\n                  freeText ? id + '-edit-keys ' + id + '-keys' : id + '-keys'\n                \"\n                (focus)=\"tabStop.set($index)\"\n                (keydown)=\"chipKeydown($event, $index)\"\n                (dblclick)=\"startEdit($index)\"\n                (pointerdown)=\"chipPointerDown($event, $index)\"\n                (pointermove)=\"chipPointerMove($event)\"\n                (pointerup)=\"chipPointerUp($event)\"\n                (pointercancel)=\"cancelDrag()\"\n                >{{ chipText(item) }}</span\n              >\n              <button\n                type=\"button\"\n                class=\"ng-doc-list-control-remove\"\n                data-ng-doc-list-remove\n                tabindex=\"-1\"\n                [attr.aria-label]=\"texts.removeItem({ item: chipText(item) })\"\n                [disabled]=\"disabled\"\n                (click)=\"remove($index)\">\n                <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n              </button>\n            </ng-doc-tag>\n          }\n        </li>\n      }\n    </ul>\n    @if (literal(); as literal) {\n      <code class=\"ng-doc-list-control-literal\" data-ng-doc-list-literal>{{ literal }}</code>\n    }\n    <input\n      #field\n      class=\"ng-doc-list-control-field\"\n      data-ng-doc-list-field\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      spellcheck=\"false\"\n      autocomplete=\"off\"\n      [value]=\"text()\"\n      [placeholder]=\"items().length ? '' : texts.addItem\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"texts.addItem\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [attr.aria-controls]=\"id + '-rows'\"\n      [attr.aria-activedescendant]=\"panelOpen() && highlighted() >= 0 ? rowId(highlighted()) : null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [attr.aria-describedby]=\"invalid() ? id + '-error' : null\"\n      (input)=\"type(field.value)\"\n      (keydown)=\"fieldKeydown($event, field)\" />\n  </div>\n  @if (canReset()) {\n    <button\n      ng-doc-button-icon-transparent\n      type=\"button\"\n      size=\"small\"\n      class=\"ng-doc-list-control-reset\"\n      data-ng-doc-list-reset\n      [rounded]=\"false\"\n      [attr.aria-label]=\"texts.resetToDefault\"\n      [disabled]=\"disabled\"\n      (click)=\"reset()\">\n      <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n    </button>\n  }\n  <!-- The dropdown's host takes the focus while it is open, to move it into the overlay. The rows\n       here are never focused (the text field names the highlighted one), so the host is inert. -->\n  <span class=\"ng-doc-list-control-dropdown\" inert>\n    <ng-doc-dropdown\n      [content]=\"panel\"\n      [positions]=\"['bottom-center', 'top-center']\"\n      [maxHeight]=\"240\"\n      (beforeClose)=\"expanded.set(false)\"></ng-doc-dropdown>\n  </span>\n</div>\n@if (invalid() || editInvalid()) {\n  <span class=\"ng-doc-list-control-error\" [id]=\"id + '-error'\">{{ texts.invalidNumber }}</span>\n}\n<span hidden [id]=\"id + '-keys'\">{{ texts.itemKeys }}</span>\n<span hidden [id]=\"id + '-edit-keys'\">{{ texts.editKeys }}</span>\n<span class=\"ng-doc-list-control-status\" role=\"status\">{{ announcement() }}</span>\n\n<ng-template #panel>\n  <!-- A press on a row keeps the focus in the text field. -->\n  <div\n    class=\"ng-doc-list-control-panel\"\n    [style.width.px]=\"panelWidth()\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (rows().length) {\n      <div\n        role=\"listbox\"\n        class=\"ng-doc-list-control-rows\"\n        [id]=\"id + '-rows'\"\n        [attr.aria-label]=\"texts.suggestions\"\n        [attr.aria-multiselectable]=\"freeText ? null : 'true'\">\n        @for (row of rows(); track $index) {\n          <div\n            role=\"option\"\n            class=\"ng-doc-list-control-row\"\n            [id]=\"rowId($index)\"\n            [attr.data-ng-doc-list-row]=\"row.kind\"\n            [attr.data-ng-doc-highlighted]=\"highlighted() === $index\"\n            [attr.aria-selected]=\"freeText ? highlighted() === $index : row.selected\"\n            (pointerenter)=\"highlighted.set($index)\"\n            (click)=\"pick(row)\">\n            <span class=\"ng-doc-list-control-row-text\">\n              {{ row.kind === 'add' ? texts.addValue({ value: row.label }) : row.label || '\"\"' }}\n            </span>\n            @if (row.selected) {\n              <ng-doc-icon\n                class=\"ng-doc-list-control-check\"\n                icon=\"check\"\n                aria-hidden=\"true\"></ng-doc-icon>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"ng-doc-list-control-no-matches\" role=\"status\">{{ texts.noMatches }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--ng-doc-space-1);width:100%;min-width:0}.ng-doc-list-control-box{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;min-width:0;min-height:var(--ng-doc-input-height);padding:5px var(--ng-doc-space-1) 5px 5px;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);background-color:var(--ng-doc-input-background-color);cursor:text}.ng-doc-list-control-box:hover:not([data-ng-doc-disabled=true]){border:var(--ng-doc-input-border-hover)}.ng-doc-list-control-box:has(:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-list-control-box[data-ng-doc-invalid=true],.ng-doc-list-control-box[data-ng-doc-invalid=true]:hover{border-color:var(--ng-doc-alert)}.ng-doc-list-control-box[data-ng-doc-disabled=true]{cursor:default;opacity:.6}.ng-doc-list-control-flow{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.ng-doc-list-control-chips{display:contents;margin:0;padding:0;list-style:none}.ng-doc-list-control-item{display:flex;min-width:0;max-width:100%}.ng-doc-list-control-item[data-ng-doc-dragging=true] .ng-doc-list-control-chip{opacity:.5}.ng-doc-list-control-chip{gap:2px;height:24px;max-width:100%;padding:0 2px 0 0;overflow:hidden;--ng-doc-font-size: 13px;--ng-doc-line-height: 24px}.ng-doc-list-control-chip-text{min-width:0;overflow:hidden;padding-left:var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);text-overflow:ellipsis;outline:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.ng-doc-list-control-chip-text:focus-visible{box-shadow:var(--ng-doc-focus-ring)}[data-ng-doc-disabled=true] .ng-doc-list-control-chip-text{cursor:default}.ng-doc-list-control-empty-string{font-family:var(--ng-doc-code-font);opacity:.7}.ng-doc-list-control-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:var(--ng-doc-radius-sm);background:transparent;color:inherit;cursor:pointer;opacity:.6;--ng-doc-icon-width: 12px;--ng-doc-icon-height: 12px}.ng-doc-list-control-remove ::ng-deep svg{width:12px;height:12px}.ng-doc-list-control-remove:hover:not(:disabled){opacity:1;background:var(--ng-doc-hover-background)}.ng-doc-list-control-remove:disabled{cursor:default}.ng-doc-list-control-edit{box-sizing:content-box;height:22px;min-width:2ch;max-width:100%;margin:0;padding:0 var(--ng-doc-space-2);border:1px solid var(--ng-doc-primary);border-radius:var(--ng-doc-radius-sm);outline:none;background:var(--ng-doc-input-background-color);color:var(--ng-doc-text);font:inherit;font-size:13px}.ng-doc-list-control-edit[aria-invalid=true]{border-color:var(--ng-doc-alert)}.ng-doc-list-control-literal{padding:0 var(--ng-doc-space-1);font-family:var(--ng-doc-code-font);font-size:13px;line-height:24px;color:var(--ng-doc-text-muted)}.ng-doc-list-control-field{flex:1 1 32px;min-width:32px;height:24px;margin:0;padding:0 var(--ng-doc-space-1);border:0;outline:none;background:transparent;color:var(--ng-doc-text);font-family:var(--ng-doc-font-family);font-size:14px}.ng-doc-list-control-field::placeholder{color:var(--ng-doc-text-muted)}.ng-doc-list-control-reset{flex:none}.ng-doc-list-control-dropdown{display:contents}.ng-doc-list-control-error{font-size:12px;line-height:16px;color:var(--ng-doc-alert)}.ng-doc-list-control-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-list-control-panel{box-sizing:border-box;min-width:160px;max-width:100vw;padding:var(--ng-doc-space-1) 0;font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px}.ng-doc-list-control-row{display:flex;align-items:center;gap:var(--ng-doc-space-2);padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text);cursor:pointer}.ng-doc-list-control-row[data-ng-doc-highlighted=true]{background:var(--ng-doc-hover-background)}.ng-doc-list-control-row[data-ng-doc-list-row=add]{color:var(--ng-doc-heading-color);font-weight:500}.ng-doc-list-control-row[aria-selected=true]:not([data-ng-doc-list-row=add]){color:var(--ng-doc-heading-color)}.ng-doc-list-control-row-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-list-control-check{flex:none;--ng-doc-icon-color: var(--ng-doc-primary)}.ng-doc-list-control-no-matches{padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text-muted)}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocDropdownComponent, selector: "ng-doc-dropdown", inputs: ["content", "origin", "closeIfOutsideClick", "closeIfInnerClick", "withArrow", "borderOffset", "panelClass", "contactBorder", "hasBackdrop", "positions", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"] }, { kind: "directive", type: NgDocDropdownOriginDirective, selector: "[ngDocDropdownOrigin]", exportAs: ["ngDocDropdownOrigin"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocTypeAliasListControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-type-alias-list-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: LIST_CONTROL_IMPORTS, template: "<!-- The chips and the text field share one field-styled box, which the dropdown is attached to. -->\n<div\n  #fieldBox\n  class=\"ng-doc-list-control-box\"\n  ngDocDropdownOrigin\n  [attr.data-ng-doc-invalid]=\"invalid() || editInvalid()\"\n  [attr.data-ng-doc-disabled]=\"disabled\"\n  (click)=\"fieldClick($event, field)\">\n  <div class=\"ng-doc-list-control-flow\">\n    <!-- `display: contents` lets the chips and the text field wrap as one line of content. -->\n    <ul class=\"ng-doc-list-control-chips\" role=\"list\">\n      @for (item of shownItems(); track $index) {\n        <li\n          class=\"ng-doc-list-control-item\"\n          [attr.data-ng-doc-list-item]=\"$index\"\n          [attr.data-ng-doc-dragging]=\"dragIndex() === $index\">\n          @if (editing() === $index) {\n            <input\n              class=\"ng-doc-list-control-edit\"\n              data-ng-doc-list-edit\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              [size]=\"editText().length || 1\"\n              [value]=\"editText()\"\n              [attr.aria-label]=\"texts.editItem({ item: chipText(item) })\"\n              [attr.aria-invalid]=\"editInvalid() ? 'true' : null\"\n              [attr.aria-describedby]=\"editInvalid() ? id + '-error' : null\"\n              (input)=\"editText.set(edit.value)\"\n              (keydown)=\"editKeydown($event)\"\n              (blur)=\"editBlur()\"\n              #edit />\n          } @else {\n            <ng-doc-tag class=\"ng-doc-list-control-chip\" mod=\"light\">\n              <span\n                class=\"ng-doc-list-control-chip-text\"\n                data-ng-doc-list-chip\n                [class.ng-doc-list-control-empty-string]=\"labelOf(item) === ''\"\n                [attr.role]=\"freeText ? 'button' : null\"\n                [attr.tabindex]=\"\n                  disabled ? null : $index === tabStop() || ($last && tabStop() > $index) ? 0 : -1\n                \"\n                [attr.aria-describedby]=\"\n                  freeText ? id + '-edit-keys ' + id + '-keys' : id + '-keys'\n                \"\n                (focus)=\"tabStop.set($index)\"\n                (keydown)=\"chipKeydown($event, $index)\"\n                (dblclick)=\"startEdit($index)\"\n                (pointerdown)=\"chipPointerDown($event, $index)\"\n                (pointermove)=\"chipPointerMove($event)\"\n                (pointerup)=\"chipPointerUp($event)\"\n                (pointercancel)=\"cancelDrag()\"\n                >{{ chipText(item) }}</span\n              >\n              <button\n                type=\"button\"\n                class=\"ng-doc-list-control-remove\"\n                data-ng-doc-list-remove\n                tabindex=\"-1\"\n                [attr.aria-label]=\"texts.removeItem({ item: chipText(item) })\"\n                [disabled]=\"disabled\"\n                (click)=\"remove($index)\">\n                <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n              </button>\n            </ng-doc-tag>\n          }\n        </li>\n      }\n    </ul>\n    @if (literal(); as literal) {\n      <code class=\"ng-doc-list-control-literal\" data-ng-doc-list-literal>{{ literal }}</code>\n    }\n    <input\n      #field\n      class=\"ng-doc-list-control-field\"\n      data-ng-doc-list-field\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      spellcheck=\"false\"\n      autocomplete=\"off\"\n      [value]=\"text()\"\n      [placeholder]=\"items().length ? '' : texts.addItem\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"texts.addItem\"\n      [attr.aria-expanded]=\"panelOpen()\"\n      [attr.aria-controls]=\"id + '-rows'\"\n      [attr.aria-activedescendant]=\"panelOpen() && highlighted() >= 0 ? rowId(highlighted()) : null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [attr.aria-describedby]=\"invalid() ? id + '-error' : null\"\n      (input)=\"type(field.value)\"\n      (keydown)=\"fieldKeydown($event, field)\" />\n  </div>\n  @if (canReset()) {\n    <button\n      ng-doc-button-icon-transparent\n      type=\"button\"\n      size=\"small\"\n      class=\"ng-doc-list-control-reset\"\n      data-ng-doc-list-reset\n      [rounded]=\"false\"\n      [attr.aria-label]=\"texts.resetToDefault\"\n      [disabled]=\"disabled\"\n      (click)=\"reset()\">\n      <ng-doc-icon icon=\"x\" aria-hidden=\"true\"></ng-doc-icon>\n    </button>\n  }\n  <!-- The dropdown's host takes the focus while it is open, to move it into the overlay. The rows\n       here are never focused (the text field names the highlighted one), so the host is inert. -->\n  <span class=\"ng-doc-list-control-dropdown\" inert>\n    <ng-doc-dropdown\n      [content]=\"panel\"\n      [positions]=\"['bottom-center', 'top-center']\"\n      [maxHeight]=\"240\"\n      (beforeClose)=\"expanded.set(false)\"></ng-doc-dropdown>\n  </span>\n</div>\n@if (invalid() || editInvalid()) {\n  <span class=\"ng-doc-list-control-error\" [id]=\"id + '-error'\">{{ texts.invalidNumber }}</span>\n}\n<span hidden [id]=\"id + '-keys'\">{{ texts.itemKeys }}</span>\n<span hidden [id]=\"id + '-edit-keys'\">{{ texts.editKeys }}</span>\n<span class=\"ng-doc-list-control-status\" role=\"status\">{{ announcement() }}</span>\n\n<ng-template #panel>\n  <!-- A press on a row keeps the focus in the text field. -->\n  <div\n    class=\"ng-doc-list-control-panel\"\n    [style.width.px]=\"panelWidth()\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (rows().length) {\n      <div\n        role=\"listbox\"\n        class=\"ng-doc-list-control-rows\"\n        [id]=\"id + '-rows'\"\n        [attr.aria-label]=\"texts.suggestions\"\n        [attr.aria-multiselectable]=\"freeText ? null : 'true'\">\n        @for (row of rows(); track $index) {\n          <div\n            role=\"option\"\n            class=\"ng-doc-list-control-row\"\n            [id]=\"rowId($index)\"\n            [attr.data-ng-doc-list-row]=\"row.kind\"\n            [attr.data-ng-doc-highlighted]=\"highlighted() === $index\"\n            [attr.aria-selected]=\"freeText ? highlighted() === $index : row.selected\"\n            (pointerenter)=\"highlighted.set($index)\"\n            (click)=\"pick(row)\">\n            <span class=\"ng-doc-list-control-row-text\">\n              {{ row.kind === 'add' ? texts.addValue({ value: row.label }) : row.label || '\"\"' }}\n            </span>\n            @if (row.selected) {\n              <ng-doc-icon\n                class=\"ng-doc-list-control-check\"\n                icon=\"check\"\n                aria-hidden=\"true\"></ng-doc-icon>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"ng-doc-list-control-no-matches\" role=\"status\">{{ texts.noMatches }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--ng-doc-space-1);width:100%;min-width:0}.ng-doc-list-control-box{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;min-width:0;min-height:var(--ng-doc-input-height);padding:5px var(--ng-doc-space-1) 5px 5px;border:var(--ng-doc-input-border);border-radius:var(--ng-doc-floated-border-radius);background-color:var(--ng-doc-input-background-color);cursor:text}.ng-doc-list-control-box:hover:not([data-ng-doc-disabled=true]){border:var(--ng-doc-input-border-hover)}.ng-doc-list-control-box:has(:focus-visible){box-shadow:var(--ng-doc-focus-ring)}.ng-doc-list-control-box[data-ng-doc-invalid=true],.ng-doc-list-control-box[data-ng-doc-invalid=true]:hover{border-color:var(--ng-doc-alert)}.ng-doc-list-control-box[data-ng-doc-disabled=true]{cursor:default;opacity:.6}.ng-doc-list-control-flow{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.ng-doc-list-control-chips{display:contents;margin:0;padding:0;list-style:none}.ng-doc-list-control-item{display:flex;min-width:0;max-width:100%}.ng-doc-list-control-item[data-ng-doc-dragging=true] .ng-doc-list-control-chip{opacity:.5}.ng-doc-list-control-chip{gap:2px;height:24px;max-width:100%;padding:0 2px 0 0;overflow:hidden;--ng-doc-font-size: 13px;--ng-doc-line-height: 24px}.ng-doc-list-control-chip-text{min-width:0;overflow:hidden;padding-left:var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-sm);text-overflow:ellipsis;outline:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.ng-doc-list-control-chip-text:focus-visible{box-shadow:var(--ng-doc-focus-ring)}[data-ng-doc-disabled=true] .ng-doc-list-control-chip-text{cursor:default}.ng-doc-list-control-empty-string{font-family:var(--ng-doc-code-font);opacity:.7}.ng-doc-list-control-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:var(--ng-doc-radius-sm);background:transparent;color:inherit;cursor:pointer;opacity:.6;--ng-doc-icon-width: 12px;--ng-doc-icon-height: 12px}.ng-doc-list-control-remove ::ng-deep svg{width:12px;height:12px}.ng-doc-list-control-remove:hover:not(:disabled){opacity:1;background:var(--ng-doc-hover-background)}.ng-doc-list-control-remove:disabled{cursor:default}.ng-doc-list-control-edit{box-sizing:content-box;height:22px;min-width:2ch;max-width:100%;margin:0;padding:0 var(--ng-doc-space-2);border:1px solid var(--ng-doc-primary);border-radius:var(--ng-doc-radius-sm);outline:none;background:var(--ng-doc-input-background-color);color:var(--ng-doc-text);font:inherit;font-size:13px}.ng-doc-list-control-edit[aria-invalid=true]{border-color:var(--ng-doc-alert)}.ng-doc-list-control-literal{padding:0 var(--ng-doc-space-1);font-family:var(--ng-doc-code-font);font-size:13px;line-height:24px;color:var(--ng-doc-text-muted)}.ng-doc-list-control-field{flex:1 1 32px;min-width:32px;height:24px;margin:0;padding:0 var(--ng-doc-space-1);border:0;outline:none;background:transparent;color:var(--ng-doc-text);font-family:var(--ng-doc-font-family);font-size:14px}.ng-doc-list-control-field::placeholder{color:var(--ng-doc-text-muted)}.ng-doc-list-control-reset{flex:none}.ng-doc-list-control-dropdown{display:contents}.ng-doc-list-control-error{font-size:12px;line-height:16px;color:var(--ng-doc-alert)}.ng-doc-list-control-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-list-control-panel{box-sizing:border-box;min-width:160px;max-width:100vw;padding:var(--ng-doc-space-1) 0;font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px}.ng-doc-list-control-row{display:flex;align-items:center;gap:var(--ng-doc-space-2);padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text);cursor:pointer}.ng-doc-list-control-row[data-ng-doc-highlighted=true]{background:var(--ng-doc-hover-background)}.ng-doc-list-control-row[data-ng-doc-list-row=add]{color:var(--ng-doc-heading-color);font-weight:500}.ng-doc-list-control-row[aria-selected=true]:not([data-ng-doc-list-row=add]){color:var(--ng-doc-heading-color)}.ng-doc-list-control-row-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-list-control-check{flex:none;--ng-doc-icon-color: var(--ng-doc-primary)}.ng-doc-list-control-no-matches{padding:4px calc(var(--ng-doc-base-gutter) * 1.5);color:var(--ng-doc-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], isManual: [{ type: i0.Input, args: [{ isSignal: true, alias: "isManual", required: false }] }] } });
+/**
+ * Whether a value can be an item of an array control.
+ * @param value - The value.
+ */
+function isListItem(value) {
+    return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+}
+/**
+ * The items with one of them moved to another position.
+ * @param items - The items.
+ * @param from - The position of the item.
+ * @param to - Its new position.
+ */
+function moveItem(items, from, to) {
+    const order = [...items];
+    const [item] = order.splice(from, 1);
+    order.splice(to, 0, item);
+    return order;
+}
+/**
+ * Whether two values of a list control hold the same items in the same order. `undefined` and
+ * `null` are values of their own.
+ * @param a - The first value.
+ * @param b - The second value.
+ */
+function sameItems(a, b) {
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return (a.length === b.length && a.every((item, index) => Object.is(item, b[index])));
+    }
+    return a === b;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocListControl, NgDocNumberListControlComponent, NgDocStringListControlComponent, NgDocTypeAliasListControlComponent };
+//# sourceMappingURL=ng-doc-app-type-controls-list-control.mjs.map