@agorapulse/ui-components 22.1.8 → 22.2.0

package/fesm2022/agorapulse-ui-components-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-popover.mjs","sources":["../../../libs/ui-components/popover/src/popover-panel/popover-panel.component.ts","../../../libs/ui-components/popover/src/popover-panel/popover-panel.component.html","../../../libs/ui-components/popover/src/popover.directive.ts","../../../libs/ui-components/popover/src/agorapulse-ui-components-popover.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, output, TemplateRef } from '@angular/core';\n\n/**\n * The `role=\"dialog\"` surface, its optional header and its focus trap. Instantiated by the popover\n * directive, never by a consumer.\n *\n * Focus is the CDK's: `cdkTrapFocus` confines Tab, `autoCapture` focuses on open and restores the\n * trigger on destruction. The cost is that Tab cannot leave the panel — Escape or the button do.\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-popover-panel',\n    imports: [CdkTrapFocus, CloseButtonComponent, NgTemplateOutlet],\n    templateUrl: 'popover-panel.component.html',\n    styleUrls: ['popover-panel.component.scss'],\n})\nexport class PopoverPanelComponent {\n    private static nextId = 0;\n\n    /** The consumer's content. Always a template: the directive sits on the trigger, not here. */\n    readonly content = input.required<TemplateRef<unknown>>();\n\n    /** Mirrors the popover's heading, and gives the dialog its accessible name. */\n    readonly heading = input<string>();\n\n    /** Mirrors the popover's input of the same name. */\n    readonly closable = input<boolean>(false);\n\n    /** Mirrors the popover's backdrop, which is what makes the page genuinely inert. */\n    readonly backdrop = input<boolean>(false);\n\n    /** Mirrors the popover's, and names the dialog when there is no heading. */\n    readonly ariaLabel = input<string>();\n\n    readonly closeAriaLabel = input<string>('Close');\n\n    /** Set by the directive, which needs it for the trigger's `aria-controls`. */\n    readonly panelId = input<string>('');\n\n    /**\n     * The id of the element that names the dialog when nothing else does — the trigger, set by the\n     * directive. An id rather than its text, so the name is computed on the live DOM: that follows a\n     * label that changes, and reads a trigger whose own name is an `aria-label`.\n     */\n    readonly fallbackLabelId = input<string>();\n\n    readonly closed = output<void>();\n\n    protected readonly headingId = `ap-popover-heading-${PopoverPanelComponent.nextId++}`;\n\n    /** A dialog must be named. The heading does it, failing that the trigger. */\n    protected readonly labelledBy = computed<string | null>(() => {\n        if (this.heading()) {\n            return this.headingId;\n        }\n        return this.ariaLabel() ? null : (this.fallbackLabelId() ?? null);\n    });\n\n    protected readonly label = computed<string | null>(() => (this.heading() ? null : (this.ariaLabel() ?? null)));\n}\n","<div\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\">\n    <div\n        class=\"ap-popover__panel\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        cdkFocusInitial\n        [id]=\"panelId()\"\n        [attr.aria-modal]=\"backdrop() || null\"\n        [attr.aria-labelledby]=\"labelledBy()\"\n        [attr.aria-label]=\"label()\">\n        @if (heading() || closable()) {\n            <div class=\"ap-popover__header\">\n                @if (heading()) {\n                    <h2\n                        class=\"ap-popover__heading\"\n                        [id]=\"headingId\">\n                        {{ heading() }}\n                    </h2>\n                }\n                @if (closable()) {\n                    <ap-close-button\n                        [ariaLabel]=\"closeAriaLabel()\"\n                        (closed)=\"closed.emit()\" />\n                }\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n    </div>\n</div>\n","import { createFloatingOverlay, FloatingAnchorMode, FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { ComponentRef, Directive, ElementRef, inject, input, TemplateRef } from '@angular/core';\nimport { PopoverPanelComponent } from './popover-panel/popover-panel.component';\n\n/**\n * A click-triggered interactive panel: `role=\"dialog\"`, managed focus, Escape, optional backdrop.\n * A tooltip is the opposite — descriptive, hover-triggered, and never focusable.\n *\n * Sits on the **trigger**, so it owns the trigger's ARIA and the content is always a `TemplateRef`.\n * Inputs are prefixed one by one rather than bundled: an inline config object would be recreated on\n * every change-detection cycle and thrash the overlay.\n *\n * @example\n * <button [apPopover]=\"shareTpl\" apPopoverHeading=\"Share\">Share</button>\n * <ng-template #shareTpl>…</ng-template>\n */\n@Directive({\n    selector: '[apPopover]',\n    exportAs: 'apPopover',\n    host: {\n        '[attr.aria-haspopup]': '\"dialog\"',\n        '[attr.aria-expanded]': 'isOpen()',\n        // Only while open: pointing `aria-controls` at an id that does not exist yet is invalid.\n        '[attr.aria-controls]': 'isOpen() ? panelId : null',\n        '(click)': 'toggle($event)',\n    },\n})\nexport class PopoverDirective {\n    private static nextId = 0;\n\n    private readonly instanceId = PopoverDirective.nextId++;\n    private readonly floating = createFloatingOverlay();\n    private readonly triggerElement = inject<ElementRef<HTMLElement>>(ElementRef);\n    private panelRef: ComponentRef<PopoverPanelComponent> | null = null;\n\n    /** The panel's content. */\n    readonly apPopover = input.required<TemplateRef<unknown>>();\n\n    /** Unset means derived from the anchor mode. There is no `'auto'` value. */\n    readonly apPopoverPlacement = input<FloatingPlacement>();\n    readonly apPopoverAnchor = input<FloatingAnchorMode>('trigger');\n    readonly apPopoverArrow = input<boolean>(false);\n    readonly apPopoverArrowTarget = input<'anchor' | 'pointer'>('anchor');\n\n    /** Shows a close button — and, by doing so, makes it *the* way to close: no more outside click. */\n    readonly apPopoverClosable = input<boolean>(false);\n\n    /** Blocks the page behind. Non-modal by default — that is the point of a popover. */\n    readonly apPopoverBackdrop = input<boolean>(false);\n\n    /** Optional heading. When set, it becomes the dialog's accessible name. */\n    readonly apPopoverHeading = input<string>();\n\n    /** Accessible name used when there is no heading. */\n    readonly apPopoverAriaLabel = input<string>();\n\n    /** An input rather than a hard-coded string: several of the DS's own labels read badly. */\n    readonly apPopoverCloseAriaLabel = input<string>('Close');\n\n    readonly apPopoverPanelClass = input<string | string[]>();\n\n    readonly isOpen = this.floating.isOpen;\n\n    protected readonly panelId = `ap-popover-${this.instanceId}`;\n\n    open(event?: MouseEvent): void {\n        if (this.isOpen()) return;\n\n        this.panelRef = this.floating.open(\n            PopoverPanelComponent,\n            this.triggerElement.nativeElement,\n            {\n                placement: this.apPopoverPlacement(),\n                anchor: this.apPopoverAnchor(),\n                arrow: this.apPopoverArrow(),\n                arrowTarget: this.apPopoverArrowTarget(),\n                showBackdrop: this.apPopoverBackdrop(),\n                panelClass: this.apPopoverPanelClass(),\n                // Escape always closes: APG requires it of a dialog. An outside click does not.\n                onEscape: () => this.close(),\n                onOutsideClick: () => {\n                    if (!this.apPopoverClosable()) {\n                        this.close();\n                    }\n                },\n            },\n            event\n        );\n\n        this.panelRef?.setInput('content', this.apPopover());\n        this.panelRef?.setInput('panelId', this.panelId);\n        this.panelRef?.setInput('heading', this.apPopoverHeading());\n        this.panelRef?.setInput('closable', this.apPopoverClosable());\n        this.panelRef?.setInput('backdrop', this.apPopoverBackdrop());\n        this.panelRef?.setInput('ariaLabel', this.apPopoverAriaLabel());\n        this.panelRef?.setInput('closeAriaLabel', this.apPopoverCloseAriaLabel());\n        this.panelRef?.setInput('fallbackLabelId', this.ensureTriggerId());\n        this.panelRef?.instance.closed.subscribe(() => this.close());\n\n        // Render before repositioning: `attach()` measured an unevaluated template, so the first\n        // position is for an empty box and the panel jumps once the content lands.\n        this.panelRef?.changeDetectorRef.detectChanges();\n        this.floating.updatePosition();\n    }\n\n    /** The dialog falls back to being named by its trigger, and `aria-labelledby` needs an id to point at. */\n    private ensureTriggerId(): string {\n        const trigger = this.triggerElement.nativeElement;\n        if (!trigger.id) {\n            trigger.id = `ap-popover-trigger-${this.instanceId}`;\n        }\n\n        this.warnWhenNameless(trigger);\n        return trigger.id;\n    }\n\n    /** The residual case the fallback cannot cover: a trigger that names nothing either. */\n    private warnWhenNameless(trigger: HTMLElement): void {\n        const hasOwnName = Boolean(this.apPopoverHeading()) || Boolean(this.apPopoverAriaLabel());\n        // An icon-only trigger has no text but may carry an `aria-label`, which names it just as well.\n        const triggerNamesIt = Boolean(trigger.textContent?.trim()) || Boolean(trigger.getAttribute('aria-label'));\n        if (hasOwnName || triggerNamesIt) {\n            return;\n        }\n\n        console.warn(\n            `[Popover] The dialog opened by #${trigger.id} has no accessible name: it has neither a ` +\n                'heading nor an aria-label, and its trigger has no text. Set apPopoverHeading or apPopoverAriaLabel.'\n        );\n    }\n\n    close(): void {\n        this.panelRef = null;\n        this.floating.close();\n    }\n\n    toggle(event?: MouseEvent): void {\n        if (this.isOpen()) {\n            this.close();\n        } else {\n            this.open(event);\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-popover.mjs","sources":["../../../libs/ui-components/popover/src/popover-panel/popover-panel.component.ts","../../../libs/ui-components/popover/src/popover-panel/popover-panel.component.html","../../../libs/ui-components/popover/src/popover.directive.ts","../../../libs/ui-components/popover/src/agorapulse-ui-components-popover.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, output, TemplateRef } from '@angular/core';\n\n/**\n * The `role=\"dialog\"` surface, its optional header and its focus trap. Instantiated by the popover\n * directive, never by a consumer.\n *\n * Focus is the CDK's: `cdkTrapFocus` confines Tab, `autoCapture` focuses on open and restores the\n * trigger on destruction. The cost is that Tab cannot leave the panel — Escape or the button do.\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-popover-panel',\n    imports: [CdkTrapFocus, CloseButtonComponent, NgTemplateOutlet],\n    templateUrl: 'popover-panel.component.html',\n    styleUrls: ['popover-panel.component.scss'],\n})\nexport class PopoverPanelComponent {\n    private static nextId = 0;\n\n    /** The consumer's content. Always a template: the directive sits on the trigger, not here. */\n    readonly content = input.required<TemplateRef<unknown>>();\n\n    /** Mirrors the popover's heading, and gives the dialog its accessible name. */\n    readonly heading = input<string>();\n\n    /** Mirrors the popover's input of the same name. */\n    readonly closable = input<boolean>(false);\n\n    /** Mirrors the popover's backdrop, which is what makes the page genuinely inert. */\n    readonly backdrop = input<boolean>(false);\n\n    /** Mirrors the popover's, and names the dialog when there is no heading. */\n    readonly ariaLabel = input<string>();\n\n    readonly closeAriaLabel = input<string>('Close');\n\n    /** Set by the directive, which needs it for the trigger's `aria-controls`. */\n    readonly panelId = input<string>('');\n\n    /**\n     * The id of the element that names the dialog when nothing else does — the trigger, set by the\n     * directive. An id rather than its text, so the name is computed on the live DOM: that follows a\n     * label that changes, and reads a trigger whose own name is an `aria-label`.\n     */\n    readonly fallbackLabelId = input<string>();\n\n    readonly closed = output<void>();\n\n    protected readonly headingId = `ap-popover-heading-${PopoverPanelComponent.nextId++}`;\n\n    /** A dialog must be named. The heading does it, failing that the trigger. */\n    protected readonly labelledBy = computed<string | null>(() => {\n        if (this.heading()) {\n            return this.headingId;\n        }\n        return this.ariaLabel() ? null : (this.fallbackLabelId() ?? null);\n    });\n\n    protected readonly label = computed<string | null>(() => (this.heading() ? null : (this.ariaLabel() ?? null)));\n}\n","<div\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\">\n    <div\n        class=\"ap-popover__panel\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        cdkFocusInitial\n        [id]=\"panelId()\"\n        [attr.aria-modal]=\"backdrop() || null\"\n        [attr.aria-labelledby]=\"labelledBy()\"\n        [attr.aria-label]=\"label()\">\n        @if (heading() || closable()) {\n            <div class=\"ap-popover__header\">\n                @if (heading()) {\n                    <h2\n                        class=\"ap-popover__heading\"\n                        [id]=\"headingId\">\n                        {{ heading() }}\n                    </h2>\n                }\n                @if (closable()) {\n                    <ap-close-button\n                        [ariaLabel]=\"closeAriaLabel()\"\n                        (closed)=\"closed.emit()\" />\n                }\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n    </div>\n</div>\n","import { createFloatingOverlay, FloatingAnchorMode, FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { ComponentRef, Directive, ElementRef, inject, input, TemplateRef } from '@angular/core';\nimport { PopoverPanelComponent } from './popover-panel/popover-panel.component';\n\n/**\n * A click-triggered interactive panel: `role=\"dialog\"`, managed focus, Escape, optional backdrop.\n * A tooltip is the opposite — descriptive, hover-triggered, and never focusable.\n *\n * Sits on the **trigger**, so it owns the trigger's ARIA and the content is always a `TemplateRef`.\n * Inputs are prefixed one by one rather than bundled: an inline config object would be recreated on\n * every change-detection cycle and thrash the overlay.\n *\n * The panel does not cap its own height, and cannot: its content is a `TemplateRef`, so only the\n * caller knows what may scroll. Content that can run long needs a `max-height` of\n * `var(--ap-floating-available-height, none)` — the floating engine publishes what the viewport\n * leaves once flip and shift have settled, and the fallback keeps a panel that already fits\n * untouched. Then pick what scrolls: the whole surface when nothing in it is sticky, the body\n * alone when a heading or an action row has to stay put.\n *\n * @example\n * <button [apPopover]=\"shareTpl\" apPopoverHeading=\"Share\">Share</button>\n * <ng-template #shareTpl>…</ng-template>\n */\n@Directive({\n    selector: '[apPopover]',\n    exportAs: 'apPopover',\n    host: {\n        '[attr.aria-haspopup]': '\"dialog\"',\n        '[attr.aria-expanded]': 'isOpen()',\n        // Only while open: pointing `aria-controls` at an id that does not exist yet is invalid.\n        '[attr.aria-controls]': 'isOpen() ? panelId : null',\n        '(click)': 'toggle($event)',\n    },\n})\nexport class PopoverDirective {\n    private static nextId = 0;\n\n    private readonly instanceId = PopoverDirective.nextId++;\n    private readonly floating = createFloatingOverlay();\n    private readonly triggerElement = inject<ElementRef<HTMLElement>>(ElementRef);\n    private panelRef: ComponentRef<PopoverPanelComponent> | null = null;\n\n    /** The panel's content. */\n    readonly apPopover = input.required<TemplateRef<unknown>>();\n\n    /** Unset means derived from the anchor mode. There is no `'auto'` value. */\n    readonly apPopoverPlacement = input<FloatingPlacement>();\n    readonly apPopoverAnchor = input<FloatingAnchorMode>('trigger');\n    readonly apPopoverArrow = input<boolean>(false);\n    readonly apPopoverArrowTarget = input<'anchor' | 'pointer'>('anchor');\n\n    /** Shows a close button — and, by doing so, makes it *the* way to close: no more outside click. */\n    readonly apPopoverClosable = input<boolean>(false);\n\n    /** Blocks the page behind. Non-modal by default — that is the point of a popover. */\n    readonly apPopoverBackdrop = input<boolean>(false);\n\n    /** Optional heading. When set, it becomes the dialog's accessible name. */\n    readonly apPopoverHeading = input<string>();\n\n    /** Accessible name used when there is no heading. */\n    readonly apPopoverAriaLabel = input<string>();\n\n    /** An input rather than a hard-coded string: several of the DS's own labels read badly. */\n    readonly apPopoverCloseAriaLabel = input<string>('Close');\n\n    readonly apPopoverPanelClass = input<string | string[]>();\n\n    readonly isOpen = this.floating.isOpen;\n\n    protected readonly panelId = `ap-popover-${this.instanceId}`;\n\n    open(event?: MouseEvent): void {\n        if (this.isOpen()) return;\n\n        this.panelRef = this.floating.open(\n            PopoverPanelComponent,\n            this.triggerElement.nativeElement,\n            {\n                placement: this.apPopoverPlacement(),\n                anchor: this.apPopoverAnchor(),\n                arrow: this.apPopoverArrow(),\n                arrowTarget: this.apPopoverArrowTarget(),\n                showBackdrop: this.apPopoverBackdrop(),\n                panelClass: this.apPopoverPanelClass(),\n                // Escape always closes: APG requires it of a dialog. An outside click does not.\n                onEscape: () => this.close(),\n                onOutsideClick: () => {\n                    if (!this.apPopoverClosable()) {\n                        this.close();\n                    }\n                },\n            },\n            event\n        );\n\n        this.panelRef?.setInput('content', this.apPopover());\n        this.panelRef?.setInput('panelId', this.panelId);\n        this.panelRef?.setInput('heading', this.apPopoverHeading());\n        this.panelRef?.setInput('closable', this.apPopoverClosable());\n        this.panelRef?.setInput('backdrop', this.apPopoverBackdrop());\n        this.panelRef?.setInput('ariaLabel', this.apPopoverAriaLabel());\n        this.panelRef?.setInput('closeAriaLabel', this.apPopoverCloseAriaLabel());\n        this.panelRef?.setInput('fallbackLabelId', this.ensureTriggerId());\n        this.panelRef?.instance.closed.subscribe(() => this.close());\n\n        // Render before repositioning: `attach()` measured an unevaluated template, so the first\n        // position is for an empty box and the panel jumps once the content lands.\n        this.panelRef?.changeDetectorRef.detectChanges();\n        this.floating.updatePosition();\n    }\n\n    /** The dialog falls back to being named by its trigger, and `aria-labelledby` needs an id to point at. */\n    private ensureTriggerId(): string {\n        const trigger = this.triggerElement.nativeElement;\n        if (!trigger.id) {\n            trigger.id = `ap-popover-trigger-${this.instanceId}`;\n        }\n\n        this.warnWhenNameless(trigger);\n        return trigger.id;\n    }\n\n    /** The residual case the fallback cannot cover: a trigger that names nothing either. */\n    private warnWhenNameless(trigger: HTMLElement): void {\n        const hasOwnName = Boolean(this.apPopoverHeading()) || Boolean(this.apPopoverAriaLabel());\n        // An icon-only trigger has no text but may carry an `aria-label`, which names it just as well.\n        const triggerNamesIt = Boolean(trigger.textContent?.trim()) || Boolean(trigger.getAttribute('aria-label'));\n        if (hasOwnName || triggerNamesIt) {\n            return;\n        }\n\n        console.warn(\n            `[Popover] The dialog opened by #${trigger.id} has no accessible name: it has neither a ` +\n                'heading nor an aria-label, and its trigger has no text. Set apPopoverHeading or apPopoverAriaLabel.'\n        );\n    }\n\n    close(): void {\n        this.panelRef = null;\n        this.floating.close();\n    }\n\n    toggle(event?: MouseEvent): void {\n        if (this.isOpen()) {\n            this.close();\n        } else {\n            this.open(event);\n        }\n    }\n}\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,12 +1,12 @@
 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, viewChildren, afterRenderEffect, 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, viewChild, 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 } from '@agorapulse/ui-components/directives';
