npm - @agorapulse/ui-components - Versions diffs - 15.1.28 → 15.1.31 - Mend

@agorapulse/ui-components 15.1.28 → 15.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/fesm2015/agorapulse-ui-components-infobox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import {ButtonComponent} from '@agorapulse/ui-components/button';\nimport {\n agorapulseSymbol,\n AgorapulseUiSymbolModule,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport {NgClass, NgIf} from '@angular/common';\nimport {AfterViewInit, ElementRef, EventEmitter} from '@angular/core';\nimport {Output} from '@angular/core';\nimport {inject} from '@angular/core';\nimport {ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';\nexport type InfoboxDirection = 'column' \| 'row';\nexport type InfoboxWidth = 'fit' \| 'full-width';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly ~~CONTAINER_WIDTH_BREAKPOINT = 588;\n\n private readonly~~ symbolRegistry = inject(SymbolRegistry);\n private readonly elementRef = inject(ElementRef);\n\n @HostBinding('class.full-width') fullWidth: boolean = false;\n\n @Input() buttonLabel: string;\n @Input() closable: boolean = false;\n @Input() title?: string;\n @Input() type: 'info' \| 'warning' \| 'error' \| 'success' = 'info';\n\n @Input() set width(width: InfoboxWidth) {\n this._width = width;\n this.fullWidth = width === 'full-width';\n }\n get width(): InfoboxWidth {\n return this._width;\n }\n private _width: InfoboxWidth = 'fit';\n\n @Output() buttonClicked = new EventEmitter<void>();\n\n displayDirection: 'horizontal' \| 'vertical' = 'horizontal';\n\n readonly symbolIds: {[k: string]: agorapulseSymbol} = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([\n apInformationCircle~~,\n~~ apAlertCircle~~,\n~~ apRemoveCircle~~,\n~~ apCheckCircle~~,\n~~ apClose~~,\n~~ ]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\n }\n}\n","<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;MA4Ba,gBAAgB,CAAA;~~IAazB~~,IAAa,KAAK,CAAC,KAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,KAAK,YAAY,CAAC;KAC3C;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;~~AAcD~~,IAAA,WAAA,GAAA;~~AAhCiB~~,QAAA,~~IAA0B,CAAA,0BAAA,GAAG,GAAG,CAAC;AAEjC,QAAA,~~IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACxC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAEhB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;AAGnD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAE1B,QAAA,IAAI,CAAA,IAAA,GAA6C,MAAM,CAAC;AASzD,QAAA,IAAM,CAAA,MAAA,GAAiB,KAAK,CAAC;AAE3B,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAQ,CAAC;~~AAEnD~~,QAAA,IAAgB,CAAA,gBAAA,GAA8B,YAAY,CAAC;QAElD,IAAA,CAAA,SAAS,~~GAAoC~~;~~AAClD~~,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,OAAO,EAAE,cAAc;SAC1B,CAAC;AAGE,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC~~;YAChC~~,mBAAmB~~;YACnB~~,aAAa~~;YACb~~,cAAc~~;YACd~~,aAAa~~;YACb~~,OAAO~~;AACV~~,~~SAAA~~,CAAC,CAAC;~~KACN~~;IAED,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC7B;IAED,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;~~KAC1C~~;;~~6GAjDQ~~,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB~~,+RC5B7B~~,o5FA0DA,EAAA,MAAA,EAAA,CAAA,gpHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlCc,wBAAwB,EAAW,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FAIzD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;YACI,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cAGV,IAAI,EAAA,OAAA,EACP,CAAC,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,CAAC,mBAClD,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,o5FAAA,EAAA,MAAA,EAAA,CAAA,gpHAAA,CAAA,EAAA,CAAA;~~0EAQJ~~,SAAS,EAAA,CAAA;sBAAzC,WAAW;uBAAC,kBAAkB,CAAA;gBAEtB,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEO,KAAK,EAAA,CAAA;sBAAjB,KAAK;gBASI,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;~~AElDX~~;;AAEG;;;;"}
1	+ {"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {\n agorapulseSymbol,\n AgorapulseUiSymbolModule,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgIf } from '@angular/common';\nimport { AfterViewInit, ElementRef, EventEmitter } from '@angular/core';\nimport { Output } from '@angular/core';\nimport { inject } from '@angular/core';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\nexport type InfoboxDirection = 'column' \| 'row';\nexport type InfoboxWidth = 'fit' \| 'full-width';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly elementRef = inject(ElementRef);\n\n @HostBinding('class.full-width') fullWidth: boolean = false;\n\n @Input() buttonLabel: string;\n @Input() closable: boolean = false;\n @Input() title?: string;\n @Input() type: 'info' \| 'warning' \| 'error' \| 'success' = 'info';\n\n @Input() set width(width: InfoboxWidth) {\n this._width = width;\n this.fullWidth = width === 'full-width';\n }\n get width(): InfoboxWidth {\n return this._width;\n }\n private _width: InfoboxWidth = 'fit';\n\n @Output() buttonClicked = new EventEmitter<void>();\n @Output() closed = new EventEmitter<void>();\n\n displayDirection: 'horizontal' \| 'vertical' = 'horizontal';\n\n readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\n this.closed.emit();\n }\n}\n","<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/agorapulse-ui-components-media-display-overlay.mjs CHANGED Viewed

@@ -81,10 +81,10 @@ MediaDisplayOverlayDialogComponent.config = {
     backdropClass: 'dark-backdrop',
 };
 MediaDisplayOverlayDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: MediaDisplayOverlayDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-MediaDisplayOverlayDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, ngImport: i0, template: "<div class=\"full\" (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            </ap-symbol>\n        </header>\n        <content class=\"ap-modal-content\">\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img *ngIf=\"url && mediaType ==='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n            </div>\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n        </content>\n        <footer *ngIf=\"urls && urls.length > 1\"\n                class=\"ap-modal-footer\">\n            <div class=\"index-container\">\n                {{currentUrlIndex}} / {{urls.length}}\n            </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%}.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: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i2.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { 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 });
+MediaDisplayOverlayDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, ngImport: i0, template: "<div class=\"full\" (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            </ap-symbol>\n        </header>\n        <content class=\"ap-modal-content\">\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img *ngIf=\"url && mediaType ==='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n            </div>\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n        </content>\n        <footer *ngIf=\"urls && urls.length > 1\"\n                class=\"ap-modal-footer\">\n            <div class=\"index-container\">\n                {{currentUrlIndex}} / {{urls.length}}\n            </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: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i2.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { 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: "15.1.2", ngImport: i0, type: MediaDisplayOverlayDialogComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', standalone: true, imports: [AgorapulseUiSymbolModule, NgIf, FrozenGifDirective], template: "<div class=\"full\" (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            </ap-symbol>\n        </header>\n        <content class=\"ap-modal-content\">\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img *ngIf=\"url && mediaType ==='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n            </div>\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n        </content>\n        <footer *ngIf=\"urls && urls.length > 1\"\n                class=\"ap-modal-footer\">\n            <div class=\"index-container\">\n                {{currentUrlIndex}} / {{urls.length}}\n            </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%}.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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', standalone: true, imports: [AgorapulseUiSymbolModule, NgIf, FrozenGifDirective], template: "<div class=\"full\" (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            </ap-symbol>\n        </header>\n        <content class=\"ap-modal-content\">\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img *ngIf=\"url && mediaType ==='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n            </div>\n            <div *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                    </ap-symbol>\n                </div>\n            </div>\n        </content>\n        <footer *ngIf=\"urls && urls.length > 1\"\n                class=\"ap-modal-footer\">\n            <div class=\"index-container\">\n                {{currentUrlIndex}} / {{urls.length}}\n            </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,

package/fesm2015/agorapulse-ui-components-media-display-overlay.mjs.map CHANGED Viewed

	@@ -1 +1 @@
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 {AgorapulseUiSymbolModule, 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: [AgorapulseUiSymbolModule, 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; // 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([\n apClose,\n apArrowLeft1,\n apArrowRight1\n ]);\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 class=\"full\" (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 </ap-symbol>\n </header>\n <content class=\"ap-modal-content\">\n <div 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 </ap-symbol>\n </div>\n </div>\n <div class=\"media-container\">\n <img ngIf=\"url && mediaType ==='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n </div>\n <div 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 </ap-symbol>\n </div>\n </div>\n </content>\n <footer ngIf=\"urls && urls.length > 1\"\n class=\"ap-modal-footer\">\n <div class=\"index-container\">\n {{currentUrlIndex}} / {{urls.length}}\n </div>\n </footer>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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~~4/NAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDvBc,wBAAwB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,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;2FAEnD,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,wBAAwB,EAAE,IAAI,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,u7DAAA,EAAA,MAAA,EAAA,CAAA,~~4/NAAA~~,CAAA,EAAA,CAAA;;;8BAwBxD,MAAM;+BAAC,eAAe,CAAA;;yBA+C3B,QAAQ,EAAA,CAAA;sBADP,YAAY;uBAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,CAAA;;;AE9F5C;;AAEG;;;;"}
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 {AgorapulseUiSymbolModule, 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: [AgorapulseUiSymbolModule, 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; // 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([\n apClose,\n apArrowLeft1,\n apArrowRight1\n ]);\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 class=\"full\" (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 </ap-symbol>\n </header>\n <content class=\"ap-modal-content\">\n <div 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 </ap-symbol>\n </div>\n </div>\n <div class=\"media-container\">\n <img ngIf=\"url && mediaType ==='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n </div>\n <div 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 </ap-symbol>\n </div>\n </div>\n </content>\n <footer ngIf=\"urls && urls.length > 1\"\n class=\"ap-modal-footer\">\n <div class=\"index-container\">\n {{currentUrlIndex}} / {{urls.length}}\n </div>\n </footer>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/agorapulse-ui-components-modal.mjs CHANGED Viewed

@@ -72,10 +72,10 @@ class ModalComponent {
 }
 ModalComponent.PANEL_CLASS = 'modal-container';
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: ModalComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", 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 *ngIf=\"sidePaneTemplate\"\n     [ngStyle]=\"sidePaneStyle\"\n     [ngClass]=\"{pane: defaultLayout}\">\n    <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\"></ng-template>\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    >\n        <ap-symbol symbolId=\"close\"></ap-symbol>\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\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"mainTemplate\"\n        [ngStyle]=\"contentStyle\"\n        [class.content]=\"defaultLayout\"\n    >\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"footerTemplate && footerVisible\"\n        [ngStyle]=\"footerStyle\"\n        [ngClass]=\"{footer: defaultLayout}\">\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\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-dialog-container{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: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i2.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { 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 });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", 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 *ngIf=\"sidePaneTemplate\"\n     [ngStyle]=\"sidePaneStyle\"\n     [ngClass]=\"{pane: defaultLayout}\">\n    <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\"></ng-template>\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    >\n        <ap-symbol symbolId=\"close\"></ap-symbol>\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\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"mainTemplate\"\n        [ngStyle]=\"contentStyle\"\n        [class.content]=\"defaultLayout\"\n    >\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"footerTemplate && footerVisible\"\n        [ngStyle]=\"footerStyle\"\n        [ngClass]=\"{footer: defaultLayout}\">\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\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: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i2.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { 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: "15.1.2", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-modal', standalone: true, imports: [AgorapulseUiSymbolModule, NgStyle, NgClass, NgIf, ButtonComponent, NgTemplateOutlet, IconButtonComponent], template: "<div *ngIf=\"sidePaneTemplate\"\n     [ngStyle]=\"sidePaneStyle\"\n     [ngClass]=\"{pane: defaultLayout}\">\n    <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\"></ng-template>\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    >\n        <ap-symbol symbolId=\"close\"></ap-symbol>\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\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"mainTemplate\"\n        [ngStyle]=\"contentStyle\"\n        [class.content]=\"defaultLayout\"\n    >\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"footerTemplate && footerVisible\"\n        [ngStyle]=\"footerStyle\"\n        [ngClass]=\"{footer: defaultLayout}\">\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\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-dialog-container{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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-modal', standalone: true, imports: [AgorapulseUiSymbolModule, NgStyle, NgClass, NgIf, ButtonComponent, NgTemplateOutlet, IconButtonComponent], template: "<div *ngIf=\"sidePaneTemplate\"\n     [ngStyle]=\"sidePaneStyle\"\n     [ngClass]=\"{pane: defaultLayout}\">\n    <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\"></ng-template>\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    >\n        <ap-symbol symbolId=\"close\"></ap-symbol>\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\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"mainTemplate\"\n        [ngStyle]=\"contentStyle\"\n        [class.content]=\"defaultLayout\"\n    >\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"footerTemplate && footerVisible\"\n        [ngStyle]=\"footerStyle\"\n        [ngClass]=\"{footer: defaultLayout}\">\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\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: [{

package/fesm2015/agorapulse-ui-components-modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-modal.mjs","sources":["../../../libs/ui-components/modal/src/modal.component.ts","../../../libs/ui-components/modal/src/modal.component.html","../../../libs/ui-components/modal/src/agorapulse-ui-components-modal.ts"],"sourcesContent":["import {AgorapulseUiSymbolModule, apClose, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {ComponentType} from '@angular/cdk/portal';\nimport {NgClass, NgIf, NgStyle, NgTemplateOutlet} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Input, TemplateRef} from '@angular/core';\nimport {MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';\nimport {IconButtonComponent} from \"@agorapulse/ui-components/icon-button\";\nimport {ButtonComponent} from \"@agorapulse/ui-components/button\";\n\nexport interface ModalConfig extends ModalConfigBase {\n closable?: boolean;\n headerBottomBorderEnabled?: boolean;\n}\n\nexport interface ModalConfigBase {\n backdropCloseEnable?: boolean;\n matDialogConfig?: MatDialogConfig;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-modal',\n templateUrl: 'modal.component.html',\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgStyle, NgClass, NgIf, ButtonComponent, NgTemplateOutlet, IconButtonComponent],\n styleUrls: ['modal.component.scss'],\n})\nexport class ModalComponent {\n static readonly PANEL_CLASS = 'modal-container';\n\n constructor(public dialogRef: MatDialogRef<ComponentType<any>>,\n public symbolRegistry: SymbolRegistry) {\n dialogRef.disableClose = true;\n this.symbolRegistry.registerSymbols([\n apClose\n ]);\n }\n\n @Input() closable: boolean;\n @Input() headerBottomBorderEnabled: boolean;\n @Input() footerTemplate: TemplateRef<any>;\n @Input() footerVisible = true;\n @Input() headerTemplate: TemplateRef<any>;\n @Input() headerVisible = true;\n @Input() mainTemplate: TemplateRef<any>;\n @Input() config: MatDialogConfig;\n @Input() sidePaneTemplate: TemplateRef<any>;\n @Input() sidePaneStyle: {[arg: string]: string} = {};\n @Input() containerStyle: {[arg: string]: string} = {};\n @Input() headerStyle: {[arg: string]: string} = {};\n @Input() contentStyle: {[arg: string]: string} = {};\n @Input() footerStyle: {[arg: string]: string} = {};\n @Input() defaultLayout = true;\n\n /*\n Use it to open a modal containing the {@link componentType} component, with the right configuration.\n /\n static openWithComponent<T>(\n matDialog: MatDialog,\n config: ModalConfigBase,\n componentType: ComponentType<T>\n ): MatDialogRef<T> {\n let matDialogConfig: MatDialogConfig;\n if (config) {\n matDialogConfig = config.matDialogConfig;\n if (matDialogConfig) {\n matDialogConfig.panelClass = Array.isArray(config.matDialogConfig.panelClass)\n ? [...config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS] // in case where the panelClass is an array\n : [config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS]; // in the other case, it's a String\n } else {\n matDialogConfig = {panelClass: ModalComponent.PANEL_CLASS};\n }\n } else {\n matDialogConfig = {\n panelClass: ModalComponent.PANEL_CLASS,\n };\n }\n matDialogConfig.autoFocus = false; // Prevent first button to be focused\n\n const dialogRef = matDialog.open(componentType, matDialogConfig);\n if (config.backdropCloseEnable === true) {\n dialogRef.disableClose = false;\n }\n return dialogRef;\n }\n\n /\n Use it to open a modal containing the provided templates, with the right configuration.\n /\n static openWithTemplates(\n matDialog: MatDialog,\n headerTemplate: TemplateRef<any>,\n mainTemplate: TemplateRef<any>,\n footerTemplate?: TemplateRef<any>,\n config?: ModalConfig,\n sidePaneTemplate?: TemplateRef<any>,\n ): MatDialogRef<ModalComponent> {\n const dialogRef = ModalComponent.openWithComponent(matDialog, config, ModalComponent);\n dialogRef.componentInstance.closable = config && config.closable ? config.closable : false;\n dialogRef.componentInstance.headerBottomBorderEnabled =\n config && config.headerBottomBorderEnabled ? config.headerBottomBorderEnabled : false;\n dialogRef.componentInstance.headerTemplate = headerTemplate;\n dialogRef.componentInstance.mainTemplate = mainTemplate;\n dialogRef.componentInstance.footerTemplate = footerTemplate;\n dialogRef.componentInstance.sidePaneTemplate = sidePaneTemplate;\n return dialogRef;\n }\n\n close(): void {\n this.dialogRef.close();\n }\n}\n","<div ngIf=\"sidePaneTemplate\"\n [ngStyle]=\"sidePaneStyle\"\n [ngClass]=\"{pane: defaultLayout}\">\n <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\"></ng-template>\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 >\n <ap-symbol symbolId=\"close\"></ap-symbol>\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\"></ng-template>\n </div>\n <div\n ngIf=\"mainTemplate\"\n [ngStyle]=\"contentStyle\"\n [class.content]=\"defaultLayout\"\n >\n <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n </div>\n <div\n ngIf=\"footerTemplate && footerVisible\"\n [ngStyle]=\"footerStyle\"\n [ngClass]=\"{footer: defaultLayout}\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"agorapulse-ui-components-modal.mjs","sources":["../../../libs/ui-components/modal/src/modal.component.ts","../../../libs/ui-components/modal/src/modal.component.html","../../../libs/ui-components/modal/src/agorapulse-ui-components-modal.ts"],"sourcesContent":["import {AgorapulseUiSymbolModule, apClose, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {ComponentType} from '@angular/cdk/portal';\nimport {NgClass, NgIf, NgStyle, NgTemplateOutlet} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Input, TemplateRef} from '@angular/core';\nimport {MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';\nimport {IconButtonComponent} from \"@agorapulse/ui-components/icon-button\";\nimport {ButtonComponent} from \"@agorapulse/ui-components/button\";\n\nexport interface ModalConfig extends ModalConfigBase {\n closable?: boolean;\n headerBottomBorderEnabled?: boolean;\n}\n\nexport interface ModalConfigBase {\n backdropCloseEnable?: boolean;\n matDialogConfig?: MatDialogConfig;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-modal',\n templateUrl: 'modal.component.html',\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgStyle, NgClass, NgIf, ButtonComponent, NgTemplateOutlet, IconButtonComponent],\n styleUrls: ['modal.component.scss'],\n})\nexport class ModalComponent {\n static readonly PANEL_CLASS = 'modal-container';\n\n constructor(public dialogRef: MatDialogRef<ComponentType<any>>,\n public symbolRegistry: SymbolRegistry) {\n dialogRef.disableClose = true;\n this.symbolRegistry.registerSymbols([\n apClose\n ]);\n }\n\n @Input() closable: boolean;\n @Input() headerBottomBorderEnabled: boolean;\n @Input() footerTemplate: TemplateRef<any>;\n @Input() footerVisible = true;\n @Input() headerTemplate: TemplateRef<any>;\n @Input() headerVisible = true;\n @Input() mainTemplate: TemplateRef<any>;\n @Input() config: MatDialogConfig;\n @Input() sidePaneTemplate: TemplateRef<any>;\n @Input() sidePaneStyle: {[arg: string]: string} = {};\n @Input() containerStyle: {[arg: string]: string} = {};\n @Input() headerStyle: {[arg: string]: string} = {};\n @Input() contentStyle: {[arg: string]: string} = {};\n @Input() footerStyle: {[arg: string]: string} = {};\n @Input() defaultLayout = true;\n\n /*\n Use it to open a modal containing the {@link componentType} component, with the right configuration.\n /\n static openWithComponent<T>(\n matDialog: MatDialog,\n config: ModalConfigBase,\n componentType: ComponentType<T>\n ): MatDialogRef<T> {\n let matDialogConfig: MatDialogConfig;\n if (config) {\n matDialogConfig = config.matDialogConfig;\n if (matDialogConfig) {\n matDialogConfig.panelClass = Array.isArray(config.matDialogConfig.panelClass)\n ? [...config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS] // in case where the panelClass is an array\n : [config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS]; // in the other case, it's a String\n } else {\n matDialogConfig = {panelClass: ModalComponent.PANEL_CLASS};\n }\n } else {\n matDialogConfig = {\n panelClass: ModalComponent.PANEL_CLASS,\n };\n }\n matDialogConfig.autoFocus = false; // Prevent first button to be focused\n\n const dialogRef = matDialog.open(componentType, matDialogConfig);\n if (config.backdropCloseEnable === true) {\n dialogRef.disableClose = false;\n }\n return dialogRef;\n }\n\n /\n Use it to open a modal containing the provided templates, with the right configuration.\n /\n static openWithTemplates(\n matDialog: MatDialog,\n headerTemplate: TemplateRef<any>,\n mainTemplate: TemplateRef<any>,\n footerTemplate?: TemplateRef<any>,\n config?: ModalConfig,\n sidePaneTemplate?: TemplateRef<any>,\n ): MatDialogRef<ModalComponent> {\n const dialogRef = ModalComponent.openWithComponent(matDialog, config, ModalComponent);\n dialogRef.componentInstance.closable = config && config.closable ? config.closable : false;\n dialogRef.componentInstance.headerBottomBorderEnabled =\n config && config.headerBottomBorderEnabled ? config.headerBottomBorderEnabled : false;\n dialogRef.componentInstance.headerTemplate = headerTemplate;\n dialogRef.componentInstance.mainTemplate = mainTemplate;\n dialogRef.componentInstance.footerTemplate = footerTemplate;\n dialogRef.componentInstance.sidePaneTemplate = sidePaneTemplate;\n return dialogRef;\n }\n\n close(): void {\n this.dialogRef.close();\n }\n}\n","<div ngIf=\"sidePaneTemplate\"\n [ngStyle]=\"sidePaneStyle\"\n [ngClass]=\"{pane: defaultLayout}\">\n <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\"></ng-template>\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 >\n <ap-symbol symbolId=\"close\"></ap-symbol>\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\"></ng-template>\n </div>\n <div\n ngIf=\"mainTemplate\"\n [ngStyle]=\"contentStyle\"\n [class.content]=\"defaultLayout\"\n >\n <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n </div>\n <div\n ngIf=\"footerTemplate && footerVisible\"\n [ngStyle]=\"footerStyle\"\n [ngClass]=\"{footer: defaultLayout}\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/agorapulse-ui-components-infobox.mjs CHANGED Viewed

@@ -14,7 +14,6 @@ class InfoboxComponent {
         return this._width;
     }
     constructor() {
-        this.CONTAINER_WIDTH_BREAKPOINT = 588;
         this.symbolRegistry = inject(SymbolRegistry);
         this.elementRef = inject(ElementRef);
         this.fullWidth = false;
@@ -22,6 +21,7 @@ class InfoboxComponent {
         this.type = 'info';
         this._width = 'fit';
         this.buttonClicked = new EventEmitter();
+        this.closed = new EventEmitter();
         this.displayDirection = 'horizontal';
         this.symbolIds = {
             info: 'information-circle',
@@ -29,23 +29,18 @@ class InfoboxComponent {
             error: 'remove-circle',
             success: 'check-circle',
         };
-        this.symbolRegistry.registerSymbols([
-            apInformationCircle,
-            apAlertCircle,
-            apRemoveCircle,
-            apCheckCircle,
-            apClose,
-        ]);
+        this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);
     }
     onClickButton() {
         this.buttonClicked.emit();
     }
     onCloseInfobox() {
         this.elementRef.nativeElement.remove();
+        this.closed.emit();
     }
 }
 InfoboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", closable: "closable", title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    [symbolId]=\"symbolIds[type]\"\n                    class=\"status\"\n                    size=\"micro\"></ap-symbol>\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    <span\n                        *ngIf=\"title\"\n                        class=\"title\">\n                        {{ title }}\n                    </span>\n                    <span class=\"text\">\n                        <ng-content></ng-content>\n                    </span>\n                </div>\n                <ng-container *ngIf=\"buttonLabel\">\n                    <ap-button\n                        name=\"infobox-button\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"closable\">\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <svg\n                    width=\"8\"\n                    height=\"8\"\n                    viewBox=\"0 0 8 8\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n                        fill=\"currentColor\" />\n                </svg>\n            </button>\n        </ng-container>\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button[name]", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", closable: "closable", title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    [symbolId]=\"symbolIds[type]\"\n                    class=\"status\"\n                    size=\"micro\"></ap-symbol>\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    <span\n                        *ngIf=\"title\"\n                        class=\"title\">\n                        {{ title }}\n                    </span>\n                    <span class=\"text\">\n                        <ng-content></ng-content>\n                    </span>\n                </div>\n                <ng-container *ngIf=\"buttonLabel\">\n                    <ap-button\n                        name=\"infobox-button\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"closable\">\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <svg\n                    width=\"8\"\n                    height=\"8\"\n                    viewBox=\"0 0 8 8\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n                        fill=\"currentColor\" />\n                </svg>\n            </button>\n        </ng-container>\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button[name]", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-infobox', standalone: true, imports: [AgorapulseUiSymbolModule, NgClass, NgIf, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    [symbolId]=\"symbolIds[type]\"\n                    class=\"status\"\n                    size=\"micro\"></ap-symbol>\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    <span\n                        *ngIf=\"title\"\n                        class=\"title\">\n                        {{ title }}\n                    </span>\n                    <span class=\"text\">\n                        <ng-content></ng-content>\n                    </span>\n                </div>\n                <ng-container *ngIf=\"buttonLabel\">\n                    <ap-button\n                        name=\"infobox-button\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"closable\">\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <svg\n                    width=\"8\"\n                    height=\"8\"\n                    viewBox=\"0 0 8 8\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n                        fill=\"currentColor\" />\n                </svg>\n            </button>\n        </ng-container>\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
@@ -64,6 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
                 type: Input
             }], buttonClicked: [{
                 type: Output
+            }], closed: [{
+                type: Output
             }] } });
 /**

package/fesm2020/agorapulse-ui-components-infobox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import {ButtonComponent} from '@agorapulse/ui-components/button';\nimport {\n agorapulseSymbol,\n AgorapulseUiSymbolModule,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport {NgClass, NgIf} from '@angular/common';\nimport {AfterViewInit, ElementRef, EventEmitter} from '@angular/core';\nimport {Output} from '@angular/core';\nimport {inject} from '@angular/core';\nimport {ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';\nexport type InfoboxDirection = 'column' \| 'row';\nexport type InfoboxWidth = 'fit' \| 'full-width';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly ~~CONTAINER_WIDTH_BREAKPOINT = 588;\n\n private readonly~~ symbolRegistry = inject(SymbolRegistry);\n private readonly elementRef = inject(ElementRef);\n\n @HostBinding('class.full-width') fullWidth: boolean = false;\n\n @Input() buttonLabel: string;\n @Input() closable: boolean = false;\n @Input() title?: string;\n @Input() type: 'info' \| 'warning' \| 'error' \| 'success' = 'info';\n\n @Input() set width(width: InfoboxWidth) {\n this._width = width;\n this.fullWidth = width === 'full-width';\n }\n get width(): InfoboxWidth {\n return this._width;\n }\n private _width: InfoboxWidth = 'fit';\n\n @Output() buttonClicked = new EventEmitter<void>();\n\n displayDirection: 'horizontal' \| 'vertical' = 'horizontal';\n\n readonly symbolIds: {[k: string]: agorapulseSymbol} = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([\n apInformationCircle~~,\n~~ apAlertCircle~~,\n~~ apRemoveCircle~~,\n~~ apCheckCircle~~,\n~~ apClose~~,\n~~ ]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\n }\n}\n","<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;MA4Ba,gBAAgB,CAAA;~~IAazB~~,IAAa,KAAK,CAAC,KAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,KAAK,YAAY,CAAC;KAC3C;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;~~AAcD~~,IAAA,WAAA,GAAA;~~QAhCiB~~,~~IAA0B,CAAA,0BAAA,GAAG,GAAG,CAAC;AAEjC,~~QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACxC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAEhB,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;QAGnD,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;QAE1B,IAAI,CAAA,IAAA,GAA6C,MAAM,CAAC;QASzD,IAAM,CAAA,MAAA,GAAiB,KAAK,CAAC;AAE3B,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAQ,CAAC;~~QAEnD~~,IAAgB,CAAA,gBAAA,GAA8B,YAAY,CAAC;AAElD,QAAA,IAAA,CAAA,SAAS,~~GAAoC~~;~~AAClD~~,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,OAAO,EAAE,cAAc;SAC1B,CAAC;AAGE,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC~~;YAChC~~,mBAAmB~~;YACnB~~,aAAa~~;YACb~~,cAAc~~;YACd~~,aAAa~~;YACb~~,OAAO~~;AACV~~,~~SAAA~~,CAAC,CAAC;~~KACN~~;IAED,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC7B;IAED,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;~~KAC1C~~;;~~6GAjDQ~~,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB~~,+RC5B7B~~,o5FA0DA,EAAA,MAAA,EAAA,CAAA,gpHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlCc,wBAAwB,EAAW,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FAIzD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cAGV,IAAI,EAAA,OAAA,EACP,CAAC,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,CAAC,mBAClD,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,o5FAAA,EAAA,MAAA,EAAA,CAAA,gpHAAA,CAAA,EAAA,CAAA;~~0EAQJ~~,SAAS,EAAA,CAAA;sBAAzC,WAAW;uBAAC,kBAAkB,CAAA;gBAEtB,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEO,KAAK,EAAA,CAAA;sBAAjB,KAAK;gBASI,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;~~AElDX~~;;AAEG;;;;"}
1	+ {"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {\n agorapulseSymbol,\n AgorapulseUiSymbolModule,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgIf } from '@angular/common';\nimport { AfterViewInit, ElementRef, EventEmitter } from '@angular/core';\nimport { Output } from '@angular/core';\nimport { inject } from '@angular/core';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\nexport type InfoboxDirection = 'column' \| 'row';\nexport type InfoboxWidth = 'fit' \| 'full-width';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly elementRef = inject(ElementRef);\n\n @HostBinding('class.full-width') fullWidth: boolean = false;\n\n @Input() buttonLabel: string;\n @Input() closable: boolean = false;\n @Input() title?: string;\n @Input() type: 'info' \| 'warning' \| 'error' \| 'success' = 'info';\n\n @Input() set width(width: InfoboxWidth) {\n this._width = width;\n this.fullWidth = width === 'full-width';\n }\n get width(): InfoboxWidth {\n return this._width;\n }\n private _width: InfoboxWidth = 'fit';\n\n @Output() buttonClicked = new EventEmitter<void>();\n @Output() closed = new EventEmitter<void>();\n\n displayDirection: 'horizontal' \| 'vertical' = 'horizontal';\n\n readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\n this.closed.emit();\n }\n}\n","<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}