@agorapulse/ui-components 15.1.31 → 16.0.0-rc.0

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

@@ -0,0 +1,173 @@
+import { NgClass, NgIf, NgForOf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
+import * as i1 from '@agorapulse/ui-symbol';
+import { apRemoveBold, SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i1$1 from '@agorapulse/ui-components/text-measurement';
+
+class LabelComponent {
+    elementRef;
+    zone;
+    symbolRegistry;
+    color = 'default';
+    content;
+    onlyText = false;
+    selectorWidth = 0; //Width of the selector input, if applicable
+    removable = false;
+    remove = new EventEmitter();
+    observer = undefined;
+    tooltipEnabled = false;
+    constructor(elementRef, zone, symbolRegistry) {
+        this.elementRef = elementRef;
+        this.zone = zone;
+        this.symbolRegistry = symbolRegistry;
+        this.symbolRegistry.registerSymbols([apRemoveBold]);
+    }
+    ngAfterViewInit() {
+        this.observer = new ResizeObserver(entries => {
+            this.zone.run(() => {
+                const containerWidth = this.elementRef.nativeElement.clientWidth > 0 ? this.elementRef.nativeElement.clientWidth : this.selectorWidth;
+                if (containerWidth > 0) {
+                    this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;
+                }
+            });
+        });
+        this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);
+    }
+    ngOnDestroy() {
+        this.observer?.unobserve(this.elementRef.nativeElement.children[0]);
+    }
+    onRemoveLabel() {
+        this.remove.emit(this.content);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: LabelComponent, isStandalone: true, selector: "ap-label", inputs: { color: "color", content: "content", onlyText: "onlyText", selectorWidth: "selectorWidth", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div\n    class=\"label\"\n    [ngClass]=\"color\"\n    [class.big-padding]=\"onlyText\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <div class=\"label-content\">{{ content }}</div>\n    <div\n        *ngIf=\"removable\"\n        class=\"delete-cross\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (click)=\"onRemoveLabel()\">\n        <ap-symbol\n            symbolId=\"remove-bold\"\n            size=\"pico\" />\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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}.label{padding:4px 8px;color:#344563;align-self:center;background:#e8f4ff;border-radius:25px;text-wrap:none;display:flex;align-items:center;border:none}.label.default{padding:0 8px;border:1px solid #74bbfe;height:24px;box-sizing:border-box;max-width:100%;text-overflow:ellipsis}.label.blue{background-color:#e8f4ff;color:#178dfe}.label.red{background-color:#fde7e7;color:#e81313}.label.purple{background-color:#efedf8;color:#6554c0}.label.orange{background-color:#ffefe9;color:#ff6726}.label.yellow{background-color:#fffde9;color:#ffe91f}.label.green{background-color:#ecf7ed;color:#45b854}.label.big-padding{padding:8px 16px}.label.removable{padding:0 0 0 8px}.label .label-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-cross{align-self:center;cursor:pointer;min-width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;margin:1px 1px 1px 4px}.delete-cross:hover{background-color:#d1e8ff}.delete-cross:hover ::ng-deep ap-symbol *{color:#178dfe}.delete-cross ::ng-deep ap-symbol *{color:#858fa1}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', standalone: true, imports: [SymbolComponent, NgClass, NgIf, TooltipDirective], template: "<div\n    class=\"label\"\n    [ngClass]=\"color\"\n    [class.big-padding]=\"onlyText\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <div class=\"label-content\">{{ content }}</div>\n    <div\n        *ngIf=\"removable\"\n        class=\"delete-cross\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (click)=\"onRemoveLabel()\">\n        <ap-symbol\n            symbolId=\"remove-bold\"\n            size=\"pico\" />\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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}.label{padding:4px 8px;color:#344563;align-self:center;background:#e8f4ff;border-radius:25px;text-wrap:none;display:flex;align-items:center;border:none}.label.default{padding:0 8px;border:1px solid #74bbfe;height:24px;box-sizing:border-box;max-width:100%;text-overflow:ellipsis}.label.blue{background-color:#e8f4ff;color:#178dfe}.label.red{background-color:#fde7e7;color:#e81313}.label.purple{background-color:#efedf8;color:#6554c0}.label.orange{background-color:#ffefe9;color:#ff6726}.label.yellow{background-color:#fffde9;color:#ffe91f}.label.green{background-color:#ecf7ed;color:#45b854}.label.big-padding{padding:8px 16px}.label.removable{padding:0 0 0 8px}.label .label-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-cross{align-self:center;cursor:pointer;min-width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;margin:1px 1px 1px 4px}.delete-cross:hover{background-color:#d1e8ff}.delete-cross:hover ::ng-deep ap-symbol *{color:#178dfe}.delete-cross ::ng-deep ap-symbol *{color:#858fa1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.SymbolRegistry }]; }, propDecorators: { color: [{
+                type: Input
+            }], content: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], onlyText: [{
+                type: Input
+            }], selectorWidth: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
+class LabelListComponent {
+    changeDetectorRef;
+    elementRef;
+    textMeasurementService;
+    zone;
+    labels = [];
+    removeLabelsEnabled = false;
+    responsive = false;
+    seeLessTranslation = 'See less';
+    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(label) {
+        this.removeLabel.emit(label);
+    }
+    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: "16.2.10", ngImport: i0, type: LabelListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.TextMeasurementService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: LabelListComponent, isStandalone: true, selector: "ap-label-list", inputs: { labels: "labels", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation" }, outputs: { removeLabel: "removeLabel" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    <ng-container *ngIf=\"responsive; else defaultLabels\">\n        <ng-container *ngFor=\"let label of expanded ? labels : responsiveLabels\">\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        </ng-container>\n\n        <button\n            *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n            class=\"label-expand\"\n            (click)=\"onExpand()\">\n            +{{ howManyItemsLeft }}\n        </button>\n        <button\n            *ngIf=\"expanded\"\n            class=\"label-retract\"\n            (click)=\"onExpand()\">\n            {{ seeLessTranslation }}\n        </button>\n    </ng-container>\n\n    <ng-template #defaultLabels>\n        <ng-container *ngFor=\"let label of labels; trackBy: trackByLabelContent\">\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        </ng-container>\n    </ng-template>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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%;padding:9px 16px;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}.label-retract{box-sizing:border-box;border:0;background-color:transparent;line-height:24px;color:#178dfe}.label-retract:hover{cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["color", "content", "onlyText", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: LabelListComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label-list', standalone: true, imports: [LabelComponent, NgForOf, NgIf], template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    <ng-container *ngIf=\"responsive; else defaultLabels\">\n        <ng-container *ngFor=\"let label of expanded ? labels : responsiveLabels\">\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        </ng-container>\n\n        <button\n            *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n            class=\"label-expand\"\n            (click)=\"onExpand()\">\n            +{{ howManyItemsLeft }}\n        </button>\n        <button\n            *ngIf=\"expanded\"\n            class=\"label-retract\"\n            (click)=\"onExpand()\">\n            {{ seeLessTranslation }}\n        </button>\n    </ng-container>\n\n    <ng-template #defaultLabels>\n        <ng-container *ngFor=\"let label of labels; trackBy: trackByLabelContent\">\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        </ng-container>\n    </ng-template>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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%;padding:9px 16px;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}.label-retract{box-sizing:border-box;border:0;background-color:transparent;line-height:24px;color:#178dfe}.label-retract:hover{cursor:pointer;text-decoration:underline}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.TextMeasurementService }, { type: i0.NgZone }]; }, propDecorators: { labels: [{
+                type: Input
+            }], removeLabelsEnabled: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], seeLessTranslation: [{
+                type: Input
+            }], removeLabel: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LabelComponent, LabelListComponent };
+//# sourceMappingURL=agorapulse-ui-components-labels.mjs.map

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

