ng-prime-tools 1.0.75 → 1.0.77

package/fesm2022/ng-prime-tools.mjs

@@ -1398,6 +1398,7 @@ class PTButtonComponent {
         this.el = el;
     }
     ngOnInit() {
+        // Fallback to default config if undefined
         if (!this.buttonConfig) {
             this.buttonConfig = {
                 label: 'Click Me',
@@ -1418,24 +1419,25 @@ class PTButtonComponent {
     }
     ngOnChanges(changes) {
         const configChange = changes['buttonConfig'];
-        if (!configChange) {
-            return;
-        }
-        const prev = configChange.previousValue;
-        const curr = configChange.currentValue;
-        if (prev && curr) {
-            const onlyDisabledChanged = prev.disabled !== curr.disabled &&
-                JSON.stringify({ ...prev, disabled: undefined }) ===
-                    JSON.stringify({ ...curr, disabled: undefined });
-            if (onlyDisabledChanged) {
-                setTimeout(() => this.updateDisabledStyles(curr.disabled ?? false));
+        if (configChange) {
+            const prev = configChange.previousValue;
+            const curr = configChange.currentValue;
+            if (prev && curr) {
+                const onlyDisabledChanged = prev.disabled !== curr.disabled &&
+                    JSON.stringify({ ...prev, disabled: undefined }) ===
+                        JSON.stringify({ ...curr, disabled: undefined });
+                if (onlyDisabledChanged) {
+                    setTimeout(() => this.updateDisabledStyles(curr.disabled ?? false));
+                }
+                else {
+                    setTimeout(() => this.applyButtonStyles());
+                }
             }
             else {
+                // If no previous value (first load), apply full styles
                 setTimeout(() => this.applyButtonStyles());
             }
-            return;
         }
-        setTimeout(() => this.applyButtonStyles());
     }
     ngAfterViewInit() {
         setTimeout(() => this.applyButtonStyles());
@@ -1451,15 +1453,12 @@ class PTButtonComponent {
             this.buttonConfig?.borderColor ||
             this.buttonConfig?.fontColor);
     }
+    /**
+     * When custom colors are provided, do not pass PrimeNG severity.
+     * Otherwise PrimeNG theme classes can override the custom colors.
+     */
     getSeverity() {
-        /**
-         * If custom colors are provided, do not pass PrimeNG severity.
-         * PrimeNG severity classes can override custom background/border colors.
-         */
-        if (this.hasCustomColors()) {
-            return undefined;
-        }
-        return this.buttonConfig?.severity;
+        return this.hasCustomColors() ? undefined : this.buttonConfig?.severity;
     }
     getStyleClass() {
         const classes = [];
@@ -1471,26 +1470,65 @@ class PTButtonComponent {
         }
         return classes.join(' ');
     }
+    /**
+     * Direct style binding for PrimeNG p-button.
+     * This is the reliable fallback for PrimeNG v21 themes.
+     */
+    getButtonStyle() {
+        const baseStyle = {
+            width: this.buttonConfig?.width || 'auto',
+            height: this.buttonConfig?.height || 'auto',
+        };
+        if (!this.hasCustomColors()) {
+            return baseStyle;
+        }
+        if (this.buttonConfig?.disabled) {
+            return {
+                ...baseStyle,
+                color: '#999999',
+                background: '#e0e0e0',
+                'background-color': '#e0e0e0',
+                'border-color': '#bdbdbd',
+            };
+        }
+        const backgroundColor = this.buttonConfig.backgroundColor || 'transparent';
+        const borderColor = this.buttonConfig.borderColor ||
+            this.buttonConfig.backgroundColor ||
+            'transparent';
+        return {
+            ...baseStyle,
+            color: this.buttonConfig.fontColor || '#ffffff',
+            background: backgroundColor,
+            'background-color': backgroundColor,
+            'border-color': borderColor,
+        };
+    }
+    getButtonElement() {
+        return (this.el.nativeElement.querySelector('button.p-button') ||
+            this.el.nativeElement.querySelector('button.p-element') ||
+            this.el.nativeElement.querySelector('.p-button') ||
+            this.el.nativeElement.querySelector('button'));
+    }
     updateDisabledStyles(isDisabled) {
         const buttonElement = this.getButtonElement();
         if (!buttonElement || !this.buttonConfig) {
             return;
         }
-        if (this.hasCustomColors()) {
-            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
-            this.renderer.setStyle(buttonElement, 'background-color', isDisabled
-                ? '#e0e0e0'
-                : this.buttonConfig.backgroundColor || 'transparent');
-            this.renderer.setStyle(buttonElement, 'border-color', isDisabled
-                ? '#bdbdbd'
-                : this.buttonConfig.borderColor ||
-                    this.buttonConfig.backgroundColor ||
-                    'transparent');
+        if (!this.hasCustomColors()) {
             return;
         }
-        this.renderer.removeStyle(buttonElement, 'color');
-        this.renderer.removeStyle(buttonElement, 'background-color');
-        this.renderer.removeStyle(buttonElement, 'border-color');
+        this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+        this.renderer.setStyle(buttonElement, 'background', isDisabled
+            ? '#e0e0e0'
+            : this.buttonConfig.backgroundColor || 'transparent');
+        this.renderer.setStyle(buttonElement, 'background-color', isDisabled
+            ? '#e0e0e0'
+            : this.buttonConfig.backgroundColor || 'transparent');
+        this.renderer.setStyle(buttonElement, 'border-color', isDisabled
+            ? '#bdbdbd'
+            : this.buttonConfig.borderColor ||
+                this.buttonConfig.backgroundColor ||
+                'transparent');
     }
     /**
      * We delegate colors to PrimeNG theme when no manual color is provided.
@@ -1505,10 +1543,15 @@ class PTButtonComponent {
         }
         const isDisabled = !!this.buttonConfig.disabled;
         const useThemeColors = this.shouldUseThemeColors();
+        // Width / height always applied
         this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
         this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
+        // Only override colors when custom colors are provided
         if (!useThemeColors) {
             this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+            this.renderer.setStyle(buttonElement, 'background', isDisabled
+                ? '#e0e0e0'
+                : this.buttonConfig.backgroundColor || 'transparent');
             this.renderer.setStyle(buttonElement, 'background-color', isDisabled
                 ? '#e0e0e0'
                 : this.buttonConfig.backgroundColor || 'transparent');
@@ -1517,24 +1560,21 @@ class PTButtonComponent {
                 : this.buttonConfig.borderColor ||
                     this.buttonConfig.backgroundColor ||
                     'transparent');
-            return;
         }
-        this.renderer.removeStyle(buttonElement, 'color');
-        this.renderer.removeStyle(buttonElement, 'background-color');
-        this.renderer.removeStyle(buttonElement, 'border-color');
-    }
-    getButtonElement() {
-        return (this.el.nativeElement.querySelector('button.p-button') ||
-            this.el.nativeElement.querySelector('button.p-element') ||
-            this.el.nativeElement.querySelector('.p-button') ||
-            this.el.nativeElement.querySelector('button'));
+        else {
+            // If we delegate to theme, clear any inline overrides
+            this.renderer.removeStyle(buttonElement, 'color');
+            this.renderer.removeStyle(buttonElement, 'background');
+            this.renderer.removeStyle(buttonElement, 'background-color');
+            this.renderer.removeStyle(buttonElement, 'border-color');
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTButtonComponent, isStandalone: false, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTButtonComponent, isStandalone: false, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [style]=\"getButtonStyle()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-button', standalone: false, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'pt-button', standalone: false, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [style]=\"getButtonStyle()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
                 type: Input
             }] } });
@@ -2664,12 +2704,22 @@ class PTTextInputComponent {
         }
         return '';
     }
+    hasError() {
+        const control = this.formGroup.get(this.formField.name);
+        return !!(control?.invalid && (control.touched || control.dirty));
+    }
+    hasCharacterCounter() {
+        return !this.formField.disabled && this.formField.maxLength !== undefined;
+    }
+    hasInfoRow() {
+        return this.hasError() || this.hasCharacterCounter();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n        @if (isPasswordInput()) {\n          <p-password\n            [inputId]=\"inputId\"\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [toggleMask]=\"getPasswordToggleMask()\"\n            [feedback]=\"getPasswordFeedback()\"\n            [attr.name]=\"formField.name\"\n            [inputStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n            styleClass=\"pt-password-input\"\n          ></p-password>\n        } @else {\n          <input\n            [id]=\"inputId\"\n            [attr.name]=\"formField.name\"\n            [type]=\"getInputType()\"\n            pInputText\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [attr.minlength]=\"formField.minLength\"\n            [attr.maxlength]=\"formField.maxLength\"\n            [ngStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n          />\n        }\n      </p-iconField>\n    } @else {\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [inputStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [ngStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    }\n\n    <div class=\"form-info-row\">\n      @if (\n        formGroup.get(formField.name)?.invalid &&\n        (formGroup.get(formField.name)?.touched ||\n          formGroup.get(formField.name)?.dirty)\n      ) {\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (!formField.disabled && formField.maxLength !== undefined) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n        @if (isPasswordInput()) {\n          <p-password\n            [inputId]=\"inputId\"\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [toggleMask]=\"getPasswordToggleMask()\"\n            [feedback]=\"getPasswordFeedback()\"\n            [attr.name]=\"formField.name\"\n            [inputStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n            styleClass=\"pt-password-input\"\n          ></p-password>\n        } @else {\n          <input\n            [id]=\"inputId\"\n            [attr.name]=\"formField.name\"\n            [type]=\"getInputType()\"\n            pInputText\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [attr.minlength]=\"formField.minLength\"\n            [attr.maxlength]=\"formField.maxLength\"\n            [ngStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n          />\n        }\n      </p-iconField>\n    } @else {\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [inputStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [ngStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    }\n\n    @if (hasInfoRow()) {\n      <div class=\"form-info-row\">\n        @if (hasError()) {\n          <small class=\"field-error\">\n            {{ getErrorMessage() }}\n          </small>\n        }\n\n        <div class=\"spacer\"></div>\n\n        @if (hasCharacterCounter()) {\n          <div class=\"character-counter\">\n            {{ characterCount }}/{{ formField.maxLength }} characters\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-text-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n        @if (isPasswordInput()) {\n          <p-password\n            [inputId]=\"inputId\"\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [toggleMask]=\"getPasswordToggleMask()\"\n            [feedback]=\"getPasswordFeedback()\"\n            [attr.name]=\"formField.name\"\n            [inputStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n            styleClass=\"pt-password-input\"\n          ></p-password>\n        } @else {\n          <input\n            [id]=\"inputId\"\n            [attr.name]=\"formField.name\"\n            [type]=\"getInputType()\"\n            pInputText\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [attr.minlength]=\"formField.minLength\"\n            [attr.maxlength]=\"formField.maxLength\"\n            [ngStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n          />\n        }\n      </p-iconField>\n    } @else {\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [inputStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [ngStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    }\n\n    <div class=\"form-info-row\">\n      @if (\n        formGroup.get(formField.name)?.invalid &&\n        (formGroup.get(formField.name)?.touched ||\n          formGroup.get(formField.name)?.dirty)\n      ) {\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (!formField.disabled && formField.maxLength !== undefined) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
+            args: [{ selector: 'pt-text-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    @if (formField.iconClass) {\n      <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n        <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n        @if (isPasswordInput()) {\n          <p-password\n            [inputId]=\"inputId\"\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [toggleMask]=\"getPasswordToggleMask()\"\n            [feedback]=\"getPasswordFeedback()\"\n            [attr.name]=\"formField.name\"\n            [inputStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n            styleClass=\"pt-password-input\"\n          ></p-password>\n        } @else {\n          <input\n            [id]=\"inputId\"\n            [attr.name]=\"formField.name\"\n            [type]=\"getInputType()\"\n            pInputText\n            [formControlName]=\"formField.name\"\n            [placeholder]=\"formField.placeholder ?? ''\"\n            [attr.minlength]=\"formField.minLength\"\n            [attr.maxlength]=\"formField.maxLength\"\n            [ngStyle]=\"{\n              width: formField.width || '100%',\n              height: formField.height || 'auto',\n            }\"\n          />\n        }\n      </p-iconField>\n    } @else {\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [inputStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          pInputText\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [ngStyle]=\"{\n            width: formField.width || '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    }\n\n    @if (hasInfoRow()) {\n      <div class=\"form-info-row\">\n        @if (hasError()) {\n          <small class=\"field-error\">\n            {{ getErrorMessage() }}\n          </small>\n        }\n\n        <div class=\"spacer\"></div>\n\n        @if (hasCharacterCounter()) {\n          <div class=\"character-counter\">\n            {{ characterCount }}/{{ formField.maxLength }} characters\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}.form-field input.ng-invalid.ng-touched,.form-field input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password{width:100%!important;display:block!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{width:100%!important;box-sizing:border-box}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -4497,7 +4547,11 @@ class PTSideBarMenuComponent {
         this.searchField = {
             name: 'search',
             placeholder: 'Search...',
+            type: FormInputTypeEnum.TEXT,
             iconClass: 'pi pi-search',
+            iconPosition: 'left',
+            width: '240px',
+            height: '42px',
         };
         this.filteredMenus = [];
     }
@@ -4656,11 +4710,11 @@ class PTSideBarMenuComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSideBarMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSideBarMenuComponent, isStandalone: false, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  @if (menuConfig.searchable) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n      >\n      <div class=\"search-input\">\n        <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n        </pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n    >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n      >\n      <!-- item without children -->\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n      <!-- item with children -->\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n      @if (hasChildren(item)) {\n        <div\n          class=\"submenu-wrapper\"\n          [class.expanded]=\"item.isExpanded\"\n          >\n          <ul\n            class=\"submenu-list\"\n          [ngClass]=\"{\n            'submenu-list-root': level === 0,\n            'submenu-list-nested': level > 0,\n          }\"\n            >\n            <ng-container\n            *ngTemplateOutlet=\"\n              recursiveMenu;\n              context: { $implicit: item.children, level: level + 1 }\n            \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSideBarMenuComponent, isStandalone: false, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  @if (menuConfig.searchable) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n      >\n      <div class=\"search-input\">\n        <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n        </pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n    >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n      >\n      <!-- item without children -->\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n      <!-- item with children -->\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n      @if (hasChildren(item)) {\n        <div\n          class=\"submenu-wrapper\"\n          [class.expanded]=\"item.isExpanded\"\n          >\n          <ul\n            class=\"submenu-list\"\n          [ngClass]=\"{\n            'submenu-list-root': level === 0,\n            'submenu-list-nested': level > 0,\n          }\"\n            >\n            <ng-container\n            *ngTemplateOutlet=\"\n              recursiveMenu;\n              context: { $implicit: item.children, level: level + 1 }\n            \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;display:flex;align-items:center;justify-content:center}.pt-side-bar-menu .search-input pt-text-input{display:block;width:240px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n  @if (menuConfig.searchable) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n      >\n      <div class=\"search-input\">\n        <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n        </pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n    >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n      >\n      <!-- item without children -->\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n      <!-- item with children -->\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n      @if (hasChildren(item)) {\n        <div\n          class=\"submenu-wrapper\"\n          [class.expanded]=\"item.isExpanded\"\n          >\n          <ul\n            class=\"submenu-list\"\n          [ngClass]=\"{\n            'submenu-list-root': level === 0,\n            'submenu-list-nested': level > 0,\n          }\"\n            >\n            <ng-container\n            *ngTemplateOutlet=\"\n              recursiveMenu;\n              context: { $implicit: item.children, level: level + 1 }\n            \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"] }]
+            args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n  @if (menuConfig.searchable) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n      >\n      <div class=\"search-input\">\n        <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n        </pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n    >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n      >\n      <!-- item without children -->\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n      <!-- item with children -->\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n      @if (hasChildren(item)) {\n        <div\n          class=\"submenu-wrapper\"\n          [class.expanded]=\"item.isExpanded\"\n          >\n          <ul\n            class=\"submenu-list\"\n          [ngClass]=\"{\n            'submenu-list-root': level === 0,\n            'submenu-list-nested': level > 0,\n          }\"\n            >\n            <ng-container\n            *ngTemplateOutlet=\"\n              recursiveMenu;\n              context: { $implicit: item.children, level: level + 1 }\n            \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;display:flex;align-items:center;justify-content:center}.pt-side-bar-menu .search-input pt-text-input{display:block;width:240px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
                 type: Input
             }] } });
@@ -4885,11 +4939,11 @@ class PTPageSkeletonComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{margin-top:0}.footer-card{width:100%;background-color:transparent}\n"] }]
+            args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"] }]
         }], propDecorators: { pageSkeletonConfig: [{
                 type: Input
             }], serverDateTime: [{
@@ -5749,11 +5803,11 @@ class PTDialogComponent {
         return this.removeTextUtilityClasses(this.config.headerIconClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDialogComponent, isStandalone: false, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, 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 && !isFullscreen\"\n  [resizable]=\"config.resizable && !isFullscreen\"\n  [maximizable]=\"false\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"false\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  >\n  <ng-template pTemplate=\"header\">\n    <div class=\"pt-dialog-header-inner\">\n      <div class=\"pt-dialog-header-left\">\n        @if (config.headerIconClass) {\n          <i\n            class=\"pt-dialog-header-icon\"\n            [ngClass]=\"safeHeaderIconClass\"\n            [ngStyle]=\"headerIconStyle\"\n          ></i>\n        }\n\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        @if (config.header) {\n          <span\n            class=\"pt-dialog-header-title\"\n            [ngStyle]=\"headerTitleStyle\"\n            >\n            {{ config.header }}\n          </span>\n        }\n      </div>\n\n      <div class=\"pt-dialog-header-actions\">\n        <button\n          type=\"button\"\n          class=\"pt-dialog-header-btn\"\n          [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n          (click)=\"toggleFullscreen()\"\n          >\n          <i\n            class=\"pi\"\n            [ngClass]=\"\n              isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n            \"\n          ></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n    <div class=\"pt-dialog-body-inner\">\n      <ng-content select=\"[ptDialogContent]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  @if (config.showFooter !== false) {\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-dialog-footer-buttons\">\n        <ng-content select=\"[ptDialogFooter]\"></ng-content>\n      </div>\n    </ng-template>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:visible!important;box-shadow:0 20px 45px #0f172a59}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:visible!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:visible!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{overflow:visible!important}:host ::ng-deep .p-datepicker,:host ::ng-deep .p-datepicker-panel,:host ::ng-deep .p-calendar-panel{z-index:99999!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-header{background-color:#e0f2fe;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:#dcfce7;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:#fff4d1;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:#fde4e4;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff!important;border-top:1px solid rgba(148,163,184,.25)!important;padding:16px 32px 22px!important}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{min-width:0;display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem;flex:0 0 auto}.pt-dialog-header-title{font-weight:700;font-size:1.125rem;overflow-wrap:anywhere}.pt-dialog-header-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.pt-dialog-header-btn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#ffffffa6;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.pt-dialog-header-btn:hover{background:#ffffffe6;border-color:#64748b80;transform:translateY(-1px)}.pt-dialog-header-btn i{font-size:.95rem}:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-icon{color:#2563eb}:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-icon{color:#15803d}:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-icon{color:#b45309}:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-icon{color:#b91c1c}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center;overflow:visible!important}.pt-dialog-body-inner{width:100%;max-width:100%;display:flex;flex-direction:column;gap:.75rem;overflow:visible!important}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.pi,:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.fa{margin-right:.5rem}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#d97706!important;color:#b45309!important}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#16a34a!important;color:#15803d!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):hover{background:#eff6ff!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen{position:fixed!important;inset:1rem!important;width:auto!important;max-width:none!important;height:calc(100vh - 2rem)!important;max-height:calc(100vh - 2rem)!important;margin:0!important;transform:none!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-header{flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-content{height:100%!important;max-height:none!important;overflow:hidden!important;display:flex;flex-direction:column}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body{flex:1 1 auto;min-height:0;height:100%!important;max-height:none!important;overflow:auto!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body-inner{flex:1 1 auto;min-height:0;height:100%!important;overflow:visible!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-footer{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], 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: "17.0.0", version: "21.2.14", type: PTDialogComponent, isStandalone: false, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, 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 && !isFullscreen\"\n  [resizable]=\"config.resizable && !isFullscreen\"\n  [maximizable]=\"false\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"false\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  >\n  <ng-template pTemplate=\"header\">\n    <div class=\"pt-dialog-header-inner\">\n      <div class=\"pt-dialog-header-left\">\n        @if (config.headerIconClass) {\n          <i\n            class=\"pt-dialog-header-icon\"\n            [ngClass]=\"safeHeaderIconClass\"\n            [ngStyle]=\"headerIconStyle\"\n          ></i>\n        }\n\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        @if (config.header) {\n          <span\n            class=\"pt-dialog-header-title\"\n            [ngStyle]=\"headerTitleStyle\"\n            >\n            {{ config.header }}\n          </span>\n        }\n      </div>\n\n      <div class=\"pt-dialog-header-actions\">\n        <button\n          type=\"button\"\n          class=\"pt-dialog-header-btn\"\n          [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n          (click)=\"toggleFullscreen()\"\n          >\n          <i\n            class=\"pi\"\n            [ngClass]=\"\n              isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n            \"\n          ></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n    <div class=\"pt-dialog-body-inner\">\n      <ng-content select=\"[ptDialogContent]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  @if (config.showFooter !== false) {\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-dialog-footer-buttons\">\n        <ng-content select=\"[ptDialogFooter]\"></ng-content>\n      </div>\n    </ng-template>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:hidden!important;box-shadow:0 20px 45px #0f172a59;z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-datepicker,:host ::ng-deep .p-datepicker-panel,:host ::ng-deep .p-calendar-panel{z-index:99999!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-header{background-color:#e0f2fe;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:#dcfce7;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:#fff4d1;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:#fde4e4;border-bottom:0}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{min-width:0;display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem;flex:0 0 auto}.pt-dialog-header-title{font-weight:700;font-size:1.125rem;overflow-wrap:anywhere}.pt-dialog-header-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.pt-dialog-header-btn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#ffffffa6;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.pt-dialog-header-btn:hover{background:#ffffffe6;border-color:#64748b80;transform:translateY(-1px)}.pt-dialog-header-btn i{font-size:.95rem}:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-icon{color:#2563eb}:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-icon{color:#15803d}:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-icon{color:#b45309}:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-icon{color:#b91c1c}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center;width:100%;max-width:100%;box-sizing:border-box;overflow:auto!important}.pt-dialog-body-inner{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:.75rem;box-sizing:border-box;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff!important;border-top:1px solid rgba(148,163,184,.25)!important;padding:16px 32px 22px!important}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.pi,:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.fa{margin-right:.5rem}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#d97706!important;color:#b45309!important}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#16a34a!important;color:#15803d!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):hover{background:#eff6ff!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen{position:fixed!important;inset:1rem!important;width:auto!important;max-width:none!important;height:calc(100vh - 2rem)!important;max-height:calc(100vh - 2rem)!important;margin:0!important;transform:none!important;display:flex!important;flex-direction:column!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-header{flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-content{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;display:flex;flex-direction:column}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body{flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important;overflow:auto!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body-inner{flex:1 1 auto;min-height:0;height:auto!important;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-footer{flex:0 0 auto}@media(max-width:768px){.pt-dialog-header-inner{padding:.85rem .85rem .65rem}.pt-dialog-header-title{font-size:1rem}.pt-dialog-body{padding:.85rem}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{padding:14px 20px 18px!important}.pt-dialog-footer-buttons{flex-wrap:wrap;gap:10px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], 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: "21.2.14", ngImport: i0, type: PTDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dialog', standalone: false, 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 && !isFullscreen\"\n  [resizable]=\"config.resizable && !isFullscreen\"\n  [maximizable]=\"false\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"false\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  >\n  <ng-template pTemplate=\"header\">\n    <div class=\"pt-dialog-header-inner\">\n      <div class=\"pt-dialog-header-left\">\n        @if (config.headerIconClass) {\n          <i\n            class=\"pt-dialog-header-icon\"\n            [ngClass]=\"safeHeaderIconClass\"\n            [ngStyle]=\"headerIconStyle\"\n          ></i>\n        }\n\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        @if (config.header) {\n          <span\n            class=\"pt-dialog-header-title\"\n            [ngStyle]=\"headerTitleStyle\"\n            >\n            {{ config.header }}\n          </span>\n        }\n      </div>\n\n      <div class=\"pt-dialog-header-actions\">\n        <button\n          type=\"button\"\n          class=\"pt-dialog-header-btn\"\n          [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n          (click)=\"toggleFullscreen()\"\n          >\n          <i\n            class=\"pi\"\n            [ngClass]=\"\n              isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n            \"\n          ></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n    <div class=\"pt-dialog-body-inner\">\n      <ng-content select=\"[ptDialogContent]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  @if (config.showFooter !== false) {\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-dialog-footer-buttons\">\n        <ng-content select=\"[ptDialogFooter]\"></ng-content>\n      </div>\n    </ng-template>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:visible!important;box-shadow:0 20px 45px #0f172a59}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:visible!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:visible!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{overflow:visible!important}:host ::ng-deep .p-datepicker,:host ::ng-deep .p-datepicker-panel,:host ::ng-deep .p-calendar-panel{z-index:99999!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-header{background-color:#e0f2fe;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:#dcfce7;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:#fff4d1;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:#fde4e4;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff!important;border-top:1px solid rgba(148,163,184,.25)!important;padding:16px 32px 22px!important}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{min-width:0;display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem;flex:0 0 auto}.pt-dialog-header-title{font-weight:700;font-size:1.125rem;overflow-wrap:anywhere}.pt-dialog-header-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.pt-dialog-header-btn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#ffffffa6;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.pt-dialog-header-btn:hover{background:#ffffffe6;border-color:#64748b80;transform:translateY(-1px)}.pt-dialog-header-btn i{font-size:.95rem}:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-icon{color:#2563eb}:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-icon{color:#15803d}:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-icon{color:#b45309}:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-icon{color:#b91c1c}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center;overflow:visible!important}.pt-dialog-body-inner{width:100%;max-width:100%;display:flex;flex-direction:column;gap:.75rem;overflow:visible!important}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.pi,:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.fa{margin-right:.5rem}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#d97706!important;color:#b45309!important}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#16a34a!important;color:#15803d!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):hover{background:#eff6ff!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen{position:fixed!important;inset:1rem!important;width:auto!important;max-width:none!important;height:calc(100vh - 2rem)!important;max-height:calc(100vh - 2rem)!important;margin:0!important;transform:none!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-header{flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-content{height:100%!important;max-height:none!important;overflow:hidden!important;display:flex;flex-direction:column}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body{flex:1 1 auto;min-height:0;height:100%!important;max-height:none!important;overflow:auto!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body-inner{flex:1 1 auto;min-height:0;height:100%!important;overflow:visible!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-footer{flex:0 0 auto}\n"] }]
+            args: [{ selector: 'pt-dialog', standalone: false, 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 && !isFullscreen\"\n  [resizable]=\"config.resizable && !isFullscreen\"\n  [maximizable]=\"false\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"false\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  >\n  <ng-template pTemplate=\"header\">\n    <div class=\"pt-dialog-header-inner\">\n      <div class=\"pt-dialog-header-left\">\n        @if (config.headerIconClass) {\n          <i\n            class=\"pt-dialog-header-icon\"\n            [ngClass]=\"safeHeaderIconClass\"\n            [ngStyle]=\"headerIconStyle\"\n          ></i>\n        }\n\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        @if (config.header) {\n          <span\n            class=\"pt-dialog-header-title\"\n            [ngStyle]=\"headerTitleStyle\"\n            >\n            {{ config.header }}\n          </span>\n        }\n      </div>\n\n      <div class=\"pt-dialog-header-actions\">\n        <button\n          type=\"button\"\n          class=\"pt-dialog-header-btn\"\n          [title]=\"isFullscreen ? 'R\u00E9duire' : 'Plein \u00E9cran'\"\n          (click)=\"toggleFullscreen()\"\n          >\n          <i\n            class=\"pi\"\n            [ngClass]=\"\n              isFullscreen ? 'pi-window-minimize' : 'pi-window-maximize'\n            \"\n          ></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n    <div class=\"pt-dialog-body-inner\">\n      <ng-content select=\"[ptDialogContent]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  @if (config.showFooter !== false) {\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-dialog-footer-buttons\">\n        <ng-content select=\"[ptDialogFooter]\"></ng-content>\n      </div>\n    </ng-template>\n  }\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog.pt-dialog-overlay{border-radius:18px;overflow:hidden!important;box-shadow:0 20px 45px #0f172a59;z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{overflow:hidden!important;flex:0 0 auto}:host ::ng-deep .p-datepicker,:host ::ng-deep .p-datepicker-panel,:host ::ng-deep .p-calendar-panel{z-index:99999!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-header{background-color:#e0f2fe;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:#dcfce7;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:#fff4d1;border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:#fde4e4;border-bottom:0}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{min-width:0;display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem;flex:0 0 auto}.pt-dialog-header-title{font-weight:700;font-size:1.125rem;overflow-wrap:anywhere}.pt-dialog-header-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.pt-dialog-header-btn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#ffffffa6;color:#334155;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .2s ease}.pt-dialog-header-btn:hover{background:#ffffffe6;border-color:#64748b80;transform:translateY(-1px)}.pt-dialog-header-btn i{font-size:.95rem}:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-info .pt-dialog-header-icon{color:#2563eb}:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-success .pt-dialog-header-icon{color:#15803d}:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-warning .pt-dialog-header-icon{color:#b45309}:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-title,:host ::ng-deep .p-dialog.pt-dialog-danger .pt-dialog-header-icon{color:#b91c1c}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center;width:100%;max-width:100%;box-sizing:border-box;overflow:auto!important}.pt-dialog-body-inner{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:.75rem;box-sizing:border-box;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff!important;border-top:1px solid rgba(148,163,184,.25)!important;padding:16px 32px 22px!important}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.pi,:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer .p-button i.fa{margin-right:.5rem}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#d97706!important;color:#b45309!important}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#16a34a!important;color:#15803d!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help){background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}:host ::ng-deep .p-dialog.pt-dialog-info .p-dialog-footer .p-button:not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):hover{background:#eff6ff!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen{position:fixed!important;inset:1rem!important;width:auto!important;max-width:none!important;height:calc(100vh - 2rem)!important;max-height:calc(100vh - 2rem)!important;margin:0!important;transform:none!important;display:flex!important;flex-direction:column!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-header{flex:0 0 auto}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-content{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;display:flex;flex-direction:column}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body{flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important;overflow:auto!important}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .pt-dialog-body-inner{flex:1 1 auto;min-height:0;height:auto!important;overflow:visible}:host ::ng-deep .p-dialog.pt-dialog-fullscreen .p-dialog-footer{flex:0 0 auto}@media(max-width:768px){.pt-dialog-header-inner{padding:.85rem .85rem .65rem}.pt-dialog-header-title{font-size:1rem}.pt-dialog-body{padding:.85rem}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-footer{padding:14px 20px 18px!important}.pt-dialog-footer-buttons{flex-wrap:wrap;gap:10px}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], visible: [{