ng-prime-tools 1.0.34 → 1.0.35

package/fesm2022/ng-prime-tools.mjs

@@ -3802,7 +3802,7 @@ const DIALOG_STYLES = {
  * Default config:
  *  - content is now empty string (no default message).
  */
-const DEFAULT_DIALOG_CONFIG = {
+const DEFAULT_DIALOG_CONFIG$1 = {
     header: { text: 'Confirmation' },
     visible: false,
     width: '720px',
@@ -3822,14 +3822,15 @@ class PTConfirmDialogComponent {
         this.messageService = messageService;
         this.renderer = renderer;
         this.el = el;
-        this.dialogConfig = { ...DEFAULT_DIALOG_CONFIG };
+        this.dialogConfig = { ...DEFAULT_DIALOG_CONFIG$1 };
         this.confirm = new EventEmitter();
         this.cancel = new EventEmitter();
         this.SeverityEnum = SeverityEnum;
     }
     ngOnChanges(changes) {
         if (changes['dialogConfig']) {
-            const current = changes['dialogConfig'].currentValue;
+            const current = changes['dialogConfig']
+                .currentValue;
             if (changes['dialogConfig'].previousValue?.dialogStyle !==
                 current?.dialogStyle) {
                 this.applyDialogStyle();
@@ -3852,18 +3853,18 @@ class PTConfirmDialogComponent {
             ? current.header
             : styleConfig.header !== undefined
                 ? styleConfig.header
-                : DEFAULT_DIALOG_CONFIG.header;
+                : DEFAULT_DIALOG_CONFIG$1.header;
         this.dialogConfig = {
-            ...DEFAULT_DIALOG_CONFIG,
+            ...DEFAULT_DIALOG_CONFIG$1,
             ...current,
             ...styleConfig,
             header: mergedHeader,
             confirmButtonConfig: {
-                ...DEFAULT_DIALOG_CONFIG.confirmButtonConfig,
+                ...DEFAULT_DIALOG_CONFIG$1.confirmButtonConfig,
                 ...current.confirmButtonConfig,
             },
             cancelButtonConfig: {
-                ...DEFAULT_DIALOG_CONFIG.cancelButtonConfig,
+                ...DEFAULT_DIALOG_CONFIG$1.cancelButtonConfig,
                 ...current.cancelButtonConfig,
             },
             visible: current.visible,
@@ -4110,107 +4111,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+const DEFAULT_DIALOG_CONFIG = {
+    modal: true,
+    closable: true,
+    draggable: true,
+    resizable: true,
+    maximizable: false,
+    dismissableMask: false,
+    closeOnEscape: true,
+    blockScroll: true,
+    bodyScrollable: true,
+    showFooter: true,
+    position: 'center',
+};
 class PTDialogComponent {
     constructor() {
-        /** Enable scroll when body exceeds given height/width */
-        this.bodyScrollable = true;
-        /** Control footer visibility (default: true) */
-        this.showFooter = true;
-        this.modal = true;
-        this.closable = true;
-        this.draggable = true;
-        this.resizable = true;
-        this.maximizable = false;
-        this.dismissableMask = false;
-        this.closeOnEscape = true;
-        this.blockScroll = true;
-        this.position = 'center';
-        /** internal visible flag used by p-dialog */
-        this._visible = false;
+        /** Single configuration object */
+        this._config = { ...DEFAULT_DIALOG_CONFIG };
+        // ---- Internal visible state (PUBLIC so template can read it) ----
+        this._internalVisible = false;
         this.visibleChange = new EventEmitter();
     }
+    set config(value) {
+        this._config = { ...DEFAULT_DIALOG_CONFIG, ...(value || {}) };
+    }
+    get config() {
+        return this._config;
+    }
+    /** Input visible from parent */
     get visible() {
-        return this._visible;
+        return this._internalVisible;
     }
     set visible(v) {
-        this._visible = v;
+        this._internalVisible = v;
     }
-    /** Final class applied to p-dialog */
     get dialogStyleClass() {
         return [
             'border-round-3xl',
             'shadow-6',
             'overflow-hidden',
-            'pt-dialog-header-blue', // for header/footer colors
-            this.styleClass,
+            'pt-dialog-header-blue',
+            this.config.styleClass,
         ]
             .filter(Boolean)
             .join(' ');
     }
-    /** Style applied to the body wrapper */
+    get primePosition() {
+        return (this.config.position ?? 'center');
+    }
     get bodyStyle() {
         const style = {};
-        if (this.bodyWidth) {
-            style['max-width'] = this.bodyWidth;
+        if (this.config.bodyWidth) {
+            style['max-width'] = this.config.bodyWidth;
         }
-        if (this.bodyHeight) {
-            style['max-height'] = this.bodyHeight;
-            if (this.bodyScrollable) {
+        if (this.config.bodyHeight) {
+            style['max-height'] = this.config.bodyHeight;
+            if (this.config.bodyScrollable !== false) {
                 style['overflow-y'] = 'auto';
                 style['overflow-x'] = 'auto';
             }
         }
         return style;
     }
-    onShow() {
-        this.visibleChange.emit(true);
-    }
-    onHide() {
-        this.visibleChange.emit(false);
+    /** Sync <p-dialog> → parent */
+    onInternalVisibleChange(v) {
+        this._internalVisible = v;
+        this.visibleChange.emit(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { header: "header", style: "style", styleClass: "styleClass", headerIconClass: "headerIconClass", bodyWidth: "bodyWidth", bodyHeight: "bodyHeight", bodyScrollable: "bodyScrollable", showFooter: "showFooter", modal: "modal", closable: "closable", draggable: "draggable", resizable: "resizable", maximizable: "maximizable", dismissableMask: "dismissableMask", closeOnEscape: "closeOnEscape", blockScroll: "blockScroll", breakpoints: "breakpoints", position: "position", contentStyle: "contentStyle", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  [(visible)]=\"_visible\"\n  [header]=\"header\"\n  [modal]=\"modal\"\n  [style]=\"style\"\n  [breakpoints]=\"breakpoints\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [maximizable]=\"maximizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [blockScroll]=\"blockScroll\"\n  [position]=\"position\"\n  [contentStyle]=\"contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  (onShow)=\"onShow()\"\n  (onHide)=\"onHide()\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <!-- optional icon -->\n        <i *ngIf=\"headerIconClass\" [ngClass]=\"headerIconClass\"></i>\n\n        <!-- projected custom header -->\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <!-- fallback header text -->\n        <span *ngIf=\"header\" class=\"font-bold text-lg\">\n          {{ header }}\n        </span>\n      </div>\n      <!-- close icon from PrimeNG (X) is rendered automatically -->\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER (optional) -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"showFooter\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.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: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n        <span *ngIf=\"config.header\" class=\"font-bold text-lg\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.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: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dialog', template: "<p-dialog\n  [(visible)]=\"_visible\"\n  [header]=\"header\"\n  [modal]=\"modal\"\n  [style]=\"style\"\n  [breakpoints]=\"breakpoints\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [maximizable]=\"maximizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [blockScroll]=\"blockScroll\"\n  [position]=\"position\"\n  [contentStyle]=\"contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  (onShow)=\"onShow()\"\n  (onHide)=\"onHide()\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <!-- optional icon -->\n        <i *ngIf=\"headerIconClass\" [ngClass]=\"headerIconClass\"></i>\n\n        <!-- projected custom header -->\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <!-- fallback header text -->\n        <span *ngIf=\"header\" class=\"font-bold text-lg\">\n          {{ header }}\n        </span>\n      </div>\n      <!-- close icon from PrimeNG (X) is rendered automatically -->\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER (optional) -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"showFooter\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"] }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], headerIconClass: [{
-                type: Input
-            }], bodyWidth: [{
-                type: Input
-            }], bodyHeight: [{
-                type: Input
-            }], bodyScrollable: [{
-                type: Input
-            }], showFooter: [{
-                type: Input
-            }], modal: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], draggable: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], maximizable: [{
-                type: Input
-            }], dismissableMask: [{
-                type: Input
-            }], closeOnEscape: [{
-                type: Input
-            }], blockScroll: [{
-                type: Input
-            }], breakpoints: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], contentStyle: [{
+            args: [{ selector: 'pt-dialog', template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n        <span *ngIf=\"config.header\" class=\"font-bold text-lg\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"] }]
+        }], propDecorators: { config: [{
                 type: Input
             }], visible: [{
                 type: Input
@@ -4859,6 +4833,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+// src/lib/models/pt-dialog-config.model.ts
+
 // Advanced table
 
 class PTGroupComponent {