@@ -0,0 +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 { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { SymbolComponent, apRemoveBold, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { NgClass, NgIf } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    NgZone,\n    OnDestroy,\n    Output,\n} from '@angular/core';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-label',\n    standalone: true,\n    templateUrl: './label.component.html',\n    imports: [SymbolComponent, NgClass, NgIf, TooltipDirective],\n    styleUrls: ['./label.component.scss'],\n})\nexport class LabelComponent implements AfterViewInit, OnDestroy {\n    @Input() color: string | 'blue' | 'red' | 'purple' | 'orange' | 'yellow' | 'green' = 'default';\n    @Input({\n        required: true,\n    })\n    content!: string;\n    @Input() onlyText: boolean = false;\n    @Input() selectorWidth: number = 0; //Width of the selector input, if applicable\n    @Input() removable: boolean = false;\n\n    @Output() remove = new EventEmitter<string>();\n\n    private observer: ResizeObserver | undefined = undefined;\n    tooltipEnabled: boolean = false;\n\n    constructor(private elementRef: ElementRef, private zone: NgZone, public symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([apRemoveBold]);\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    onRemoveLabel() {\n        this.remove.emit(this.content);\n    }\n}\n","<div\n    class=\"label\"\n    [ngClass]=\"color\"\n    [class.big-padding]=\"onlyText\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <div class=\"label-content\">{{ content }}</div>\n    <div\n        *ngIf=\"removable\"\n        class=\"delete-cross\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (click)=\"onRemoveLabel()\">\n        <ap-symbol\n            symbolId=\"remove-bold\"\n            size=\"pico\" />\n    </div>\n</div>\n","import { TextMeasurementService } from '@agorapulse/ui-components/text-measurement';\nimport { NgForOf, NgIf } from '@angular/common';\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    standalone: true,\n    imports: [LabelComponent, NgForOf, NgIf],\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\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(label: string): void {\n        this.removeLabel.emit(label);\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    <ng-container *ngIf=\"responsive; else defaultLabels\">\n        <ng-container *ngFor=\"let label of expanded ? labels : responsiveLabels\">\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        </ng-container>\n\n        <button\n            *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n            class=\"label-expand\"\n            (click)=\"onExpand()\">\n            +{{ howManyItemsLeft }}\n        </button>\n        <button\n            *ngIf=\"expanded\"\n            class=\"label-retract\"\n            (click)=\"onExpand()\">\n            {{ seeLessTranslation }}\n        </button>\n    </ng-container>\n\n    <ng-template #defaultLabels>\n        <ng-container *ngFor=\"let label of labels; trackBy: trackByLabelContent\">\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        </ng-container>\n    </ng-template>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs

@@ -0,0 +1,101 @@
+import { FrozenGifDirective } from '@agorapulse/ui-components/directives';
+import * as i2 from '@agorapulse/ui-symbol';
+import { apClose, apArrowLeft1, apArrowRight1, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject, HostListener } from '@angular/core';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+var KEY_CODE;
+(function (KEY_CODE) {
+    KEY_CODE[KEY_CODE["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
+    KEY_CODE[KEY_CODE["LEFT_ARROW"] = 37] = "LEFT_ARROW";
+})(KEY_CODE || (KEY_CODE = {}));
+class MediaDisplayOverlayDialogComponent {
+    dialogRef;
+    data;
+    symbolRegistry;
+    static config = {
+        position: {
+            top: '10px',
+            right: '10px',
+            left: '10px',
+        },
+        height: '100%',
+        width: '100%',
+        maxWidth: 'none',
+        panelClass: 'full-screen-modal',
+        backdropClass: 'dark-backdrop',
+    };
+    currentUrlIndex = 1;
+    urls = []; // all urls
+    url = undefined; // current displayed url
+    mediaType = 'image'; // 'image', 'video'
+    supportGif = true;
+    constructor(dialogRef, data, symbolRegistry) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.symbolRegistry = symbolRegistry;
+        this.symbolRegistry.registerSymbols([apClose, apArrowLeft1, apArrowRight1]);
+    }
+    ngOnInit() {
+        // const data = ModalService.getModal('media-display-overlay') || {};
+        if (this.data) {
+            if (this.data.urls && this.data.urls.length > 0) {
+                this.urls = this.data.urls;
+            }
+            if (this.data.url) {
+                if (this.urls.length === 0) {
+                    this.urls = [this.data.url];
+                }
+                this.url = this.data.url;
+                this.currentUrlIndex = this.urls.indexOf(this.data.url) + 1;
+            }
+        }
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    onNext($event) {
+        if (this.currentUrlIndex < this.urls.length) {
+            this.currentUrlIndex += 1;
+            this.url = this.urls[this.currentUrlIndex - 1];
+        }
+        $event.stopPropagation();
+    }
+    onPrevious($event) {
+        if (this.currentUrlIndex > 1) {
+            this.currentUrlIndex -= 1;
+            this.url = this.urls[this.currentUrlIndex - 1];
+        }
+        $event.stopPropagation();
+    }
+    keyEvent(event) {
+        if (event.keyCode === KEY_CODE.RIGHT_ARROW) {
+            this.onNext(event);
+        }
+        if (event.keyCode === KEY_CODE.LEFT_ARROW) {
+            this.onPrevious(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: MediaDisplayOverlayDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, ngImport: i0, template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"micro\"\n                (click)=\"onClose()\" />\n        </header>\n        <content class=\"ap-modal-content\">\n            <div\n                *ngIf=\"urls.length > 1\"\n                class=\"next-prev-container left\"\n                [class.disabled]=\"currentUrlIndex <= 1\"\n                (click)=\"onPrevious($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        symbolId=\"arrow-left-1\"\n                        [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\"\n                        size=\"small\" />\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img\n                    *ngIf=\"url && mediaType === 'image'\"\n                    apFrozenGif\n                    [apFrozen]=\"!supportGif\"\n                    [src]=\"url\"\n                    (click)=\"$event.stopPropagation()\" />\n            </div>\n            <div\n                *ngIf=\"urls.length > 1\"\n                class=\"next-prev-container right\"\n                [class.disabled]=\"currentUrlIndex >= urls.length\"\n                (click)=\"onNext($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        symbolId=\"arrow-right-1\"\n                        [color]=\"currentUrlIndex >= urls.length ? 'grey-blue' : 'white'\"\n                        size=\"small\" />\n                </div>\n            </div>\n        </content>\n        <footer\n            *ngIf=\"urls && urls.length > 1\"\n            class=\"ap-modal-footer\">\n            <div class=\"index-container\">{{ currentUrlIndex }} / {{ urls.length }}</div>\n        </footer>\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%}.media-display .media-container{margin:auto;flex:1;align-items:center;flex-direction:column;display:flex}.media-display .media-container img{max-width:80%}.media-display .ap-modal-content{padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: MediaDisplayOverlayDialogComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', standalone: true, imports: [SymbolComponent, NgIf, FrozenGifDirective], template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"micro\"\n                (click)=\"onClose()\" />\n        </header>\n        <content class=\"ap-modal-content\">\n            <div\n                *ngIf=\"urls.length > 1\"\n                class=\"next-prev-container left\"\n                [class.disabled]=\"currentUrlIndex <= 1\"\n                (click)=\"onPrevious($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        symbolId=\"arrow-left-1\"\n                        [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\"\n                        size=\"small\" />\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img\n                    *ngIf=\"url && mediaType === 'image'\"\n                    apFrozenGif\n                    [apFrozen]=\"!supportGif\"\n                    [src]=\"url\"\n                    (click)=\"$event.stopPropagation()\" />\n            </div>\n            <div\n                *ngIf=\"urls.length > 1\"\n                class=\"next-prev-container right\"\n                [class.disabled]=\"currentUrlIndex >= urls.length\"\n                (click)=\"onNext($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        symbolId=\"arrow-right-1\"\n                        [color]=\"currentUrlIndex >= urls.length ? 'grey-blue' : 'white'\"\n                        size=\"small\" />\n                </div>\n            </div>\n        </content>\n        <footer\n            *ngIf=\"urls && urls.length > 1\"\n            class=\"ap-modal-footer\">\n            <div class=\"index-container\">{{ currentUrlIndex }} / {{ urls.length }}</div>\n        </footer>\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%}.media-display .media-container{margin:auto;flex:1;align-items:center;flex-direction:column;display:flex}.media-display .media-container img{max-width:80%}.media-display .ap-modal-content{padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2.SymbolRegistry }]; }, propDecorators: { keyEvent: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KEY_CODE, MediaDisplayOverlayDialogComponent };
+//# sourceMappingURL=agorapulse-ui-components-media-display-overlay.mjs.map

package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-media-display-overlay.mjs","sources":["../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.ts","../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.html","../../../libs/ui-components/media-display-overlay/src/agorapulse-ui-components-media-display-overlay.ts"],"sourcesContent":["import { FrozenGifDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent, apArrowLeft1, apArrowRight1, apClose, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { NgIf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';\n\nexport interface MediaDisplayData {\n    urls: string[];\n    url: string;\n    mediaType: string;\n    supportGif: boolean;\n}\n\nexport enum KEY_CODE {\n    RIGHT_ARROW = 39,\n    LEFT_ARROW = 37,\n}\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-media-display-overlay',\n    styleUrls: ['./media-display-overlay-dialog.component.scss'],\n    templateUrl: './media-display-overlay-dialog.component.html',\n    standalone: true,\n    imports: [SymbolComponent, NgIf, FrozenGifDirective],\n})\nexport class MediaDisplayOverlayDialogComponent implements OnInit {\n    static config: MatDialogConfig = {\n        position: {\n            top: '10px',\n            right: '10px',\n            left: '10px',\n        },\n        height: '100%',\n        width: '100%',\n        maxWidth: 'none',\n        panelClass: 'full-screen-modal',\n        backdropClass: 'dark-backdrop',\n    };\n\n    currentUrlIndex = 1;\n    urls: string[] = []; // all urls\n    url: string | undefined = undefined; // current displayed url\n    mediaType = 'image'; // 'image', 'video'\n    supportGif = true;\n\n    constructor(\n        public dialogRef: MatDialogRef<MediaDisplayOverlayDialogComponent>,\n        @Inject(MAT_DIALOG_DATA) public data: MediaDisplayData,\n        public symbolRegistry: SymbolRegistry\n    ) {\n        this.symbolRegistry.registerSymbols([apClose, apArrowLeft1, apArrowRight1]);\n    }\n\n    ngOnInit(): void {\n        // const data = ModalService.getModal('media-display-overlay') || {};\n        if (this.data) {\n            if (this.data.urls && this.data.urls.length > 0) {\n                this.urls = this.data.urls;\n            }\n            if (this.data.url) {\n                if (this.urls.length === 0) {\n                    this.urls = [this.data.url];\n                }\n                this.url = this.data.url;\n                this.currentUrlIndex = this.urls.indexOf(this.data.url) + 1;\n            }\n        }\n    }\n\n    onClose() {\n        this.dialogRef.close();\n    }\n\n    onNext($event: UIEvent) {\n        if (this.currentUrlIndex < this.urls.length) {\n            this.currentUrlIndex += 1;\n            this.url = this.urls[this.currentUrlIndex - 1];\n        }\n        $event.stopPropagation();\n    }\n\n    onPrevious($event: UIEvent) {\n        if (this.currentUrlIndex > 1) {\n            this.currentUrlIndex -= 1;\n            this.url = this.urls[this.currentUrlIndex - 1];\n        }\n        $event.stopPropagation();\n    }\n\n    @HostListener('window:keyup', ['$event'])\n    keyEvent(event: KeyboardEvent) {\n        if (event.keyCode === KEY_CODE.RIGHT_ARROW) {\n            this.onNext(event);\n        }\n\n        if (event.keyCode === KEY_CODE.LEFT_ARROW) {\n            this.onPrevious(event);\n        }\n    }\n}\n","<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"micro\"\n                (click)=\"onClose()\" />\n        </header>\n        <content class=\"ap-modal-content\">\n            <div\n                *ngIf=\"urls.length > 1\"\n                class=\"next-prev-container left\"\n                [class.disabled]=\"currentUrlIndex <= 1\"\n                (click)=\"onPrevious($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        symbolId=\"arrow-left-1\"\n                        [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\"\n                        size=\"small\" />\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img\n                    *ngIf=\"url && mediaType === 'image'\"\n                    apFrozenGif\n                    [apFrozen]=\"!supportGif\"\n                    [src]=\"url\"\n                    (click)=\"$event.stopPropagation()\" />\n            </div>\n            <div\n                *ngIf=\"urls.length > 1\"\n                class=\"next-prev-container right\"\n                [class.disabled]=\"currentUrlIndex >= urls.length\"\n                (click)=\"onNext($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        symbolId=\"arrow-right-1\"\n                        [color]=\"currentUrlIndex >= urls.length ? 'grey-blue' : 'white'\"\n                        size=\"small\" />\n                </div>\n            </div>\n        </content>\n        <footer\n            *ngIf=\"urls && urls.length > 1\"\n            class=\"ap-modal-footer\">\n            <div class=\"index-container\">{{ currentUrlIndex }} / {{ urls.length }}</div>\n        </footer>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;IAaY,SAGX;AAHD,CAAA,UAAY,QAAQ,EAAA;AAChB,IAAA,QAAA,CAAA,QAAA,CAAA,aAAA,CAAA,GAAA,EAAA,CAAA,GAAA,aAAgB,CAAA;AAChB,IAAA,QAAA,CAAA,QAAA,CAAA,YAAA,CAAA,GAAA,EAAA,CAAA,GAAA,YAAe,CAAA;AACnB,CAAC,EAHW,QAAQ,KAAR,QAAQ,GAGnB,EAAA,CAAA,CAAA,CAAA;MAUY,kCAAkC,CAAA;AAqBhC,IAAA,SAAA,CAAA;AACyB,IAAA,IAAA,CAAA;AACzB,IAAA,cAAA,CAAA;IAtBX,OAAO,MAAM,GAAoB;AAC7B,QAAA,QAAQ,EAAE;AACN,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,MAAM;AACf,SAAA;AACD,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,mBAAmB;AAC/B,QAAA,aAAa,EAAE,eAAe;KACjC,CAAC;IAEF,eAAe,GAAG,CAAC,CAAC;AACpB,IAAA,IAAI,GAAa,EAAE,CAAC;AACpB,IAAA,GAAG,GAAuB,SAAS,CAAC;AACpC,IAAA,SAAS,GAAG,OAAO,CAAC;IACpB,UAAU,GAAG,IAAI,CAAC;AAElB,IAAA,WAAA,CACW,SAA2D,EAClC,IAAsB,EAC/C,cAA8B,EAAA;QAF9B,IAAS,CAAA,SAAA,GAAT,SAAS,CAAkD;QAClC,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAkB;QAC/C,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;AAErC,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;KAC/E;IAED,QAAQ,GAAA;;QAEJ,IAAI,IAAI,CAAC,IAAI,EAAE;AACX,YAAA,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,aAAA;AACD,YAAA,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;AACf,gBAAA,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;oBACxB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/B,iBAAA;gBACD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB,gBAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC/D,aAAA;AACJ,SAAA;KACJ;IAED,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;KAC1B;AAED,IAAA,MAAM,CAAC,MAAe,EAAA;QAClB,IAAI,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACzC,YAAA,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC;AAC1B,YAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;AAClD,SAAA;QACD,MAAM,CAAC,eAAe,EAAE,CAAC;KAC5B;AAED,IAAA,UAAU,CAAC,MAAe,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;AAC1B,YAAA,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC;AAC1B,YAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;AAClD,SAAA;QACD,MAAM,CAAC,eAAe,EAAE,CAAC;KAC5B;AAGD,IAAA,QAAQ,CAAC,KAAoB,EAAA;AACzB,QAAA,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,WAAW,EAAE;AACxC,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACtB,SAAA;AAED,QAAA,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,UAAU,EAAE;AACvC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAA;KACJ;AAzEQ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kCAAkC,8CAsB/B,eAAe,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAtBlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kCAAkC,iJC1B/C,69DAoDA,EAAA,MAAA,EAAA,CAAA,wlOAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED5Bc,eAAe,EAAE,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,kBAAkB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE1C,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAR9C,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,0BAA0B,EAGxB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,eAAe,EAAE,IAAI,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,69DAAA,EAAA,MAAA,EAAA,CAAA,wlOAAA,CAAA,EAAA,CAAA;;0BAwB/C,MAAM;2BAAC,eAAe,CAAA;yEA2C3B,QAAQ,EAAA,CAAA;sBADP,YAAY;uBAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,CAAA;;;AE1F5C;;AAEG;;;;"}

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

@@ -0,0 +1,126 @@
+import { ButtonComponent } from '@agorapulse/ui-components/button';
+import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
+import * as i2 from '@agorapulse/ui-symbol';
+import { apClose, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgStyle, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import * as i1 from '@angular/material/dialog';
+
+class ModalComponent {
+    dialogRef;
+    symbolRegistry;
+    static PANEL_CLASS = 'modal-container';
+    constructor(dialogRef, symbolRegistry) {
+        this.dialogRef = dialogRef;
+        this.symbolRegistry = symbolRegistry;
+        dialogRef.disableClose = true;
+        this.symbolRegistry.registerSymbols([apClose]);
+    }
+    closable = false;
+    headerBottomBorderEnabled = false;
+    footerTemplate = undefined;
+    footerVisible = true;
+    headerTemplate = undefined;
+    headerVisible = true;
+    mainTemplate;
+    config = undefined;
+    sidePaneTemplate = undefined;
+    sidePaneStyle = {};
+    containerStyle = {};
+    headerStyle = {};
+    contentStyle = {};
+    footerStyle = {};
+    defaultLayout = true;
+    /**
+     * Use it to open a modal containing the {@link componentType} component, with the right configuration.
+     */
+    static openWithComponent(matDialog, config, componentType) {
+        let matDialogConfig;
+        if (config) {
+            matDialogConfig = config.matDialogConfig;
+            if (matDialogConfig && config.matDialogConfig) {
+                matDialogConfig.panelClass = Array.isArray(config.matDialogConfig.panelClass)
+                    ? [...config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS] // in case where the panelClass is an array
+                    : [config.matDialogConfig.panelClass ?? '', ModalComponent.PANEL_CLASS]; // in the other case, it's a String
+            }
+            else {
+                matDialogConfig = { panelClass: ModalComponent.PANEL_CLASS };
+            }
+        }
+        else {
+            matDialogConfig = {
+                panelClass: ModalComponent.PANEL_CLASS,
+            };
+        }
+        matDialogConfig.autoFocus = false; // Prevent first button to be focused
+        const dialogRef = matDialog.open(componentType, matDialogConfig);
+        if (config?.backdropCloseEnable === true) {
+            dialogRef.disableClose = false;
+        }
+        return dialogRef;
+    }
+    /**
+     * Use it to open a modal containing the provided templates, with the right configuration.
+     */
+    static openWithTemplates(matDialog, headerTemplate, mainTemplate, footerTemplate, config, sidePaneTemplate) {
+        const dialogRef = ModalComponent.openWithComponent(matDialog, config, ModalComponent);
+        dialogRef.componentInstance.closable = config && config.closable ? config.closable : false;
+        dialogRef.componentInstance.headerBottomBorderEnabled =
+            config && config.headerBottomBorderEnabled ? config.headerBottomBorderEnabled : false;
+        dialogRef.componentInstance.headerTemplate = headerTemplate;
+        dialogRef.componentInstance.mainTemplate = mainTemplate;
+        dialogRef.componentInstance.footerTemplate = footerTemplate;
+        dialogRef.componentInstance.sidePaneTemplate = sidePaneTemplate;
+        return dialogRef;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ModalComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: ModalComponent, isStandalone: true, selector: "ap-modal", inputs: { closable: "closable", headerBottomBorderEnabled: "headerBottomBorderEnabled", footerTemplate: "footerTemplate", footerVisible: "footerVisible", headerTemplate: "headerTemplate", headerVisible: "headerVisible", mainTemplate: "mainTemplate", config: "config", sidePaneTemplate: "sidePaneTemplate", sidePaneStyle: "sidePaneStyle", containerStyle: "containerStyle", headerStyle: "headerStyle", contentStyle: "contentStyle", footerStyle: "footerStyle", defaultLayout: "defaultLayout" }, ngImport: i0, template: "<div\n    *ngIf=\"sidePaneTemplate\"\n    [ngStyle]=\"sidePaneStyle\"\n    [ngClass]=\"{ pane: defaultLayout }\">\n    <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\" />\n</div>\n\n<div\n    [ngStyle]=\"containerStyle\"\n    class=\"modal-wrapper\"\n    [class.default-layout]=\"defaultLayout\">\n    <ap-icon-button\n        *ngIf=\"closable\"\n        class=\"close-button\"\n        ariaLabel=\"Close button\"\n        name=\"close-button\"\n        color=\"none\"\n        (onClick)=\"close()\"\n        type=\"flat\">\n        <ap-symbol symbolId=\"close\" />\n    </ap-icon-button>\n    <div\n        *ngIf=\"headerTemplate && headerVisible\"\n        [ngStyle]=\"headerStyle\"\n        [ngClass]=\"{ header: defaultLayout }\"\n        [class.border-bottom]=\"headerBottomBorderEnabled\">\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n    </div>\n    <div\n        *ngIf=\"mainTemplate\"\n        [ngStyle]=\"contentStyle\"\n        [class.content]=\"defaultLayout\">\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\" />\n    </div>\n    <div\n        *ngIf=\"footerTemplate && footerVisible\"\n        [ngStyle]=\"footerStyle\"\n        [ngClass]=\"{ footer: defaultLayout }\">\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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}:host{display:flex;flex-direction:row;max-height:90vh}.modal-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.modal-wrapper.default-layout{padding-top:24px;padding-bottom:16px}.modal-wrapper .close-button{margin:-12px;position:absolute;right:24px;top:24px}.modal-wrapper .close-button ap-symbol{height:12px;width:12px}.modal-wrapper .header{padding:0 24px 16px}.modal-wrapper .header ::ng-deep h2{margin-top:0}.modal-wrapper .header.border-bottom{border-bottom:1px solid #eaecef;margin-bottom:16px}.modal-wrapper .content{color:#5d6a82;font-size:16px;padding:0 24px;flex:1;overflow-y:auto;overflow-x:hidden}.modal-wrapper .footer{align-items:center;box-shadow:0 1px #eaecef inset;display:flex;justify-content:flex-end;margin-top:24px;padding:16px 24px 0}.pane{padding:24px}::ng-deep .modal-container{max-width:100vw!important;margin:24px 24px 64px}::ng-deep .modal-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px;box-shadow:0 25px 50px #0000000a;max-width:100vw;padding:0}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(52,69,99,.7)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-modal', standalone: true, imports: [SymbolComponent, NgStyle, NgClass, NgIf, ButtonComponent, NgTemplateOutlet, IconButtonComponent], template: "<div\n    *ngIf=\"sidePaneTemplate\"\n    [ngStyle]=\"sidePaneStyle\"\n    [ngClass]=\"{ pane: defaultLayout }\">\n    <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\" />\n</div>\n\n<div\n    [ngStyle]=\"containerStyle\"\n    class=\"modal-wrapper\"\n    [class.default-layout]=\"defaultLayout\">\n    <ap-icon-button\n        *ngIf=\"closable\"\n        class=\"close-button\"\n        ariaLabel=\"Close button\"\n        name=\"close-button\"\n        color=\"none\"\n        (onClick)=\"close()\"\n        type=\"flat\">\n        <ap-symbol symbolId=\"close\" />\n    </ap-icon-button>\n    <div\n        *ngIf=\"headerTemplate && headerVisible\"\n        [ngStyle]=\"headerStyle\"\n        [ngClass]=\"{ header: defaultLayout }\"\n        [class.border-bottom]=\"headerBottomBorderEnabled\">\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n    </div>\n    <div\n        *ngIf=\"mainTemplate\"\n        [ngStyle]=\"contentStyle\"\n        [class.content]=\"defaultLayout\">\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\" />\n    </div>\n    <div\n        *ngIf=\"footerTemplate && footerVisible\"\n        [ngStyle]=\"footerStyle\"\n        [ngClass]=\"{ footer: defaultLayout }\">\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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=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}:host{display:flex;flex-direction:row;max-height:90vh}.modal-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.modal-wrapper.default-layout{padding-top:24px;padding-bottom:16px}.modal-wrapper .close-button{margin:-12px;position:absolute;right:24px;top:24px}.modal-wrapper .close-button ap-symbol{height:12px;width:12px}.modal-wrapper .header{padding:0 24px 16px}.modal-wrapper .header ::ng-deep h2{margin-top:0}.modal-wrapper .header.border-bottom{border-bottom:1px solid #eaecef;margin-bottom:16px}.modal-wrapper .content{color:#5d6a82;font-size:16px;padding:0 24px;flex:1;overflow-y:auto;overflow-x:hidden}.modal-wrapper .footer{align-items:center;box-shadow:0 1px #eaecef inset;display:flex;justify-content:flex-end;margin-top:24px;padding:16px 24px 0}.pane{padding:24px}::ng-deep .modal-container{max-width:100vw!important;margin:24px 24px 64px}::ng-deep .modal-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px;box-shadow:0 25px 50px #0000000a;max-width:100vw;padding:0}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(52,69,99,.7)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: i2.SymbolRegistry }]; }, propDecorators: { closable: [{
+                type: Input
+            }], headerBottomBorderEnabled: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], footerVisible: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], headerVisible: [{
+                type: Input
+            }], mainTemplate: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], config: [{
+                type: Input
+            }], sidePaneTemplate: [{
+                type: Input
+            }], sidePaneStyle: [{
+                type: Input
+            }], containerStyle: [{
+                type: Input
+            }], headerStyle: [{
+                type: Input
+            }], contentStyle: [{
+                type: Input
+            }], footerStyle: [{
+                type: Input
+            }], defaultLayout: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ModalComponent };
+//# sourceMappingURL=agorapulse-ui-components-modal.mjs.map