+import { StopPropagationDirective, OverflowCountDirective, OverflowCounterDirective, OverflowItemDirective } 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';
@@ -755,6 +755,8 @@ class SelectLabelMultipleComponent {
     ...(ngDevMode ? [{ debugName: "bindNetwork" }] : /* istanbul ignore next */ []));
     bindTagColor = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bindTagColor" }] : /* istanbul ignore next */ []));
+    /** Turns chip removal off. Completes the parent ng-select's state, when there is one. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     removeItem = output();
     /**
      * Parent ng-select, resolved through the DI chain of the `ng-multi-label-tmp` template.
@@ -762,7 +764,7 @@ class SelectLabelMultipleComponent {
      */
     ngSelect = inject(NgSelectComponent, { optional: true });
     /** True when the whole select is disabled/readonly — hides every tag/label remove button. */
-    selectDisabled = computed(() => this.ngSelect?.disabled() ?? false, /* @ts-ignore */
+    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,
@@ -773,41 +775,8 @@ class SelectLabelMultipleComponent {
         tagColor: this.bindTagColor() ? item[this.bindTagColor()] : undefined,
     })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
-    hiddenCount = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
     trackByItem = (_, item) => (this.bindValue() ? item.value[this.bindValue()] : item.value);
     mainContainer = viewChild.required('mainContainer', { read: ElementRef });
