@agorapulse/ui-components 22.3.0 → 22.4.0

package/fesm2022/agorapulse-ui-components-overflow-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-overflow-list.mjs","sources":["../../../libs/ui-components/overflow-list/src/overflow-list.component.ts","../../../libs/ui-components/overflow-list/src/overflow-list.component.html","../../../libs/ui-components/overflow-list/src/agorapulse-ui-components-overflow-list.ts"],"sourcesContent":["import { AvatarComponent, AvatarNetwork } from '@agorapulse/ui-components/avatar';\nimport { LabelComponent } from '@agorapulse/ui-components/labels';\nimport {\n    OverflowBaseComponent,\n    OverflowBaseItemDirective,\n    OverflowBaseLessDirective,\n    OverflowBaseMode,\n    OverflowBaseMoreDirective,\n} from '@agorapulse/ui-components/overflow-base';\nimport { TagColor, TagComponent } from '@agorapulse/ui-components/tag';\nimport { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\n\n/** How each item renders: an `ap-label`, or an `ap-tag` in `tagColor`. */\nexport type OverflowListDisplayType = 'label' | 'tag';\n\n/**\n * What becomes of the items that do not fit on the line.\n * - `tooltip`: one line, then a \"+N\" whose tooltip lists the hidden items, for a row whose height is fixed.\n * - `expand`: one line, then a \"+N labels\" link that unfolds the list, folded back by \"See less\".\n * - `wrap`: every item shows and the list wraps.\n * - `count`: one line, then a \"+N\" that does nothing, for a control that already shows the hidden items, like a select field.\n */\nexport type OverflowListMode = OverflowBaseMode;\n\n/** An item that carries more than its text. The avatar and the symbol show in the `tag` display only. */\nexport interface OverflowListItem {\n    text: string;\n    /** Picture of the avatar shown before the text. */\n    avatarUrl?: string;\n    /** Network of the avatar; on its own, the avatar shows the initials and the network. */\n    network?: AvatarNetwork;\n    /** Symbol shown before the text, when the item has no avatar. */\n    symbolId?: string;\n    /** Color of this item's tag, instead of `tagColor`. */\n    tagColor?: TagColor;\n    /** `false` keeps this item from being removed, even when the list is `removable`. */\n    removable?: boolean;\n}\n\ntype OverflowListEntry<T> = OverflowListItem & { item: T };\n\nfunction toEntry<T extends string | OverflowListItem>(item: T): OverflowListEntry<T> {\n    return typeof item === 'string' ? { item, text: item } : { ...(item as OverflowListItem), item };\n}\n\n/**\n * A list of labels or tags that shows as many as fit on one line, then a \"+N\" (see `mode`).\n * The widths are measured, never estimated, and the \"+N\" click never reaches the ancestors,\n * so the list works inside a clickable row.\n *\n * The host takes the width its container gives it: `display: block`, or `flex: 1; min-width: 0` in a flex parent.\n *\n * @example\n * ```html\n * <ap-overflow-list [items]=\"labels\" />\n * <ap-overflow-list displayType=\"tag\" mode=\"wrap\" removable [items]=\"profiles\" (remove)=\"onRemove($event)\" />\n * ```\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-overflow-list',\n    templateUrl: './overflow-list.component.html',\n    styleUrls: ['./overflow-list.component.scss'],\n    imports: [\n        AvatarComponent,\n        LabelComponent,\n        OverflowBaseComponent,\n        OverflowBaseItemDirective,\n        OverflowBaseLessDirective,\n        OverflowBaseMoreDirective,\n        SymbolComponent,\n        TagComponent,\n    ],\n})\nexport class OverflowListComponent<T extends string | OverflowListItem = string | OverflowListItem> {\n    /** The items, in display order: the hidden ones are always the last. */\n    readonly items = input.required<readonly T[]>();\n    /** How each item renders. */\n    readonly displayType = input<OverflowListDisplayType>('label');\n    /** Color of the tags, when `displayType` is `tag`. */\n    readonly tagColor = input<TagColor>('grey');\n    /** Whether the avatars of the tags are round. */\n    readonly roundedAvatar = input(true);\n    /** What becomes of the items that do not fit on the line. */\n    readonly mode = input<OverflowListMode>('tooltip');\n    /** Most items shown whatever the width; `wrap` shows them all. */\n    readonly max = input<number | undefined>(undefined);\n    /** What opens the tooltip of the hidden items, in `tooltip` mode. */\n    readonly trigger = input<'hover' | 'click'>('hover');\n    /** Shows a remove button on each item, which emits `remove`. */\n    readonly removable = input(false, { transform: booleanAttribute });\n    /** Text after the count of the \"+N\" link, in `expand` mode. */\n    readonly moreText = input<string>('labels');\n    /** Text of the link that folds an unfolded `expand` list back. */\n    readonly lessText = input<string>('See less');\n    /** Identifies an item across changes of `items`, so that its element is kept; the item itself by default. */\n    readonly trackBy = input<(item: T) => unknown>(item => item);\n\n    /** The item whose remove button was clicked, as it was given. */\n    readonly remove = output<T>();\n\n    protected readonly entries = computed(() => this.items().map(item => toEntry(item)));\n    protected readonly entryText = (entry: OverflowListEntry<T>): string => entry.text;\n    protected readonly entryTrack = (entry: OverflowListEntry<T>): unknown => this.trackBy()(entry.item);\n\n    protected isRemovable(entry: OverflowListEntry<T>): boolean {\n        return this.removable() && entry.removable !== false;\n    }\n}\n","<ap-overflow-base\n    [items]=\"entries()\"\n    [itemText]=\"entryText\"\n    [trackBy]=\"entryTrack\"\n    [mode]=\"mode()\"\n    [max]=\"max()\"\n    [trigger]=\"trigger()\">\n    <ng-template\n        let-entry\n        [apOverflowBaseItem]=\"entries()\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                [color]=\"entry.tagColor ?? tagColor()\"\n                [clearable]=\"isRemovable(entry)\"\n                (clear)=\"remove.emit(entry.item)\">\n                @if (entry.avatarUrl || entry.network) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"entry.avatarUrl\"\n                        [username]=\"entry.text\"\n                        [showInitials]=\"true\"\n                        [network]=\"entry.network\" />\n                } @else if (entry.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [symbolId]=\"entry.symbolId\" />\n                }\n                {{ entry.text }}\n            </ap-tag>\n        } @else {\n            <ap-label\n                [content]=\"entry.text\"\n                [removable]=\"isRemovable(entry)\"\n                (remove)=\"remove.emit(entry.item)\" />\n        }\n    </ng-template>\n    <ng-template\n        let-count\n        apOverflowBaseMore>\n        @if (mode() === 'expand') {\n            <span class=\"ap-link standalone\">+{{ count }} {{ moreText() }}</span>\n        } @else if (displayType() === 'tag') {\n            <ap-tag [color]=\"tagColor()\">+{{ count }}</ap-tag>\n        } @else {\n            <ap-label [content]=\"'+' + count\" />\n        }\n    </ng-template>\n    <ng-template apOverflowBaseLess>\n        <span class=\"ap-link standalone\">{{ lessText() }}</span>\n    </ng-template>\n</ap-overflow-base>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;AA0CA,SAAS,OAAO,CAAsC,IAAO,EAAA;IACzD,OAAO,OAAO,IAAI,KAAK,QAAQ,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAI,IAAyB,EAAE,IAAI,EAAE;AACpG;AAEA;;;;;;;;;;;;AAYG;MAiBU,qBAAqB,CAAA;;IAErB,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAgB;;IAEtC,WAAW,GAAG,KAAK,CAA0B,OAAO;oFAAC;;IAErD,QAAQ,GAAG,KAAK,CAAW,MAAM;iFAAC;;IAElC,aAAa,GAAG,KAAK,CAAC,IAAI;sFAAC;;IAE3B,IAAI,GAAG,KAAK,CAAmB,SAAS;6EAAC;;IAEzC,GAAG,GAAG,KAAK,CAAqB,SAAS;4EAAC;;IAE1C,OAAO,GAAG,KAAK,CAAoB,OAAO;gFAAC;;IAE3C,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAEzD,QAAQ,GAAG,KAAK,CAAS,QAAQ;iFAAC;;IAElC,QAAQ,GAAG,KAAK,CAAS,UAAU;iFAAC;;AAEpC,IAAA,OAAO,GAAG,KAAK,CAAuB,IAAI,IAAI,IAAI;gFAAC;;IAGnD,MAAM,GAAG,MAAM,EAAK;IAEV,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;gFAAC;IACjE,SAAS,GAAG,CAAC,KAA2B,KAAa,KAAK,CAAC,IAAI;AAC/D,IAAA,UAAU,GAAG,CAAC,KAA2B,KAAc,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;AAE1F,IAAA,WAAW,CAAC,KAA2B,EAAA;QAC7C,OAAO,IAAI,CAAC,SAAS,EAAE,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK;IACxD;uGAjCS,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,k/CC3ElC,63DAoDA,EAAA,MAAA,EAAA,CAAA,oCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDaQ,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,KAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,EAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,qBAAqB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,KAAA,EAAA,KAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACrB,yBAAyB,4GACzB,yBAAyB,EAAA,QAAA,EAAA,iCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACzB,yBAAyB,EAAA,QAAA,EAAA,iCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACzB,eAAe,sHACf,YAAY,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGP,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAhBjC,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,kBAAkB,EAAA,OAAA,EAGnB;wBACL,eAAe;wBACf,cAAc;wBACd,qBAAqB;wBACrB,yBAAyB;wBACzB,yBAAyB;wBACzB,yBAAyB;wBACzB,eAAe;wBACf,YAAY;AACf,qBAAA,EAAA,QAAA,EAAA,63DAAA,EAAA,MAAA,EAAA,CAAA,oCAAA,CAAA,EAAA;;;AEzEL;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-select.mjs

