@agorapulse/ui-components 22.3.0 → 22.4.0

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

@@ -1,10 +1,8 @@
-import * as i0 from '@angular/core';
-import { inject, ElementRef, NgZone, EventEmitter, booleanAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
 import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';
 import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
 import { SymbolRegistry, apClose } from '@agorapulse/ui-symbol';
-import * as i1 from '@agorapulse/ui-components/text-measurement';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, NgZone, EventEmitter, booleanAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class LabelComponent {
     elementRef = inject(ElementRef);
@@ -57,112 +55,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Output
             }] } });
 
-class LabelListComponent {
-    changeDetectorRef;
-    elementRef;
-    textMeasurementService;
-    zone;
-    labels = [];
-    removeLabelsEnabled = false;
-    responsive = false;
-    seeLessTranslation = 'See less';
-    hiddenLabelsTranslation = 'labels';
-    removeLabel = new EventEmitter();
-    badgeWidth = 0;
-    expanded = false;
-    howManyItemsLeft = 0;
-    responsiveLabels = [];
-    observer;
-    width$ = new BehaviorSubject(0);
-    constructor(changeDetectorRef, elementRef, textMeasurementService, zone) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.elementRef = elementRef;
-        this.textMeasurementService = textMeasurementService;
-        this.zone = zone;
-        this.observer = new ResizeObserver(entries => {
-            this.zone.run(() => {
-                this.width$.next(entries[0].contentRect.width);
-            });
-        });
-    }
-    ngAfterContentInit() {
-        if (this.responsive) {
-            this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);
-            this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);
-            this.width$.subscribe(width => {
-                this.generateResponsiveLabels(width);
-            });
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.labels.currentValue && this.responsive) {
-            this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);
-        }
-    }
-    ngOnDestroy() {
-        this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);
-    }
-    onExpand() {
-        this.expanded = !this.expanded;
-    }
-    onRemoveLabel({ content }) {
-        this.removeLabel.emit(content);
-    }
-    onResize() {
-        this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);
-    }
-    trackByLabelContent(_, entry) {
-        return entry;
-    }
-    generateResponsiveLabels(width) {
-        let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth('+'.concat(this.labels.length.toString()), 14, 'Averta');
-        seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right
-        let elementWidth = width - 16 - 16; // width - padding-left - padding-right
-        elementWidth -= seeMoreElementWidth;
-        let currentIndex = 0;
-        for (let index = 0; index < this.labels.length; index++) {
-            let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');
-            textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing
-            elementWidth -= textWidth;
-            if (elementWidth <= 0) {
-                break;
-            }
-            currentIndex = index;
-        }
-        if (currentIndex + 1 === this.labels.length) {
-            this.expanded = false;
-        }
-        this.howManyItemsLeft = this.labels.length - (currentIndex + 1);
-        this.badgeWidth =
-            this.howManyItemsLeft > 0 && currentIndex === 0
-                ? this.textMeasurementService.calculateTextWidth('+' + this.howManyItemsLeft, 14, 'Averta') + 22
-                : 0;
-        this.responsiveLabels = this.labels.slice(0, currentIndex + 1);
-        this.changeDetectorRef.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LabelListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TextMeasurementService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LabelListComponent, isStandalone: true, selector: "ap-label-list", inputs: { labels: "labels", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation", hiddenLabelsTranslation: "hiddenLabelsTranslation" }, outputs: { removeLabel: "removeLabel" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LabelListComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label-list', imports: [LabelComponent], template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.TextMeasurementService }, { type: i0.NgZone }], propDecorators: { labels: [{
-                type: Input
-            }], removeLabelsEnabled: [{
-                type: Input
-            }], responsive: [{
-                type: Input
-            }], seeLessTranslation: [{
-                type: Input
-            }], hiddenLabelsTranslation: [{
-                type: Input
-            }], removeLabel: [{
-                type: Output
-            }] } });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LabelComponent, LabelListComponent };
+export { LabelComponent };
 //# sourceMappingURL=agorapulse-ui-components-labels.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-labels.mjs","sources":["../../../libs/ui-components/labels/src/label.component.ts","../../../libs/ui-components/labels/src/label.component.html","../../../libs/ui-components/labels/src/label-list.component.ts","../../../libs/ui-components/labels/src/label-list.component.html","../../../libs/ui-components/labels/src/agorapulse-ui-components-labels.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apClose, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n    AfterViewInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    inject,\n    Input,\n    NgZone,\n    OnDestroy,\n    Output,\n    ViewEncapsulation,\n} from '@angular/core';\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-label',\n    templateUrl: './label.component.html',\n    imports: [TooltipDirective, CloseButtonComponent],\n    styleUrls: ['./label.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class LabelComponent implements AfterViewInit, OnDestroy {\n    private elementRef: ElementRef = inject(ElementRef);\n    private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n    private zone: NgZone = inject(NgZone);\n\n    @Input({\n        required: true,\n    })\n    content!: string;\n    @Input() selectorWidth: number = 0; //Width of the selector input, if applicable\n    @Input({ transform: booleanAttribute }) removable: boolean = false;\n\n    @Output() remove = new EventEmitter<{ content: string; $event: MouseEvent }>();\n\n    private observer: ResizeObserver | undefined = undefined;\n    tooltipEnabled: boolean = false;\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apClose]);\n    }\n\n    ngAfterViewInit(): void {\n        this.observer = new ResizeObserver(entries => {\n            this.zone.run(() => {\n                const containerWidth =\n                    this.elementRef.nativeElement.clientWidth > 0 ? this.elementRef.nativeElement.clientWidth : this.selectorWidth;\n                if (containerWidth > 0) {\n                    this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;\n                }\n            });\n        });\n        this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);\n    }\n\n    ngOnDestroy() {\n        this.observer?.unobserve(this.elementRef.nativeElement.children[0]);\n    }\n\n    onClearLabel($event: MouseEvent) {\n        this.elementRef.nativeElement.remove();\n        this.remove.emit({ content: this.content, $event });\n    }\n}\n","<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <ap-close-button (closed)=\"onClearLabel($event)\" />\n    }\n</div>\n","import { TextMeasurementService } from '@agorapulse/ui-components/text-measurement';\n\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    NgZone,\n    OnChanges,\n    OnDestroy,\n    Output,\n    SimpleChanges,\n} from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { LabelComponent } from './label.component';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-label-list',\n    templateUrl: './label-list.component.html',\n    styleUrls: ['./label-list.component.scss'],\n    imports: [LabelComponent],\n})\nexport class LabelListComponent implements AfterContentInit, OnChanges, OnDestroy {\n    @Input() labels: string[] = [];\n    @Input() removeLabelsEnabled: boolean = false;\n    @Input() responsive: boolean = false;\n    @Input() seeLessTranslation: string = 'See less';\n    @Input() hiddenLabelsTranslation: string = 'labels';\n    @Output() removeLabel = new EventEmitter<string>();\n\n    badgeWidth: number = 0;\n    expanded: boolean = false;\n    howManyItemsLeft = 0;\n    responsiveLabels: string[] = [];\n\n    private observer: ResizeObserver;\n    private width$ = new BehaviorSubject<number>(0);\n\n    constructor(\n        private changeDetectorRef: ChangeDetectorRef,\n        private elementRef: ElementRef,\n        private textMeasurementService: TextMeasurementService,\n        private zone: NgZone\n    ) {\n        this.observer = new ResizeObserver(entries => {\n            this.zone.run(() => {\n                this.width$.next(entries[0].contentRect.width);\n            });\n        });\n    }\n\n    ngAfterContentInit(): void {\n        if (this.responsive) {\n            this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);\n\n            this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n            this.width$.subscribe(width => {\n                this.generateResponsiveLabels(width);\n            });\n        }\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.labels.currentValue && this.responsive) {\n            this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);\n        }\n    }\n\n    ngOnDestroy() {\n        this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n    }\n\n    onExpand() {\n        this.expanded = !this.expanded;\n    }\n\n    onRemoveLabel({ content }: { content: string }): void {\n        this.removeLabel.emit(content);\n    }\n\n    onResize() {\n        this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);\n    }\n\n    public trackByLabelContent(_: number, entry: string) {\n        return entry;\n    }\n\n    private generateResponsiveLabels(width: number) {\n        let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth('+'.concat(this.labels.length.toString()), 14, 'Averta');\n        seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right\n        let elementWidth = width - 16 - 16; // width - padding-left - padding-right\n        elementWidth -= seeMoreElementWidth;\n        let currentIndex = 0;\n        for (let index = 0; index < this.labels.length; index++) {\n            let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');\n            textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing\n            elementWidth -= textWidth;\n            if (elementWidth <= 0) {\n                break;\n            }\n            currentIndex = index;\n        }\n        if (currentIndex + 1 === this.labels.length) {\n            this.expanded = false;\n        }\n        this.howManyItemsLeft = this.labels.length - (currentIndex + 1);\n        this.badgeWidth =\n            this.howManyItemsLeft > 0 && currentIndex === 0\n                ? this.textMeasurementService.calculateTextWidth('+' + this.howManyItemsLeft, 14, 'Averta') + 22\n                : 0;\n        this.responsiveLabels = this.labels.slice(0, currentIndex + 1);\n        this.changeDetectorRef.markForCheck();\n    }\n}\n","<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\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-labels.mjs","sources":["../../../libs/ui-components/labels/src/label.component.ts","../../../libs/ui-components/labels/src/label.component.html","../../../libs/ui-components/labels/src/agorapulse-ui-components-labels.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apClose, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n    AfterViewInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    inject,\n    Input,\n    NgZone,\n    OnDestroy,\n    Output,\n    ViewEncapsulation,\n} from '@angular/core';\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-label',\n    templateUrl: './label.component.html',\n    imports: [TooltipDirective, CloseButtonComponent],\n    styleUrls: ['./label.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class LabelComponent implements AfterViewInit, OnDestroy {\n    private elementRef: ElementRef = inject(ElementRef);\n    private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n    private zone: NgZone = inject(NgZone);\n\n    @Input({\n        required: true,\n    })\n    content!: string;\n    @Input() selectorWidth: number = 0; //Width of the selector input, if applicable\n    @Input({ transform: booleanAttribute }) removable: boolean = false;\n\n    @Output() remove = new EventEmitter<{ content: string; $event: MouseEvent }>();\n\n    private observer: ResizeObserver | undefined = undefined;\n    tooltipEnabled: boolean = false;\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apClose]);\n    }\n\n    ngAfterViewInit(): void {\n        this.observer = new ResizeObserver(entries => {\n            this.zone.run(() => {\n                const containerWidth =\n                    this.elementRef.nativeElement.clientWidth > 0 ? this.elementRef.nativeElement.clientWidth : this.selectorWidth;\n                if (containerWidth > 0) {\n                    this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;\n                }\n            });\n        });\n        this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);\n    }\n\n    ngOnDestroy() {\n        this.observer?.unobserve(this.elementRef.nativeElement.children[0]);\n    }\n\n    onClearLabel($event: MouseEvent) {\n        this.elementRef.nativeElement.remove();\n        this.remove.emit({ content: this.content, $event });\n    }\n}\n","<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <ap-close-button (closed)=\"onClearLabel($event)\" />\n    }\n</div>\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-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