-    itemsElement = viewChildren('itemElement', { ...(ngDevMode ? { debugName: "itemsElement" } : /* istanbul ignore next */ {}), read: ElementRef });
-    responsiveLayout = afterRenderEffect(() => {
-        const itemRefs = this.itemsElement();
-        if (!itemRefs.length) {
-            this.hiddenCount.set(0);
-            return;
-        }
-        const containerEl = this.mainContainer().nativeElement;
-        const containerWidth = (containerEl.parentElement?.clientWidth ?? 0) - 30;
-        if (containerWidth <= 0)
-            return;
-        // Reset maxWidth so items aren't constrained by a previous pass
-        containerEl.style.maxWidth = '';
-        let totalWidth = 0;
-        let hiddenCount = 0;
-        const itemGap = 4;
-        for (const ref of itemRefs) {
-            const el = ref.nativeElement;
-            const itemWidth = el.getBoundingClientRect().width + itemGap;
-            if (totalWidth + itemWidth < containerWidth && !hiddenCount) {
-                totalWidth += itemWidth;
-                el.style.visibility = 'visible';
-            }
-            else {
-                el.style.visibility = 'hidden';
-                hiddenCount++;
-            }
-        }
-        containerEl.style.maxWidth = `${totalWidth}px`;
-        this.hiddenCount.set(hiddenCount);
-    });
     // 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.
@@ -818,12 +787,12 @@ class SelectLabelMultipleComponent {
         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 } }, outputs: { removeItem: "removeItem" }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "itemsElement", predicate: ["itemElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\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                #itemElement\n                class=\"item 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</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex;width:100%}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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 });
 }
 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], template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\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                #itemElement\n                class=\"item 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</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex;width:100%}\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 }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }], mainContainer: [{ type: i0.ViewChild, args: ['mainContainer', { ...{ read: ElementRef }, isSignal: true }] }], itemsElement: [{ type: i0.ViewChildren, args: ['itemElement', { ...{ read: ElementRef }, isSignal: true }] }] } });
+            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 }] }] } });
 
 class SelectLabelSingleComponent {
     displayType = input('text', /* @ts-ignore */