@@ -1,18 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, ElementRef, Renderer2, ViewContainerRef, effect, Directive, booleanAttribute, HostListener, ViewChild, EventEmitter, Output, signal, computed, viewChild, afterNextRender, NgModule } from '@angular/core';
+import { inject, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, ElementRef, Renderer2, ViewContainerRef, effect, Directive, booleanAttribute, HostListener, ViewChild, EventEmitter, Output, signal, computed, afterNextRender, NgModule } from '@angular/core';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import { SymbolRegistry, apPlus, SymbolComponent, apCheck } from '@agorapulse/ui-symbol';
 import { BadgeComponent } from '@agorapulse/ui-components/badge';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
 import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
 import { AvatarComponent } from '@agorapulse/ui-components/avatar';
-import { StopPropagationDirective, OverflowCountDirective, OverflowCounterDirective, OverflowItemDirective } from '@agorapulse/ui-components/directives';
+import { StopPropagationDirective } from '@agorapulse/ui-components/directives';
 import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { Subscription, BehaviorSubject, filter } from 'rxjs';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { OverflowListComponent } from '@agorapulse/ui-components/overflow-list';
 import { LabelComponent } from '@agorapulse/ui-components/labels';
 import { TagComponent } from '@agorapulse/ui-components/tag';
 
