@mediusinc/mng-commons 4.0.0-rc.1 → 4.0.0-rc.3

package/esm2022/lib/components/notification/notification-wrapper.component.mjs

@@ -0,0 +1,50 @@
+import { Component, computed, signal } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { DialogModule } from 'primeng/dialog';
+import { ToastModule } from 'primeng/toast';
+import { MngDialogKeydownHandlerDirective } from '../../directives';
+import * as i0 from "@angular/core";
+import * as i1 from "primeng/toast";
+import * as i2 from "primeng/api";
+import * as i3 from "primeng/confirmdialog";
+import * as i4 from "@ngx-translate/core";
+import * as i5 from "primeng/dialog";
+export class NotificationWrapperComponent {
+    constructor() {
+        this.notificationCutoff = 70;
+        this.isDialogNotificationVisible = computed(() => this.dialogNotification() !== null);
+        this.dialogNotification = signal(null);
+    }
+    getNotificationIconClass(message) {
+        if (message?.icon)
+            return message.icon;
+        switch (message?.severity) {
+            case 'info':
+                return 'pi-info-circle';
+            case 'warning':
+                return 'pi-exclamation-triangle';
+            case 'error':
+                return 'pi-times-circle';
+            case 'success':
+                return 'pi-check';
+            default:
+                return '';
+        }
+    }
+    onShowNotificationInDialog(message) {
+        this.dialogNotification.set(message);
+    }
+    onDialogNotificationVisibilityChange(visible) {
+        if (!visible) {
+            this.dialogNotification.set(null);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NotificationWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: NotificationWrapperComponent, isStandalone: true, selector: "mng-notification-wrapper", ngImport: i0, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n            @if (message.detail.length > notificationCutoff) {\n                <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification())\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div>\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i3.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: MngDialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NotificationWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mng-notification-wrapper', standalone: true, imports: [ToastModule, ConfirmDialogModule, TranslateModule, DialogModule, MngDialogKeydownHandlerDirective], template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n            @if (message.detail.length > notificationCutoff) {\n                <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification())\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div>\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n" }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9uLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL25vdGlmaWNhdGlvbi9ub3RpZmljYXRpb24td3JhcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvbm90aWZpY2F0aW9uL25vdGlmaWNhdGlvbi13cmFwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUUxRCxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFFcEQsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDMUQsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzVDLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFMUMsT0FBTyxFQUFDLGdDQUFnQyxFQUFDLE1BQU0sa0JBQWtCLENBQUM7Ozs7Ozs7QUFRbEUsTUFBTSxPQUFPLDRCQUE0QjtJQU56QztRQU9vQix1QkFBa0IsR0FBRyxFQUFFLENBQUM7UUFDakMsZ0NBQTJCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxLQUFLLElBQUksQ0FBQyxDQUFDO1FBQ2pGLHVCQUFrQixHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7S0E0QjVEO0lBMUJVLHdCQUF3QixDQUFDLE9BQXVCO1FBQ25ELElBQUksT0FBTyxFQUFFLElBQUk7WUFBRSxPQUFPLE9BQU8sQ0FBQyxJQUFJLENBQUM7UUFFdkMsUUFBUSxPQUFPLEVBQUUsUUFBUSxFQUFFO1lBQ3ZCLEtBQUssTUFBTTtnQkFDUCxPQUFPLGdCQUFnQixDQUFDO1lBQzVCLEtBQUssU0FBUztnQkFDVixPQUFPLHlCQUF5QixDQUFDO1lBQ3JDLEtBQUssT0FBTztnQkFDUixPQUFPLGlCQUFpQixDQUFDO1lBQzdCLEtBQUssU0FBUztnQkFDVixPQUFPLFVBQVUsQ0FBQztZQUN0QjtnQkFDSSxPQUFPLEVBQUUsQ0FBQztTQUNqQjtJQUNMLENBQUM7SUFFTSwwQkFBMEIsQ0FBQyxPQUFnQjtRQUM5QyxJQUFJLENBQUMsa0JBQWtCLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFFTSxvQ0FBb0MsQ0FBQyxPQUFnQjtRQUN4RCxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ1YsSUFBSSxDQUFDLGtCQUFrQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUNyQztJQUNMLENBQUM7OEdBOUJRLDRCQUE0QjtrR0FBNUIsNEJBQTRCLG9GQ2hCekMsMG5EQWdDQSwyQ0RsQmMsV0FBVyw4Y0FBRSxtQkFBbUIsb21CQUFFLGVBQWUsMkZBQUUsWUFBWSx3dUJBQUUsZ0NBQWdDOzsyRkFFbEcsNEJBQTRCO2tCQU54QyxTQUFTOytCQUNJLDBCQUEwQixjQUN4QixJQUFJLFdBRVAsQ0FBQyxXQUFXLEVBQUUsbUJBQW1CLEVBQUUsZUFBZSxFQUFFLFlBQVksRUFBRSxnQ0FBZ0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBjb21wdXRlZCwgc2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHtUcmFuc2xhdGVNb2R1bGV9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHtNZXNzYWdlfSBmcm9tICdwcmltZW5nL2FwaSc7XG5pbXBvcnQge0NvbmZpcm1EaWFsb2dNb2R1bGV9IGZyb20gJ3ByaW1lbmcvY29uZmlybWRpYWxvZyc7XG5pbXBvcnQge0RpYWxvZ01vZHVsZX0gZnJvbSAncHJpbWVuZy9kaWFsb2cnO1xuaW1wb3J0IHtUb2FzdE1vZHVsZX0gZnJvbSAncHJpbWVuZy90b2FzdCc7XG5cbmltcG9ydCB7TW5nRGlhbG9nS2V5ZG93bkhhbmRsZXJEaXJlY3RpdmV9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ21uZy1ub3RpZmljYXRpb24td3JhcHBlcicsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICB0ZW1wbGF0ZVVybDogJ25vdGlmaWNhdGlvbi13cmFwcGVyLmNvbXBvbmVudC5odG1sJyxcbiAgICBpbXBvcnRzOiBbVG9hc3RNb2R1bGUsIENvbmZpcm1EaWFsb2dNb2R1bGUsIFRyYW5zbGF0ZU1vZHVsZSwgRGlhbG9nTW9kdWxlLCBNbmdEaWFsb2dLZXlkb3duSGFuZGxlckRpcmVjdGl2ZV1cbn0pXG5leHBvcnQgY2xhc3MgTm90aWZpY2F0aW9uV3JhcHBlckNvbXBvbmVudCB7XG4gICAgcHVibGljIHJlYWRvbmx5IG5vdGlmaWNhdGlvbkN1dG9mZiA9IDcwO1xuICAgIHB1YmxpYyBpc0RpYWxvZ05vdGlmaWNhdGlvblZpc2libGUgPSBjb21wdXRlZCgoKSA9PiB0aGlzLmRpYWxvZ05vdGlmaWNhdGlvbigpICE9PSBudWxsKTtcbiAgICBwdWJsaWMgZGlhbG9nTm90aWZpY2F0aW9uID0gc2lnbmFsPE1lc3NhZ2UgfCBudWxsPihudWxsKTtcblxuICAgIHB1YmxpYyBnZXROb3RpZmljYXRpb25JY29uQ2xhc3MobWVzc2FnZTogTWVzc2FnZSB8IG51bGwpOiBzdHJpbmcge1xuICAgICAgICBpZiAobWVzc2FnZT8uaWNvbikgcmV0dXJuIG1lc3NhZ2UuaWNvbjtcblxuICAgICAgICBzd2l0Y2ggKG1lc3NhZ2U/LnNldmVyaXR5KSB7XG4gICAgICAgICAgICBjYXNlICdpbmZvJzpcbiAgICAgICAgICAgICAgICByZXR1cm4gJ3BpLWluZm8tY2lyY2xlJztcbiAgICAgICAgICAgIGNhc2UgJ3dhcm5pbmcnOlxuICAgICAgICAgICAgICAgIHJldHVybiAncGktZXhjbGFtYXRpb24tdHJpYW5nbGUnO1xuICAgICAgICAgICAgY2FzZSAnZXJyb3InOlxuICAgICAgICAgICAgICAgIHJldHVybiAncGktdGltZXMtY2lyY2xlJztcbiAgICAgICAgICAgIGNhc2UgJ3N1Y2Nlc3MnOlxuICAgICAgICAgICAgICAgIHJldHVybiAncGktY2hlY2snO1xuICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICByZXR1cm4gJyc7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwdWJsaWMgb25TaG93Tm90aWZpY2F0aW9uSW5EaWFsb2cobWVzc2FnZTogTWVzc2FnZSkge1xuICAgICAgICB0aGlzLmRpYWxvZ05vdGlmaWNhdGlvbi5zZXQobWVzc2FnZSk7XG4gICAgfVxuXG4gICAgcHVibGljIG9uRGlhbG9nTm90aWZpY2F0aW9uVmlzaWJpbGl0eUNoYW5nZSh2aXNpYmxlOiBib29sZWFuKSB7XG4gICAgICAgIGlmICghdmlzaWJsZSkge1xuICAgICAgICAgICAgdGhpcy5kaWFsb2dOb3RpZmljYXRpb24uc2V0KG51bGwpO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPHAtY29uZmlybURpYWxvZyBhcHBlbmRUbz1cImJvZHlcIiBbYmFzZVpJbmRleF09XCI1MFwiPjwvcC1jb25maXJtRGlhbG9nPlxuXG48cC10b2FzdCBbYmFzZVpJbmRleF09XCI1MFwiPlxuICAgIDxuZy10ZW1wbGF0ZSBsZXQtbWVzc2FnZSBwVGVtcGxhdGU9XCJtZXNzYWdlXCI+XG4gICAgICAgIDxzcGFuIFtjbGFzc109XCIncC10b2FzdC1tZXNzYWdlLWljb24gcGkgJyArIGdldE5vdGlmaWNhdGlvbkljb25DbGFzcyhtZXNzYWdlKVwiPjwvc3Bhbj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInAtdG9hc3QtbWVzc2FnZS10ZXh0XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicC10b2FzdC1zdW1tYXJ5XCI+e3sgbWVzc2FnZS5zdW1tYXJ5IH19PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicC10b2FzdC1kZXRhaWxcIj57eyBtZXNzYWdlLmRldGFpbC5zbGljZSgwLCBub3RpZmljYXRpb25DdXRvZmYpICsgKG1lc3NhZ2UuZGV0YWlsLmxlbmd0aCA+IG5vdGlmaWNhdGlvbkN1dG9mZiA/ICcuLi4nIDogJycpIH19PC9kaXY+XG4gICAgICAgICAgICBAaWYgKG1lc3NhZ2UuZGV0YWlsLmxlbmd0aCA+IG5vdGlmaWNhdGlvbkN1dG9mZikge1xuICAgICAgICAgICAgICAgIDxkaXYgKGNsaWNrKT1cIm9uU2hvd05vdGlmaWNhdGlvbkluRGlhbG9nKG1lc3NhZ2UpXCIgY2xhc3M9XCJwLWxpbmsgZm9udC1zZW1pYm9sZCB0ZXh0LXNtIG10LTIgZmxleCBhbGlnbi1pdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgPGkgY2xhc3M9XCJwaSBwaS1jaGV2cm9uLWRvd24gbXItMVwiPjwvaT57eyAnbm90aWZpY2F0aW9uLmRldGFpbHMnIHwgdHJhbnNsYXRlIH19XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG48L3AtdG9hc3Q+XG5cbjxwLWRpYWxvZ1xuICAgIFt2aXNpYmxlXT1cImlzRGlhbG9nTm90aWZpY2F0aW9uVmlzaWJsZSgpXCJcbiAgICAodmlzaWJsZUNoYW5nZSk9XCJvbkRpYWxvZ05vdGlmaWNhdGlvblZpc2liaWxpdHlDaGFuZ2UoJGV2ZW50KVwiXG4gICAgW3N0eWxlQ2xhc3NdPVwiJ3AtZmx1aWQgbW5nLWRpYWxvZyBtbmctZGlhbG9nLXhzICcgKyAnbW5nLW1lc3NhZ2UtZGV0YWlsLWRpYWxvZyBtbmctbWVzc2FnZS1kZXRhaWwtZGlhbG9nLScgKyAoZGlhbG9nTm90aWZpY2F0aW9uKCk/LnNldmVyaXR5ID8/ICcnKVwiPlxuICAgIDxuZy10ZW1wbGF0ZSBwVGVtcGxhdGU9XCJoZWFkZXJcIiBtbmdEaWFsb2dLZXlkb3duSGFuZGxlcj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJwLWRpYWxvZy10aXRsZSBmb250LWJvbGQgbW5nLWRpYWxvZy1zdWNjZXNzXCI+XG4gICAgICAgICAgICA8c3BhbiBbY2xhc3NdPVwiJ21yLTIgcGkgJyArIGdldE5vdGlmaWNhdGlvbkljb25DbGFzcyhkaWFsb2dOb3RpZmljYXRpb24oKSlcIj48L3NwYW4+XG4gICAgICAgICAgICB7eyBkaWFsb2dOb3RpZmljYXRpb24oKT8uc3VtbWFyeSA/PyAnJyB9fVxuICAgICAgICA8L3NwYW4+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8ZGl2PlxuICAgICAgICB7eyBkaWFsb2dOb3RpZmljYXRpb24oKT8uZGV0YWlsID8/ICcnIH19XG4gICAgPC9kaXY+XG48L3AtZGlhbG9nPlxuIl19