@agorapulse/ui-components 22.2.12 → 22.4.0

package/fesm2022/agorapulse-ui-components-overflow-base.mjs

@@ -0,0 +1,193 @@
+import { OverflowCountDirective, OverflowCounterDirective, OverflowItemDirective, StopPropagationDirective } from '@agorapulse/ui-components/directives';
+import { CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, input, Directive, contentChild, signal, computed, viewChild, afterRenderEffect, ChangeDetectionStrategy, Component } from '@angular/core';
+
+let nextId = 0;
+/**
+ * Template of one item, rendered in the row and again in the tooltip that lists the hidden ones.
+ *
+ * Bind it to the same list as `ap-overflow-base` to type `let-item`; without the binding the item is `unknown`.
+ *
+ * @example
+ * ```html
+ * <ng-template let-label [apOverflowBaseItem]="labels">
+ *     <ap-label [content]="label" />
+ * </ng-template>
+ * ```
+ */
+class OverflowBaseItemDirective {
+    templateRef = inject(TemplateRef);
+    /** The list the template renders, read only to type the template context. */
+    apOverflowBaseItem = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "apOverflowBaseItem" }] : /* istanbul ignore next */ []));
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: OverflowBaseItemDirective, isStandalone: true, selector: "ng-template[apOverflowBaseItem]", inputs: { apOverflowBaseItem: { classPropertyName: "apOverflowBaseItem", publicName: "apOverflowBaseItem", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[apOverflowBaseItem]',
+                }]
+        }], propDecorators: { apOverflowBaseItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "apOverflowBaseItem", required: false }] }] } });
+/**
+ * Replaces the default "+N" text, with a chip for instance. `let-count` is the number of hidden
+ * items; the button around it, its tooltip and its accessible name stay the list's.
+ */
+class OverflowBaseMoreDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseMoreDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowBaseMoreDirective, isStandalone: true, selector: "ng-template[apOverflowBaseMore]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseMoreDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[apOverflowBaseMore]',
+                }]
+        }] });
+/** Content of the button that folds an unfolded `expand` list back, "See less" for instance. Without it the list stays unfolded. */
+class OverflowBaseLessDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseLessDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: OverflowBaseLessDirective, isStandalone: true, selector: "ng-template[apOverflowBaseLess]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseLessDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[apOverflowBaseLess]',
+                }]
+        }] });
+/**
+ * Shows as many items as fit on one line, then a "+N" button: its tooltip lists the hidden items,
+ * rendered with the item template itself, or it unfolds the list (see `mode`). Built on
+ * `apOverflowCount`: the widths are measured, never estimated.
+ *
+ * The building block of `ap-overflow-list` and `ap-avatar-group`: use them for labels, tags and avatars,
+ * and this only for a kind of item they do not render.
+ *
+ * The host takes the width its container gives it: `display: block`, or `flex: 1; min-width: 0` in a
+ * flex parent. The "+N" click never reaches the ancestors, so the list works inside a clickable row.
+ *
+ * @example
+ * ```html
+ * <ap-overflow-base [items]="labels">
+ *     <ng-template let-label [apOverflowBaseItem]="labels">
+ *         <ap-label [content]="label" />
+ *     </ng-template>
+ * </ap-overflow-base>
+ * ```
+ */
+class OverflowBaseComponent {
+    /** The items, in display order: the hidden ones are always the last. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** What becomes of the items that do not fit on the line. */
+    mode = input('tooltip', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** What opens the tooltip of the hidden items, in `tooltip` mode. */
+    trigger = input('hover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    /** Most items shown whatever the width; `wrap` shows them all. */
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Space between two items, in pixels. Negative, the items overlap, like a stack of avatars. */
+    gap = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Text of an item, for the accessible description of the "+N" button. */
+    itemText = input(item => String(item), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemText" }] : /* istanbul ignore next */ []));
+    /** Maps an item to an entry of a `LIST` tooltip (avatar and name); without it the tooltip renders the item template. */
+    tooltipListItem = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipListItem" }] : /* istanbul ignore next */ []));
+    /** Identifies an item across changes of `items`, so that its element is kept; the item itself by default. */
+    trackBy = input(item => item, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    itemTemplate = contentChild.required(OverflowBaseItemDirective);
+    moreTemplate = contentChild(OverflowBaseMoreDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreTemplate" }] : /* istanbul ignore next */ []));
+    lessTemplate = contentChild(OverflowBaseLessDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lessTemplate" }] : /* istanbul ignore next */ []));
+    expanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    collapsing = computed(() => this.mode() !== 'wrap' && !(this.mode() === 'expand' && this.expanded()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsing" }] : /* istanbul ignore next */ []));
+    CustomTooltipType = CustomTooltipType;
+    namesId = `ap-overflow-base-names-${nextId++}`;
+    overflowCount = viewChild.required(OverflowCountDirective);
+    moreButton = viewChild('moreButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreButton" }] : /* istanbul ignore next */ []));
+    lessButton = viewChild('lessButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lessButton" }] : /* istanbul ignore next */ []));
+    /** The button that replaces the one just clicked, focused once rendered so the focus does not fall back to the page. */
+    pendingFocus = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingFocus" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => {
+            if (this.expanded() && this.overflowCount().hiddenCount() === 0) {
+                this.expanded.set(false);
+            }
+        });
+        afterRenderEffect(() => {
+            const pending = this.pendingFocus();
+            if (!pending) {
+                return;
+            }
+            const button = pending === 'more' ? this.moreButton() : this.lessButton();
+            const coming = pending === 'more' ? this.collapsing() && this.overflowCount().hiddenCount() > 0 : this.expanded();
+            if (button || !coming) {
+                button?.nativeElement.focus();
+                this.pendingFocus.set(undefined);
+            }
+        });
+    }
+    hiddenItems(hiddenCount) {
+        const items = this.items();
+        return items.slice(Math.max(0, items.length - hiddenCount));
+    }
+    hiddenNames(hidden) {
+        return hidden.map(item => this.itemText()(item)).join(', ');
+    }
+    listItems(hidden) {
+        const toListItem = this.tooltipListItem();
+        return toListItem ? hidden.map(item => toListItem(item)) : [];
+    }
+    onMore() {
+        if (this.mode() === 'expand') {
+            this.expanded.set(true);
+            this.pendingFocus.set(this.lessTemplate() ? 'less' : undefined);
+        }
+    }
+    onLess() {
+        this.expanded.set(false);
+        this.pendingFocus.set('more');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OverflowBaseComponent, isStandalone: true, selector: "ap-overflow-base", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, itemText: { classPropertyName: "itemText", publicName: "itemText", isSignal: true, isRequired: false, transformFunction: null }, tooltipListItem: { classPropertyName: "tooltipListItem", publicName: "tooltipListItem", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ap-overflow-base-gap": "gap() + 'px'" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: OverflowBaseItemDirective, descendants: true, isSignal: true }, { propertyName: "moreTemplate", first: true, predicate: OverflowBaseMoreDirective, descendants: true, isSignal: true }, { propertyName: "lessTemplate", first: true, predicate: OverflowBaseLessDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overflowCount", first: true, predicate: OverflowCountDirective, descendants: true, isSignal: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "lessButton", first: true, predicate: ["lessButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #overflow=\"apOverflowCount\"\n    class=\"overflow-row\"\n    apOverflowCount\n    [class.overflow-row-wrap]=\"!collapsing()\"\n    [collapse]=\"collapsing()\"\n    [gap]=\"gap()\"\n    [max]=\"max()\">\n    @for (item of items(); track trackBy()(item); let index = $index, count = $count) {\n        <div\n            class=\"overflow-item\"\n            apOverflowItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate().templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index, count }\" />\n        </div>\n    }\n    @if (collapsing() && overflow.hiddenCount() > 0) {\n        @let hidden = hiddenItems(overflow.hiddenCount());\n        @if (mode() === 'count') {\n            <span\n                class=\"overflow-more\"\n                apOverflowCounter>\n                <ng-container\n                    [ngTemplateOutlet]=\"moreContent\"\n                    [ngTemplateOutletContext]=\"{ $implicit: hidden.length }\" />\n            </span>\n        } @else {\n            <button\n                #moreButton\n                type=\"button\"\n                class=\"overflow-more\"\n                apOverflowCounter\n                apStopPropagation\n                [apTooltip]=\"tooltipListItem() ? '' : hiddenList\"\n                [apTooltipDisabled]=\"mode() !== 'tooltip'\"\n                [apTooltipType]=\"tooltipListItem() ? CustomTooltipType.LIST : CustomTooltipType.DEFAULT\"\n                [apTooltipListItems]=\"listItems(hidden)\"\n                [apTooltipTemplateContext]=\"{ $implicit: hidden }\"\n                [apTooltipTrigger]=\"trigger()\"\n                [attr.aria-expanded]=\"mode() === 'expand' ? false : null\"\n                [attr.aria-describedby]=\"namesId\"\n                (click)=\"onMore()\">\n                <ng-container\n                    [ngTemplateOutlet]=\"moreContent\"\n                    [ngTemplateOutletContext]=\"{ $implicit: hidden.length }\" />\n            </button>\n            <span\n                hidden\n                [id]=\"namesId\">\n                {{ hiddenNames(hidden) }}\n            </span>\n        }\n    }\n    @if (mode() === 'expand' && expanded() && lessTemplate(); as less) {\n        <button\n            #lessButton\n            type=\"button\"\n            class=\"overflow-less\"\n            apStopPropagation\n            aria-expanded=\"true\"\n            (click)=\"onLess()\">\n            <ng-container [ngTemplateOutlet]=\"less.templateRef\" />\n        </button>\n    }\n</div>\n\n<ng-template\n    #moreContent\n    let-count>\n    @if (moreTemplate(); as more) {\n        <ng-container\n            [ngTemplateOutlet]=\"more.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: count }\" />\n    } @else {\n        +{{ count }}\n    }\n</ng-template>\n\n<ng-template\n    #hiddenList\n    let-hidden>\n    <div class=\"overflow-hidden-items\">\n        @for (item of hidden; track trackBy()(item); let index = $index, count = $count) {\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate().templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index, count }\" />\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.overflow-row{display:flex;align-items:center;gap:max(var(--ap-overflow-base-gap),0px);min-width:0}.overflow-row.overflow-row-wrap{flex-wrap:wrap}.overflow-item{display:flex;flex-shrink:0;min-width:0}.overflow-row-wrap>.overflow-item{flex-shrink:1;max-width:100%}.overflow-item+.overflow-item,.overflow-more{margin-inline-start:min(var(--ap-overflow-base-gap),0px)}.overflow-more,.overflow-less{display:flex;flex-shrink:0}button.overflow-more,.overflow-less{padding:0;border:none;border-radius:var(--comp-label-border-radius);background:none;color:var(--sys-text-color-default);font:inherit;cursor:pointer}button.overflow-more:focus-visible,.overflow-less:focus-visible{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:-2px}.overflow-hidden-items{display:flex;flex-wrap:wrap;gap:var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible", "max", "collapse"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipArrow", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowBaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-overflow-base', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        OverflowCountDirective,
+                        OverflowCounterDirective,
+                        OverflowItemDirective,
+                        StopPropagationDirective,
+                        TooltipDirective,
+                    ], host: {
+                        '[style.--ap-overflow-base-gap]': "gap() + 'px'",
+                    }, template: "<div\n    #overflow=\"apOverflowCount\"\n    class=\"overflow-row\"\n    apOverflowCount\n    [class.overflow-row-wrap]=\"!collapsing()\"\n    [collapse]=\"collapsing()\"\n    [gap]=\"gap()\"\n    [max]=\"max()\">\n    @for (item of items(); track trackBy()(item); let index = $index, count = $count) {\n        <div\n            class=\"overflow-item\"\n            apOverflowItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate().templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index, count }\" />\n        </div>\n    }\n    @if (collapsing() && overflow.hiddenCount() > 0) {\n        @let hidden = hiddenItems(overflow.hiddenCount());\n        @if (mode() === 'count') {\n            <span\n                class=\"overflow-more\"\n                apOverflowCounter>\n                <ng-container\n                    [ngTemplateOutlet]=\"moreContent\"\n                    [ngTemplateOutletContext]=\"{ $implicit: hidden.length }\" />\n            </span>\n        } @else {\n            <button\n                #moreButton\n                type=\"button\"\n                class=\"overflow-more\"\n                apOverflowCounter\n                apStopPropagation\n                [apTooltip]=\"tooltipListItem() ? '' : hiddenList\"\n                [apTooltipDisabled]=\"mode() !== 'tooltip'\"\n                [apTooltipType]=\"tooltipListItem() ? CustomTooltipType.LIST : CustomTooltipType.DEFAULT\"\n                [apTooltipListItems]=\"listItems(hidden)\"\n                [apTooltipTemplateContext]=\"{ $implicit: hidden }\"\n                [apTooltipTrigger]=\"trigger()\"\n                [attr.aria-expanded]=\"mode() === 'expand' ? false : null\"\n                [attr.aria-describedby]=\"namesId\"\n                (click)=\"onMore()\">\n                <ng-container\n                    [ngTemplateOutlet]=\"moreContent\"\n                    [ngTemplateOutletContext]=\"{ $implicit: hidden.length }\" />\n            </button>\n            <span\n                hidden\n                [id]=\"namesId\">\n                {{ hiddenNames(hidden) }}\n            </span>\n        }\n    }\n    @if (mode() === 'expand' && expanded() && lessTemplate(); as less) {\n        <button\n            #lessButton\n            type=\"button\"\n            class=\"overflow-less\"\n            apStopPropagation\n            aria-expanded=\"true\"\n            (click)=\"onLess()\">\n            <ng-container [ngTemplateOutlet]=\"less.templateRef\" />\n        </button>\n    }\n</div>\n\n<ng-template\n    #moreContent\n    let-count>\n    @if (moreTemplate(); as more) {\n        <ng-container\n            [ngTemplateOutlet]=\"more.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: count }\" />\n    } @else {\n        +{{ count }}\n    }\n</ng-template>\n\n<ng-template\n    #hiddenList\n    let-hidden>\n    <div class=\"overflow-hidden-items\">\n        @for (item of hidden; track trackBy()(item); let index = $index, count = $count) {\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate().templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index, count }\" />\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.overflow-row{display:flex;align-items:center;gap:max(var(--ap-overflow-base-gap),0px);min-width:0}.overflow-row.overflow-row-wrap{flex-wrap:wrap}.overflow-item{display:flex;flex-shrink:0;min-width:0}.overflow-row-wrap>.overflow-item{flex-shrink:1;max-width:100%}.overflow-item+.overflow-item,.overflow-more{margin-inline-start:min(var(--ap-overflow-base-gap),0px)}.overflow-more,.overflow-less{display:flex;flex-shrink:0}button.overflow-more,.overflow-less{padding:0;border:none;border-radius:var(--comp-label-border-radius);background:none;color:var(--sys-text-color-default);font:inherit;cursor:pointer}button.overflow-more:focus-visible,.overflow-less:focus-visible{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:-2px}.overflow-hidden-items{display:flex;flex-wrap:wrap;gap:var(--ref-spacing-xxxs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], itemText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemText", required: false }] }], tooltipListItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipListItem", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OverflowBaseItemDirective), { isSignal: true }] }], moreTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OverflowBaseMoreDirective), { isSignal: true }] }], lessTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OverflowBaseLessDirective), { isSignal: true }] }], overflowCount: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowCountDirective), { isSignal: true }] }], moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], lessButton: [{ type: i0.ViewChild, args: ['lessButton', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OverflowBaseComponent, OverflowBaseItemDirective, OverflowBaseLessDirective, OverflowBaseMoreDirective };
+//# sourceMappingURL=agorapulse-ui-components-overflow-base.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-overflow-base.mjs","sources":["../../../libs/ui-components/overflow-base/src/overflow-base.component.ts","../../../libs/ui-components/overflow-base/src/overflow-base.component.html","../../../libs/ui-components/overflow-base/src/agorapulse-ui-components-overflow-base.ts"],"sourcesContent":["import {\n    OverflowCountDirective,\n    OverflowCounterDirective,\n    OverflowItemDirective,\n    StopPropagationDirective,\n} from '@agorapulse/ui-components/directives';\nimport { CustomTooltipAvatarItem, CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    afterRenderEffect,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    Directive,\n    ElementRef,\n    inject,\n    input,\n    signal,\n    TemplateRef,\n    viewChild,\n} from '@angular/core';\n\nlet nextId = 0;\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.\n * - `expand`: one line, then a \"+N\" that unfolds the list onto several lines; the `apOverflowBaseLess` button folds it back.\n * - `wrap`: nothing is hidden, the list wraps onto as many lines as it needs.\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 OverflowBaseMode = 'tooltip' | 'expand' | 'wrap' | 'count';\n\nexport interface OverflowBaseItemContext<T> {\n    $implicit: T;\n    /** Position of the item in `items`. */\n    index: number;\n    /** How many items the list holds. */\n    count: number;\n}\n\nexport interface OverflowBaseMoreContext {\n    /** How many items the \"+N\" stands for. */\n    $implicit: number;\n}\n\n/**\n * Template of one item, rendered in the row and again in the tooltip that lists the hidden ones.\n *\n * Bind it to the same list as `ap-overflow-base` to type `let-item`; without the binding the item is `unknown`.\n *\n * @example\n * ```html\n * <ng-template let-label [apOverflowBaseItem]=\"labels\">\n *     <ap-label [content]=\"label\" />\n * </ng-template>\n * ```\n */\n@Directive({\n    selector: 'ng-template[apOverflowBaseItem]',\n})\nexport class OverflowBaseItemDirective<T> {\n    readonly templateRef = inject<TemplateRef<OverflowBaseItemContext<T>>>(TemplateRef);\n\n    /** The list the template renders, read only to type the template context. */\n    readonly apOverflowBaseItem = input<readonly T[]>();\n\n    static ngTemplateContextGuard<T>(_directive: OverflowBaseItemDirective<T>, _context: unknown): _context is OverflowBaseItemContext<T> {\n        return true;\n    }\n}\n\n/**\n * Replaces the default \"+N\" text, with a chip for instance. `let-count` is the number of hidden\n * items; the button around it, its tooltip and its accessible name stay the list's.\n */\n@Directive({\n    selector: 'ng-template[apOverflowBaseMore]',\n})\nexport class OverflowBaseMoreDirective {\n    readonly templateRef = inject<TemplateRef<OverflowBaseMoreContext>>(TemplateRef);\n\n    static ngTemplateContextGuard(_directive: OverflowBaseMoreDirective, _context: unknown): _context is OverflowBaseMoreContext {\n        return true;\n    }\n}\n\n/** Content of the button that folds an unfolded `expand` list back, \"See less\" for instance. Without it the list stays unfolded. */\n@Directive({\n    selector: 'ng-template[apOverflowBaseLess]',\n})\nexport class OverflowBaseLessDirective {\n    readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);\n}\n\n/**\n * Shows as many items as fit on one line, then a \"+N\" button: its tooltip lists the hidden items,\n * rendered with the item template itself, or it unfolds the list (see `mode`). Built on\n * `apOverflowCount`: the widths are measured, never estimated.\n *\n * The building block of `ap-overflow-list` and `ap-avatar-group`: use them for labels, tags and avatars,\n * and this only for a kind of item they do not render.\n *\n * The host takes the width its container gives it: `display: block`, or `flex: 1; min-width: 0` in a\n * flex parent. The \"+N\" click never reaches the ancestors, so the list works inside a clickable row.\n *\n * @example\n * ```html\n * <ap-overflow-base [items]=\"labels\">\n *     <ng-template let-label [apOverflowBaseItem]=\"labels\">\n *         <ap-label [content]=\"label\" />\n *     </ng-template>\n * </ap-overflow-base>\n * ```\n */\n@Component({\n    selector: 'ap-overflow-base',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    templateUrl: './overflow-base.component.html',\n    styleUrls: ['./overflow-base.component.scss'],\n    imports: [\n        NgTemplateOutlet,\n        OverflowCountDirective,\n        OverflowCounterDirective,\n        OverflowItemDirective,\n        StopPropagationDirective,\n        TooltipDirective,\n    ],\n    host: {\n        '[style.--ap-overflow-base-gap]': \"gap() + 'px'\",\n    },\n})\nexport class OverflowBaseComponent<T> {\n    /** The items, in display order: the hidden ones are always the last. */\n    readonly items = input.required<readonly T[]>();\n    /** What becomes of the items that do not fit on the line. */\n    readonly mode = input<OverflowBaseMode>('tooltip');\n    /** What opens the tooltip of the hidden items, in `tooltip` mode. */\n    readonly trigger = input<'hover' | 'click'>('hover');\n    /** Most items shown whatever the width; `wrap` shows them all. */\n    readonly max = input<number | undefined>(undefined);\n    /** Space between two items, in pixels. Negative, the items overlap, like a stack of avatars. */\n    readonly gap = input(4);\n    /** Text of an item, for the accessible description of the \"+N\" button. */\n    readonly itemText = input<(item: T) => string>(item => String(item));\n    /** Maps an item to an entry of a `LIST` tooltip (avatar and name); without it the tooltip renders the item template. */\n    readonly tooltipListItem = input<(item: T) => CustomTooltipAvatarItem>();\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    protected readonly itemTemplate = contentChild.required<OverflowBaseItemDirective<T>>(OverflowBaseItemDirective);\n    protected readonly moreTemplate = contentChild(OverflowBaseMoreDirective);\n    protected readonly lessTemplate = contentChild(OverflowBaseLessDirective);\n\n    protected readonly expanded = signal(false);\n    protected readonly collapsing = computed(() => this.mode() !== 'wrap' && !(this.mode() === 'expand' && this.expanded()));\n    protected readonly CustomTooltipType = CustomTooltipType;\n\n    protected readonly namesId = `ap-overflow-base-names-${nextId++}`;\n\n    private readonly overflowCount = viewChild.required(OverflowCountDirective);\n    private readonly moreButton = viewChild<ElementRef<HTMLElement>>('moreButton');\n    private readonly lessButton = viewChild<ElementRef<HTMLElement>>('lessButton');\n    /** The button that replaces the one just clicked, focused once rendered so the focus does not fall back to the page. */\n    private readonly pendingFocus = signal<'more' | 'less' | undefined>(undefined);\n\n    constructor() {\n        afterRenderEffect(() => {\n            if (this.expanded() && this.overflowCount().hiddenCount() === 0) {\n                this.expanded.set(false);\n            }\n        });\n        afterRenderEffect(() => {\n            const pending = this.pendingFocus();\n            if (!pending) {\n                return;\n            }\n            const button = pending === 'more' ? this.moreButton() : this.lessButton();\n            const coming = pending === 'more' ? this.collapsing() && this.overflowCount().hiddenCount() > 0 : this.expanded();\n            if (button || !coming) {\n                button?.nativeElement.focus();\n                this.pendingFocus.set(undefined);\n            }\n        });\n    }\n\n    protected hiddenItems(hiddenCount: number): readonly T[] {\n        const items = this.items();\n        return items.slice(Math.max(0, items.length - hiddenCount));\n    }\n\n    protected hiddenNames(hidden: readonly T[]): string {\n        return hidden.map(item => this.itemText()(item)).join(', ');\n    }\n\n    protected listItems(hidden: readonly T[]): CustomTooltipAvatarItem[] {\n        const toListItem = this.tooltipListItem();\n        return toListItem ? hidden.map(item => toListItem(item)) : [];\n    }\n\n    protected onMore(): void {\n        if (this.mode() === 'expand') {\n            this.expanded.set(true);\n            this.pendingFocus.set(this.lessTemplate() ? 'less' : undefined);\n        }\n    }\n\n    protected onLess(): void {\n        this.expanded.set(false);\n        this.pendingFocus.set('more');\n    }\n}\n","<div\n    #overflow=\"apOverflowCount\"\n    class=\"overflow-row\"\n    apOverflowCount\n    [class.overflow-row-wrap]=\"!collapsing()\"\n    [collapse]=\"collapsing()\"\n    [gap]=\"gap()\"\n    [max]=\"max()\">\n    @for (item of items(); track trackBy()(item); let index = $index, count = $count) {\n        <div\n            class=\"overflow-item\"\n            apOverflowItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate().templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index, count }\" />\n        </div>\n    }\n    @if (collapsing() && overflow.hiddenCount() > 0) {\n        @let hidden = hiddenItems(overflow.hiddenCount());\n        @if (mode() === 'count') {\n            <span\n                class=\"overflow-more\"\n                apOverflowCounter>\n                <ng-container\n                    [ngTemplateOutlet]=\"moreContent\"\n                    [ngTemplateOutletContext]=\"{ $implicit: hidden.length }\" />\n            </span>\n        } @else {\n            <button\n                #moreButton\n                type=\"button\"\n                class=\"overflow-more\"\n                apOverflowCounter\n                apStopPropagation\n                [apTooltip]=\"tooltipListItem() ? '' : hiddenList\"\n                [apTooltipDisabled]=\"mode() !== 'tooltip'\"\n                [apTooltipType]=\"tooltipListItem() ? CustomTooltipType.LIST : CustomTooltipType.DEFAULT\"\n                [apTooltipListItems]=\"listItems(hidden)\"\n                [apTooltipTemplateContext]=\"{ $implicit: hidden }\"\n                [apTooltipTrigger]=\"trigger()\"\n                [attr.aria-expanded]=\"mode() === 'expand' ? false : null\"\n                [attr.aria-describedby]=\"namesId\"\n                (click)=\"onMore()\">\n                <ng-container\n                    [ngTemplateOutlet]=\"moreContent\"\n                    [ngTemplateOutletContext]=\"{ $implicit: hidden.length }\" />\n            </button>\n            <span\n                hidden\n                [id]=\"namesId\">\n                {{ hiddenNames(hidden) }}\n            </span>\n        }\n    }\n    @if (mode() === 'expand' && expanded() && lessTemplate(); as less) {\n        <button\n            #lessButton\n            type=\"button\"\n            class=\"overflow-less\"\n            apStopPropagation\n            aria-expanded=\"true\"\n            (click)=\"onLess()\">\n            <ng-container [ngTemplateOutlet]=\"less.templateRef\" />\n        </button>\n    }\n</div>\n\n<ng-template\n    #moreContent\n    let-count>\n    @if (moreTemplate(); as more) {\n        <ng-container\n            [ngTemplateOutlet]=\"more.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: count }\" />\n    } @else {\n        +{{ count }}\n    }\n</ng-template>\n\n<ng-template\n    #hiddenList\n    let-hidden>\n    <div class=\"overflow-hidden-items\">\n        @for (item of hidden; track trackBy()(item); let index = $index, count = $count) {\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate().templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index, count }\" />\n        }\n    </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,89 @@
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { LabelComponent } from '@agorapulse/ui-components/labels';
+import { OverflowBaseComponent, OverflowBaseItemDirective, OverflowBaseLessDirective, OverflowBaseMoreDirective } from '@agorapulse/ui-components/overflow-base';
+import { TagComponent } from '@agorapulse/ui-components/tag';
+import { SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+function toEntry(item) {
+    return typeof item === 'string' ? { item, text: item } : { ...item, item };
+}
+/**
+ * A list of labels or tags that shows as many as fit on one line, then a "+N" (see `mode`).
+ * The widths are measured, never estimated, and the "+N" click never reaches the ancestors,
+ * so the list works inside a clickable row.
+ *
+ * The host takes the width its container gives it: `display: block`, or `flex: 1; min-width: 0` in a flex parent.
+ *
+ * @example
+ * ```html
+ * <ap-overflow-list [items]="labels" />
+ * <ap-overflow-list displayType="tag" mode="wrap" removable [items]="profiles" (remove)="onRemove($event)" />
+ * ```
+ */
+class OverflowListComponent {
+    /** The items, in display order: the hidden ones are always the last. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** How each item renders. */
+    displayType = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
+    /** Color of the tags, when `displayType` is `tag`. */
+    tagColor = input('grey', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tagColor" }] : /* istanbul ignore next */ []));
+    /** Whether the avatars of the tags are round. */
+    roundedAvatar = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
+    /** What becomes of the items that do not fit on the line. */
+    mode = input('tooltip', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Most items shown whatever the width; `wrap` shows them all. */
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** What opens the tooltip of the hidden items, in `tooltip` mode. */
+    trigger = input('hover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    /** Shows a remove button on each item, which emits `remove`. */
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Text after the count of the "+N" link, in `expand` mode. */
+    moreText = input('labels', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreText" }] : /* istanbul ignore next */ []));
+    /** Text of the link that folds an unfolded `expand` list back. */
+    lessText = input('See less', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lessText" }] : /* istanbul ignore next */ []));
+    /** Identifies an item across changes of `items`, so that its element is kept; the item itself by default. */
+    trackBy = input(item => item, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    /** The item whose remove button was clicked, as it was given. */
+    remove = output();
+    entries = computed(() => this.items().map(item => toEntry(item)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    entryText = (entry) => entry.text;
+    entryTrack = (entry) => this.trackBy()(entry.item);
+    isRemovable(entry) {
+        return this.removable() && entry.removable !== false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OverflowListComponent, isStandalone: true, selector: "ap-overflow-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, moreText: { classPropertyName: "moreText", publicName: "moreText", isSignal: true, isRequired: false, transformFunction: null }, lessText: { classPropertyName: "lessText", publicName: "lessText", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<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", styles: [":host{display:block;min-width:0}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: OverflowBaseComponent, selector: "ap-overflow-base", inputs: ["items", "mode", "trigger", "max", "gap", "itemText", "tooltipListItem", "trackBy"] }, { kind: "directive", type: OverflowBaseItemDirective, selector: "ng-template[apOverflowBaseItem]", inputs: ["apOverflowBaseItem"] }, { kind: "directive", type: OverflowBaseLessDirective, selector: "ng-template[apOverflowBaseLess]" }, { kind: "directive", type: OverflowBaseMoreDirective, selector: "ng-template[apOverflowBaseMore]" }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverflowListComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-overflow-list', imports: [
+                        AvatarComponent,
+                        LabelComponent,
+                        OverflowBaseComponent,
+                        OverflowBaseItemDirective,
+                        OverflowBaseLessDirective,
+                        OverflowBaseMoreDirective,
+                        SymbolComponent,
+                        TagComponent,
+                    ], template: "<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", styles: [":host{display:block;min-width:0}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], moreText: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreText", required: false }] }], lessText: [{ type: i0.Input, args: [{ isSignal: true, alias: "lessText", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OverflowListComponent };
+//# sourceMappingURL=agorapulse-ui-components-overflow-list.mjs.map

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":"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"}

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 */