@@ -763,36 +764,37 @@ class SelectLabelMultipleComponent {
      * `optional` so the component still works when rendered outside a ng-select.
      */
     ngSelect = inject(NgSelectComponent, { optional: true });
+    host = inject(ElementRef);
     /** True when the whole select is disabled/readonly — hides every tag/label remove button. */
     selectDisabled = computed(() => this.disabled() || (this.ngSelect?.disabled() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectDisabled" }] : /* istanbul ignore next */ []));
     selectedLabels = computed(() => this.selectedItems().map(item => ({
-        label: this.bindLabel() ? item[this.bindLabel()] : item,
-        avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] : '',
-        symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
-        value: item,
+        text: this.bindLabel() ? item[this.bindLabel()] : item,
+        avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] || undefined : undefined,
+        symbolId: this.bindSymbolId() ? (item[this.bindSymbolId()] ?? undefined) : undefined,
         network: this.bindNetwork() ? item[this.bindNetwork()] : undefined,
         tagColor: this.bindTagColor() ? item[this.bindTagColor()] : undefined,
+        removable: !item.disabled,
+        value: item,
     })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
-    trackByItem = (_, item) => (this.bindValue() ? item.value[this.bindValue()] : item.value);
-    mainContainer = viewChild.required('mainContainer', { read: ElementRef });
+    trackByValue = (label) => (this.bindValue() ? label.value[this.bindValue()] : label.value);
     // Overflow is shown via the "+N" chip, so this field must never scroll horizontally.
     // ng-select re-focuses its off-screen search input after every change; without this the
     // browser would scroll that input into view and shove the chip row out of the field.
     pinHorizontalScroll = afterNextRender(() => {
-        const container = this.mainContainer().nativeElement.closest('.ng-value-container');
+        const container = this.host.nativeElement.closest('.ng-value-container');
         if (!container)
             return;
         container.addEventListener('scroll', () => (container.scrollLeft = 0), { passive: true });
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", isSignal: true, isRequired: false, transformFunction: null }, bindTagColor: { classPropertyName: "bindTagColor", publicName: "bindTagColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!--\n    The \"+N\" chip lives in the measured row, not beside it: `apOverflowCount` reserves its width and\n    takes the surplus out of the flow, so nothing has to be clipped around it.\n\n    The items deliberately carry no `item` class. `.ng-select.ap-select \u2026 .multiple-item .item` is\n    declared `visibility: hidden` by both the theme and legacy/select's own global stylesheet, for the\n    legacy select which still toggles visibility itself; with the directive driving `display` instead,\n    inheriting that default would hide every item for good.\n-->\n<div\n    #mainContainer\n    #overflow=\"apOverflowCount\"\n    class=\"multiple-item\"\n    apOverflowCount>\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                apOverflowItem\n                color=\"blue\"\n                [removable]=\"!item.value.disabled && !selectDisabled()\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                apOverflowItem\n                class=\"text-item\"\n                [clearable]=\"!item.value.disabled && !selectDisabled()\"\n                [color]=\"item.tagColor ?? tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl || item.network) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n\n    @if (overflow.hiddenCount() > 0) {\n        @if (displayType() === 'tag') {\n            <ap-tag\n                apOverflowCounter\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ overflow.hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                apOverflowCounter\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + overflow.hiddenCount()\" />\n        }\n    }\n</div>\n", styles: ["ap-select-label-multiple{display:flex;width:100%}ap-select-label-multiple .multiple-item{overflow:hidden;flex:1;min-width:0}ap-select-label-multiple .multiple-item>*{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", isSignal: true, isRequired: false, transformFunction: null }, bindTagColor: { classPropertyName: "bindTagColor", publicName: "bindTagColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<ap-overflow-list\n    mode=\"count\"\n    [items]=\"selectedLabels()\"\n    [displayType]=\"displayType()\"\n    [tagColor]=\"tagColor()\"\n    [roundedAvatar]=\"roundedAvatar()\"\n    [removable]=\"!selectDisabled()\"\n    [trackBy]=\"trackByValue\"\n    (remove)=\"removeItem.emit($event.value)\" />\n", styles: ["ap-select-label-multiple{display:flex;width:100%}ap-select-label-multiple ap-overflow-list{flex:1;overflow:hidden}\n"], dependencies: [{ kind: "component", type: OverflowListComponent, selector: "ap-overflow-list", inputs: ["items", "displayType", "tagColor", "roundedAvatar", "mode", "max", "trigger", "removable", "moreText", "lessText", "trackBy"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-select-label-multiple', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent, SymbolComponent, OverflowCountDirective, OverflowCounterDirective, OverflowItemDirective], template: "<!--\n    The \"+N\" chip lives in the measured row, not beside it: `apOverflowCount` reserves its width and\n    takes the surplus out of the flow, so nothing has to be clipped around it.\n\n    The items deliberately carry no `item` class. `.ng-select.ap-select \u2026 .multiple-item .item` is\n    declared `visibility: hidden` by both the theme and legacy/select's own global stylesheet, for the\n    legacy select which still toggles visibility itself; with the directive driving `display` instead,\n    inheriting that default would hide every item for good.\n-->\n<div\n    #mainContainer\n    #overflow=\"apOverflowCount\"\n    class=\"multiple-item\"\n    apOverflowCount>\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                apOverflowItem\n                color=\"blue\"\n                [removable]=\"!item.value.disabled && !selectDisabled()\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                apOverflowItem\n                class=\"text-item\"\n                [clearable]=\"!item.value.disabled && !selectDisabled()\"\n                [color]=\"item.tagColor ?? tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl || item.network) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n\n    @if (overflow.hiddenCount() > 0) {\n        @if (displayType() === 'tag') {\n            <ap-tag\n                apOverflowCounter\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ overflow.hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                apOverflowCounter\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + overflow.hiddenCount()\" />\n        }\n    }\n</div>\n", styles: ["ap-select-label-multiple{display:flex;width:100%}ap-select-label-multiple .multiple-item{overflow:hidden;flex:1;min-width:0}ap-select-label-multiple .multiple-item>*{flex-shrink:0}\n"] }]
-        }], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindAvatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindAvatarUrl", required: false }] }], bindSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindSymbolId", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], bindNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindNetwork", required: false }] }], bindTagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindTagColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }], mainContainer: [{ type: i0.ViewChild, args: ['mainContainer', { ...{ read: ElementRef }, isSignal: true }] }] } });
+            args: [{ selector: 'ap-select-label-multiple', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [OverflowListComponent], template: "<ap-overflow-list\n    mode=\"count\"\n    [items]=\"selectedLabels()\"\n    [displayType]=\"displayType()\"\n    [tagColor]=\"tagColor()\"\n    [roundedAvatar]=\"roundedAvatar()\"\n    [removable]=\"!selectDisabled()\"\n    [trackBy]=\"trackByValue\"\n    (remove)=\"removeItem.emit($event.value)\" />\n", styles: ["ap-select-label-multiple{display:flex;width:100%}ap-select-label-multiple ap-overflow-list{flex:1;overflow:hidden}\n"] }]
+        }], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindAvatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindAvatarUrl", required: false }] }], bindSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindSymbolId", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], bindNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindNetwork", required: false }] }], bindTagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindTagColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
 
 class SelectLabelSingleComponent {
     displayType = input('text', /* @ts-ignore */