ng-prime-tools 1.0.81 → 1.0.83

package/fesm2022/ng-prime-tools.mjs

@@ -2496,39 +2496,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }] } });
 
 class PTSwitchInputComponent {
+    constructor() {
+        /**
+         * Two-way standalone value.
+         */
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.switchChange = new EventEmitter();
+        this.standaloneFormGroup = new FormGroup({});
+    }
     ngOnInit() {
         this.setupControl();
     }
     ngOnChanges(changes) {
-        if (changes['formField'] && !changes['formField'].firstChange) {
+        if (changes['formGroup'] ||
+            changes['formField'] ||
+            changes['config'] ||
+            changes['value']) {
             this.setupControl();
         }
     }
+    ngOnDestroy() {
+        this.valueChangesSubscription?.unsubscribe();
+    }
+    get activeFormGroup() {
+        return this.formGroup || this.standaloneFormGroup;
+    }
+    get controlName() {
+        return this.formField?.name || this.config?.name || 'switch';
+    }
     get inputId() {
-        return `pt-switch-${this.formField?.name || 'field'}`;
+        return `pt-switch-${this.controlName}`;
+    }
+    get labelId() {
+        return `pt-switch-label-${this.controlName}`;
+    }
+    get resolvedHidden() {
+        return this.formField?.hidden ?? this.config?.hidden ?? false;
+    }
+    get resolvedLabel() {
+        return this.formField?.label || this.config?.label;
+    }
+    get resolvedWidth() {
+        return this.formField?.width || this.config?.width || '100%';
+    }
+    get resolvedRequired() {
+        return this.formField?.required ?? this.config?.required ?? false;
+    }
+    get resolvedDisabled() {
+        return this.formField?.disabled ?? this.config?.disabled ?? false;
+    }
+    get resolvedErrorText() {
+        return this.formField?.errorText || this.config?.errorText;
     }
     setupControl() {
-        const name = this.formField?.name;
-        if (!name || !this.formGroup) {
+        const name = this.controlName;
+        if (!name) {
             return;
         }
-        let control = this.formGroup.get(name);
+        const initialValue = this.getInitialValue();
+        const hasExplicitValue = this.hasExplicitFieldValue(initialValue);
+        let control = this.activeFormGroup.get(name);
         if (!control) {
-            control = new FormControl(this.formField?.value ?? (this.formField?.required ? null : false));
-            this.formGroup.addControl(name, control);
+            control = new FormControl(hasExplicitValue ? initialValue : this.resolvedRequired ? null : false);
+            this.activeFormGroup.addControl(name, control);
+        }
+        else if (!this.formGroup && this.hasExplicitFieldValue(this.value)) {
+            control.setValue(this.value, { emitEvent: false });
         }
         control.setValidators(this.getValidators());
-        if (this.formField?.disabled) {
+        if (this.resolvedDisabled) {
             control.disable({ emitEvent: false });
         }
         else {
             control.enable({ emitEvent: false });
         }
         control.updateValueAndValidity({ emitEvent: false });
+        this.valueChangesSubscription?.unsubscribe();
+        this.valueChangesSubscription = control.valueChanges.subscribe((selectedValue) => {
+            this.valueChange.emit(selectedValue);
+            this.switchChange.emit(selectedValue);
+        });
+    }
+    getInitialValue() {
+        if (this.formField?.value !== undefined) {
+            return this.formField.value;
+        }
+        if (this.value !== undefined && this.value !== null) {
+            return this.value;
+        }
+        return this.config?.value ?? null;
+    }
+    hasExplicitFieldValue(value) {
+        return value !== null && value !== undefined;
     }
     getValidators() {
         const validators = [];
-        if (this.formField?.required) {
+        if (this.resolvedRequired) {
             validators.push(this.requireChoiceValidator());
         }
         return validators;
@@ -2541,22 +2605,31 @@ class PTSwitchInputComponent {
         };
     }
     getErrorMessage() {
-        const control = this.formGroup.get(this.formField.name);
+        const control = this.activeFormGroup.get(this.controlName);
         if (control?.errors?.['requiredChoice']) {
-            return this.formField.errorText || `${this.formField.label} is required`;
+            return (this.resolvedErrorText ||
+                `${this.resolvedLabel || this.controlName} is required`);
         }
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSwitchInputComponent, isStandalone: false, selector: "pt-switch-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"switch-container\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n      ></p-toggleswitch>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"switch-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSwitchInputComponent, isStandalone: false, selector: "pt-switch-input", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", switchChange: "switchChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    <div class=\"switch-container\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"controlName\"\n        [ariaLabelledBy]=\"labelId\"\n      ></p-toggleswitch>\n\n      @if (resolvedLabel) {\n        <label [id]=\"labelId\" [for]=\"inputId\" class=\"switch-label\">\n          {{ resolvedLabel }}\n        </label>\n      }\n    </div>\n\n    @if (\n      activeFormGroup.get(controlName)?.errors &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSwitchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-switch-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: formField.width || '100%' }\"\n  >\n    <div class=\"switch-container\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n      ></p-toggleswitch>\n\n      @if (formField.label) {\n        <label [for]=\"inputId\" class=\"switch-label\">\n          {{ formField.label }}\n        </label>\n      }\n    </div>\n\n    @if (\n      formGroup.get(formField.name)?.errors &&\n      (formGroup.get(formField.name)?.touched ||\n        formGroup.get(formField.name)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"] }]
+            args: [{ selector: 'pt-switch-input', standalone: false, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    <div class=\"switch-container\">\n      <p-toggleswitch\n        [inputId]=\"inputId\"\n        [formControlName]=\"controlName\"\n        [ariaLabelledBy]=\"labelId\"\n      ></p-toggleswitch>\n\n      @if (resolvedLabel) {\n        <label [id]=\"labelId\" [for]=\"inputId\" class=\"switch-label\">\n          {{ resolvedLabel }}\n        </label>\n      }\n    </div>\n\n    @if (\n      activeFormGroup.get(controlName)?.errors &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
+            }], config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], switchChange: [{
+                type: Output
             }] } });
 
 class PTTextAreaInputComponent {
@@ -3076,11 +3149,11 @@ class PTDynamicFormFieldComponent {
         return field;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n  >\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- EMAIL (NEW) -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\n        ? field.width || inputWidth\n        : 'auto',\n  }\"\n>\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "switchChange"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n  >\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- EMAIL (NEW) -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+            args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\n        ? field.width || inputWidth\n        : 'auto',\n  }\"\n>\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], form: [{
@@ -3095,11 +3168,11 @@ class PTFormBuilderComponent {
         this.mainGroup = { fields: [], groups: [] };
         this.buttons = [];
         /**
-         * Largeur des inputs/champs
+         * Largeur des inputs/champs.
          */
         this.inputWidth = '100%';
         /**
-         * Nouvelle largeur globale du composant pt-form-builder
+         * Largeur globale du composant pt-form-builder.
          */
         this.formWidth = '100%';
         this.language = 'en';
@@ -3148,10 +3221,26 @@ class PTFormBuilderComponent {
     buildFormGroup(group) {
         (group?.fields ?? []).forEach((field) => {
             const validators = this.buildValidators(field);
-            this.form.addControl(field.name, this.fb.control({ value: field.value ?? null, disabled: !!field.disabled }, validators));
+            const anyField = field;
+            this.form.addControl(field.name, this.fb.control({
+                value: this.resolveInitialValue(field),
+                disabled: !!anyField.disabled,
+            }, validators));
         });
         (group?.groups ?? []).forEach((subGroup) => this.buildFormGroup(subGroup));
     }
+    resolveInitialValue(field) {
+        if (field.value !== undefined && field.value !== null) {
+            return field.value;
+        }
+        if (field.type === FormInputTypeEnum.SWITCH) {
+            return field.required ? null : false;
+        }
+        if (field.type === FormInputTypeEnum.CHECKBOX) {
+            return false;
+        }
+        return null;
+    }
     buildValidators(field) {
         const validators = [];
         const anyField = field;
@@ -3180,13 +3269,14 @@ class PTFormBuilderComponent {
         return validators;
     }
     isInvalid(field) {
-        const c = this.form.get(field.name);
-        return !!c && c.invalid && (c.touched || c.dirty);
+        const control = this.form.get(field.name);
+        return !!control && control.invalid && (control.touched || control.dirty);
     }
     getErrorMessage(field) {
         const control = this.form.get(field.name);
-        if (!control)
+        if (!control) {
             return '';
+        }
         const lang = this.language;
         if (control.hasError('required')) {
             return (field.errorText ||
@@ -3221,11 +3311,11 @@ class PTFormBuilderComponent {
         this.formChange.emit(this.form.getRawValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    <div class=\"button-group\">\n      @for (button of buttons; track button.text) {\n        <button\n          type=\"button\"\n          pButton\n          [label]=\"button.text\"\n          [icon]=\"button.icon || ''\"\n          [class]=\"button.color || ''\"\n          [ngStyle]=\"{\n            color: button.fontColor || null,\n            'background-color': button.backgroundColor || null,\n            'border-color':\n              button.borderColor || button.backgroundColor || null,\n          }\"\n          (click)=\"\n            button.isSubmit\n              ? onSubmit()\n              : button.isClear\n                ? onClear()\n                : button.action\n                  ? button.action()\n                  : null\n          \"\n        ></button>\n      }\n    </div>\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    @if (buttons.length) {\n      <div class=\"button-group\">\n        @for (button of buttons; track button.text) {\n          <button\n            type=\"button\"\n            pButton\n            [label]=\"button.text\"\n            [icon]=\"button.icon || ''\"\n            [class]=\"button.color || ''\"\n            [disabled]=\"button.disabled || false\"\n            [ngStyle]=\"{\n              color: button.fontColor || null,\n              'background-color': button.backgroundColor || null,\n              'border-color':\n                button.borderColor || button.backgroundColor || null,\n            }\"\n            (click)=\"\n              button.isSubmit\n                ? onSubmit()\n                : button.isClear\n                  ? onClear()\n                  : button.action\n                    ? button.action()\n                    : null\n            \"\n          ></button>\n        }\n      </div>\n    }\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    <div class=\"button-group\">\n      @for (button of buttons; track button.text) {\n        <button\n          type=\"button\"\n          pButton\n          [label]=\"button.text\"\n          [icon]=\"button.icon || ''\"\n          [class]=\"button.color || ''\"\n          [ngStyle]=\"{\n            color: button.fontColor || null,\n            'background-color': button.backgroundColor || null,\n            'border-color':\n              button.borderColor || button.backgroundColor || null,\n          }\"\n          (click)=\"\n            button.isSubmit\n              ? onSubmit()\n              : button.isClear\n                ? onClear()\n                : button.action\n                  ? button.action()\n                  : null\n          \"\n        ></button>\n      }\n    </div>\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:#007bff;color:#fff}.button-group button.p-button-secondary{background-color:#6c757d;color:#fff}.button-group button.p-button-success{background-color:#28a745;color:#fff}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
+            args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n  class=\"pt-form-builder-wrapper\"\n  [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n  @if (title) {\n    <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n  }\n\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    @for (field of mainGroup.fields; track field.name) {\n      <pt-dynamic-form-field\n        [field]=\"field\"\n        [form]=\"form\"\n        [inputWidth]=\"inputWidth\"\n      ></pt-dynamic-form-field>\n    }\n\n    @for (group of mainGroup.groups; track $index) {\n      <div\n        class=\"form-field-group\"\n        [ngStyle]=\"{ width: group.width || '100%' }\"\n      >\n        @for (field of group.fields; track field.name) {\n          <pt-dynamic-form-field\n            [field]=\"field\"\n            [form]=\"form\"\n            [inputWidth]=\"inputWidth\"\n            class=\"flex-item\"\n          ></pt-dynamic-form-field>\n        }\n      </div>\n    }\n\n    @if (buttons.length) {\n      <div class=\"button-group\">\n        @for (button of buttons; track button.text) {\n          <button\n            type=\"button\"\n            pButton\n            [label]=\"button.text\"\n            [icon]=\"button.icon || ''\"\n            [class]=\"button.color || ''\"\n            [disabled]=\"button.disabled || false\"\n            [ngStyle]=\"{\n              color: button.fontColor || null,\n              'background-color': button.backgroundColor || null,\n              'border-color':\n                button.borderColor || button.backgroundColor || null,\n            }\"\n            (click)=\"\n              button.isSubmit\n                ? onSubmit()\n                : button.isClear\n                  ? onClear()\n                  : button.action\n                    ? button.action()\n                    : null\n            \"\n          ></button>\n        }\n      </div>\n    }\n  </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { mainGroup: [{
                 type: Input
             }], buttons: [{
@@ -3880,14 +3970,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }] } });
 
 class PTCardComponent {
-    static { this.DEFAULT_TITLE_COLOR = '#333'; }
+    static { this.DEFAULT_TITLE_COLOR = 'var(--pt-card-title, #333)'; }
     static { this.DEFAULT_TITLE_FONT_SIZE = '1.5em'; }
-    static { this.DEFAULT_ICON_COLOR = '#333'; }
+    static { this.DEFAULT_ICON_COLOR = 'var(--pt-card-icon, #333)'; }
     static { this.DEFAULT_ICON_FONT_SIZE = '1em'; }
     static { this.DEFAULT_ICON_POSITION = 'left'; }
     static { this.DEFAULT_TITLE_POSITION = 'left'; }
     static { this.DEFAULT_MENU_POSITION = 'right'; }
-    static { this.DEFAULT_BORDER_COLOR = '#ddd'; }
+    static { this.DEFAULT_BORDER_COLOR = 'var(--pt-card-border, #ddd)'; }
     static { this.DEFAULT_BORDER_WIDTH = '1px'; }
     static { this.DEFAULT_WIDTH = '100%'; }
     static { this.DEFAULT_HEIGHT = 'auto'; }
@@ -3903,7 +3993,7 @@ class PTCardComponent {
     static { this.DEFAULT_BODY_PADDING = '0'; }
     static { this.DEFAULT_MARGIN = '16px 0'; }
     static { this.DEFAULT_BORDER_RADIUS = '8px'; }
-    static { this.DEFAULT_BOX_SHADOW = '0 2px 4px rgba(0, 0, 0, 0.1)'; }
+    static { this.DEFAULT_BOX_SHADOW = 'var(--pt-card-shadow, 0 2px 4px rgba(0, 0, 0, 0.1))'; }
     constructor(cd) {
         this.cd = cd;
         this.config = {};
@@ -3980,10 +4070,13 @@ class PTCardComponent {
             : 1;
         const backgroundColor = this.config.backgroundColor && this.config.transparencyPercentage !== '0'
             ? this.hexToRgba(this.config.backgroundColor, backgroundTransparency)
-            : 'transparent';
+            : 'var(--pt-card-bg, transparent)';
         const backgroundImage = this.config.pattern?.imageUrl &&
             this.config.pattern.transparencyPercentage !== '0'
-            ? `linear-gradient(rgba(255, 255, 255, ${1 - patternTransparency}), rgba(255, 255, 255, ${1 - patternTransparency})), url('${this.config.pattern.imageUrl}')`
+            ? `linear-gradient(
+            rgba(var(--pt-card-pattern-overlay-rgb, 255, 255, 255), ${1 - patternTransparency}),
+            rgba(var(--pt-card-pattern-overlay-rgb, 255, 255, 255), ${1 - patternTransparency})
+          ), url('${this.config.pattern.imageUrl}')`
             : '';
         const patternWidth = this.config.pattern?.width || '100%';
         const patternHeight = this.config.pattern?.height || 'auto';
@@ -4004,6 +4097,7 @@ class PTCardComponent {
             backgroundSize,
             backgroundPosition,
             backgroundRepeat,
+            color: 'var(--pt-card-text, inherit)',
             width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
             height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
             border: this.config.noBorder
@@ -4031,6 +4125,7 @@ class PTCardComponent {
             boxSizing: 'border-box',
             overflowX: this.isScrollableHorizontal() ? 'auto' : 'hidden',
             overflowY: this.isScrollableVertical() ? 'auto' : 'hidden',
+            color: 'var(--pt-card-body-text, inherit)',
         };
     }
     getHeaderStyles() {
@@ -4042,6 +4137,7 @@ class PTCardComponent {
             alignItems,
             marginBottom: '16px',
             position: 'relative',
+            color: 'var(--pt-card-header-text, inherit)',
         };
     }
     isScrollableHorizontal() {
@@ -4061,18 +4157,18 @@ class PTCardComponent {
     }
     hexToRgba(hex, alpha) {
         const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-        hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
+        hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + b + b);
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
         return result
             ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`
             : hex;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCardComponent, isStandalone: false, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n    >\n      @if (getIconClass() && getIconPosition() === \"left\") {\n        <i\n          class=\"card-header-icon-left\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"card-title\">\n        {{ getTitleText() }}\n      </span>\n\n      @if (getIconClass() && getIconPosition() === \"right\") {\n        <i\n          class=\"card-header-icon-right\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      @if (config.menu) {\n        <pt-menu\n          class=\"card-menu\"\n          [config]=\"config.menu\"\n          [ngClass]=\"{\n            'menu-left': getMenuPosition() === 'left',\n            'menu-right': getMenuPosition() === 'right',\n          }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCardComponent, isStandalone: false, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n    >\n      @if (getIconClass() && getIconPosition() === \"left\") {\n        <i\n          class=\"card-header-icon-left\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"card-title\">\n        {{ getTitleText() }}\n      </span>\n\n      @if (getIconClass() && getIconPosition() === \"right\") {\n        <i\n          class=\"card-header-icon-right\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      @if (config.menu) {\n        <pt-menu\n          class=\"card-menu\"\n          [config]=\"config.menu\"\n          [ngClass]=\"{\n            'menu-left': getMenuPosition() === 'left',\n            'menu-right': getMenuPosition() === 'right',\n          }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:var(--pt-card-bg, transparent);color:var(--pt-card-text, inherit)}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, var(--pt-card-overlay-bg, rgba(255, 255, 255, 0)) );background-image:var(--background-image-url, none);opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch;color:var(--pt-card-body-text, inherit)}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch;color:var(--pt-card-header-text, inherit)}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px;color:var(--pt-card-icon, inherit)}.pt-card .card-header-icon-right{margin-left:6px;color:var(--pt-card-icon, inherit)}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer;color:var(--pt-card-menu-icon, inherit)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-card', standalone: false, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n    >\n      @if (getIconClass() && getIconPosition() === \"left\") {\n        <i\n          class=\"card-header-icon-left\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"card-title\">\n        {{ getTitleText() }}\n      </span>\n\n      @if (getIconClass() && getIconPosition() === \"right\") {\n        <i\n          class=\"card-header-icon-right\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      @if (config.menu) {\n        <pt-menu\n          class=\"card-menu\"\n          [config]=\"config.menu\"\n          [ngClass]=\"{\n            'menu-left': getMenuPosition() === 'left',\n            'menu-right': getMenuPosition() === 'right',\n          }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"] }]
+            args: [{ selector: 'pt-card', standalone: false, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n    >\n      @if (getIconClass() && getIconPosition() === \"left\") {\n        <i\n          class=\"card-header-icon-left\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"card-title\">\n        {{ getTitleText() }}\n      </span>\n\n      @if (getIconClass() && getIconPosition() === \"right\") {\n        <i\n          class=\"card-header-icon-right\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      @if (config.menu) {\n        <pt-menu\n          class=\"card-menu\"\n          [config]=\"config.menu\"\n          [ngClass]=\"{\n            'menu-left': getMenuPosition() === 'left',\n            'menu-right': getMenuPosition() === 'right',\n          }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:var(--pt-card-bg, transparent);color:var(--pt-card-text, inherit)}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, var(--pt-card-overlay-bg, rgba(255, 255, 255, 0)) );background-image:var(--background-image-url, none);opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch;color:var(--pt-card-body-text, inherit)}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch;color:var(--pt-card-header-text, inherit)}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px;color:var(--pt-card-icon, inherit)}.pt-card .card-header-icon-right{margin-left:6px;color:var(--pt-card-icon, inherit)}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer;color:var(--pt-card-menu-icon, inherit)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -4577,15 +4673,20 @@ class PTNavbarMenuComponent {
         const backgroundRepeat = `${repeatX} ${repeatY}`;
         const backgroundPosition = this.navBarMenuConfig.pattern?.position || 'center';
         const backgroundImage = imageUrl
-            ? `linear-gradient(rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100}),
-      rgba(255, 255, 255, ${1 - parseFloat(transparency) / 100})), url(${imageUrl})`
+            ? `linear-gradient(
+        rgba(var(--pt-navbar-pattern-overlay-rgb, 255, 255, 255), ${1 - parseFloat(transparency) / 100}),
+        rgba(var(--pt-navbar-pattern-overlay-rgb, 255, 255, 255), ${1 - parseFloat(transparency) / 100})
+      ), url(${imageUrl})`
             : '';
         return {
-            backgroundColor: this.navBarMenuConfig.pattern ? 'transparent' : '#fff',
+            backgroundColor: this.navBarMenuConfig.pattern
+                ? 'var(--pt-navbar-pattern-bg, transparent)'
+                : 'var(--pt-navbar-bg, #ffffff)',
             backgroundImage,
             backgroundSize: `${patternWidth} ${patternHeight}`,
             backgroundPosition,
             backgroundRepeat,
+            color: 'var(--pt-navbar-text, #1f2937)',
             height: this.navBarMenuConfig.height || 'auto',
             minHeight: this.navBarMenuConfig.minHeight || '56px',
             paddingTop: this.navBarMenuConfig.paddingTop || '0',
@@ -4602,23 +4703,23 @@ class PTNavbarMenuComponent {
     getToggleButtonStyles() {
         return {
             color: this.navBarMenuConfig.toggleButtonColor ||
-                PTNavbarMenuComponent.DEFAULT_TOGGLE_BUTTON_COLOR,
+                'var(--pt-navbar-toggle-color, #333)',
         };
     }
     getDateTimeTextStyles() {
         const s = this.navBarMenuConfig.dateTime?.textStyle;
         return {
-            color: s?.color ?? '#222',
+            color: s?.color ?? 'var(--pt-navbar-datetime-text, #222)',
             fontSize: s?.fontSize ?? '14px',
             fontWeight: s?.fontWeight ?? '600',
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>{{ getUserInitials() }}</span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>{{ getUserInitials() }}</span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>{{ item.text }}</span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:#0f172a;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:#2563eb;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:#64748b;font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>{{ getUserInitials() }}</span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>{{ getUserInitials() }}</span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>{{ item.text }}</span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>{{ getUserInitials() }}</span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>{{ getUserInitials() }}</span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>{{ item.text }}</span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:#0f172a;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:#2563eb;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:#64748b;font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"] }]
+            args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>{{ getUserInitials() }}</span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>{{ getUserInitials() }}</span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>{{ item.text }}</span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"] }]
         }], propDecorators: { navBarMenuConfig: [{
                 type: Input
             }], serverDateTime: [{
@@ -4669,17 +4770,17 @@ class PTSideBarMenuComponent {
             width: '250px',
             height: '100vh',
             scrollable: true,
-            backgroundColor: 'white',
-            fontColor: '#333',
-            fontColorSubMenu: '#666',
-            hoverColor: '#f1f1f1',
-            hoverColorSubMenu: '#e0e0e0',
+            backgroundColor: 'var(--pt-sidebar-bg, #ffffff)',
+            fontColor: 'var(--pt-sidebar-menu-text, #333333)',
+            fontColorSubMenu: 'var(--pt-sidebar-submenu-text, #666666)',
+            hoverColor: 'var(--pt-sidebar-menu-hover-bg, #f1f1f1)',
+            hoverColorSubMenu: 'var(--pt-sidebar-submenu-hover-bg, #e0e0e0)',
         };
         this.searchCardConfig = {
             alignContent: 'center',
             alignBodyContent: 'center',
             identifier: 'pt-side-bar-menu/search',
-            backgroundColor: 'white',
+            backgroundColor: 'var(--pt-sidebar-bg, #ffffff)',
             width: '250px',
             height: '72px',
             padding: '0',
@@ -4689,7 +4790,7 @@ class PTSideBarMenuComponent {
         };
         this.cardConfig = {
             identifier: 'pt-side-bar-menu',
-            backgroundColor: 'white',
+            backgroundColor: 'var(--pt-sidebar-bg, #ffffff)',
             padding: '10px 6px',
             bodyPadding: '0',
             margin: '6px 0px',
@@ -4729,7 +4830,7 @@ class PTSideBarMenuComponent {
         const sidebarWidth = this.menuConfig.width || '250px';
         this.cardConfig = {
             identifier: 'pt-side-bar-menu',
-            backgroundColor: this.menuConfig.backgroundColor || 'white',
+            backgroundColor: this.menuConfig.backgroundColor || 'var(--pt-sidebar-bg, #ffffff)',
             width: sidebarWidth,
             height: this.menuConfig.height || '100vh',
             scrollableVertical: this.menuConfig.scrollable ?? true,
@@ -4737,12 +4838,14 @@ class PTSideBarMenuComponent {
             padding: '10px 6px',
             bodyPadding: '0',
             margin: '0',
+            borderColor: 'var(--pt-sidebar-border, #e5e7eb)',
+            boxShadow: 'var(--pt-sidebar-shadow, none)',
         };
         this.searchCardConfig = {
             alignContent: 'default',
             alignBodyContent: 'default',
             identifier: 'pt-side-bar-menu/search',
-            backgroundColor: this.menuConfig.backgroundColor || 'white',
+            backgroundColor: this.menuConfig.backgroundColor || 'var(--pt-sidebar-bg, #ffffff)',
             width: sidebarWidth,
             height: 'auto',
             padding: '10px 14px',
@@ -4751,6 +4854,8 @@ class PTSideBarMenuComponent {
             pattern: this.menuConfig.pattern,
             scrollableVertical: false,
             scrollableHorizontal: false,
+            borderColor: 'var(--pt-sidebar-border, #e5e7eb)',
+            boxShadow: 'var(--pt-sidebar-shadow, none)',
         };
         this.searchField = {
             ...this.searchField,
@@ -4784,13 +4889,25 @@ class PTSideBarMenuComponent {
     getDefaultBadgeColors(type) {
         switch (type) {
             case BadgeType.Info:
-                return { color: 'white', backgroundColor: '#17a2b8' };
+                return {
+                    color: 'var(--pt-sidebar-badge-info-text, #ffffff)',
+                    backgroundColor: 'var(--pt-sidebar-badge-info-bg, #17a2b8)',
+                };
             case BadgeType.Danger:
-                return { color: 'white', backgroundColor: '#dc3545' };
+                return {
+                    color: 'var(--pt-sidebar-badge-danger-text, #ffffff)',
+                    backgroundColor: 'var(--pt-sidebar-badge-danger-bg, #dc3545)',
+                };
             case BadgeType.Warning:
-                return { color: 'white', backgroundColor: '#ffc107' };
+                return {
+                    color: 'var(--pt-sidebar-badge-warning-text, #ffffff)',
+                    backgroundColor: 'var(--pt-sidebar-badge-warning-bg, #ffc107)',
+                };
             default:
-                return { color: 'white', backgroundColor: '#6c757d' };
+                return {
+                    color: 'var(--pt-sidebar-badge-default-text, #ffffff)',
+                    backgroundColor: 'var(--pt-sidebar-badge-default-bg, #6c757d)',
+                };
         }
     }
     onSearch(searchTerm) {
@@ -4832,12 +4949,12 @@ class PTSideBarMenuComponent {
     }
     getMenuItemStyles() {
         return {
-            color: this.menuConfig.fontColor || '#333',
+            color: this.menuConfig.fontColor || 'var(--pt-sidebar-menu-text, #333333)',
         };
     }
     getMenuLinkStyles() {
         return {
-            color: this.menuConfig.fontColor || '#333',
+            color: this.menuConfig.fontColor || 'var(--pt-sidebar-menu-text, #333333)',
             textDecoration: 'none',
             borderRadius: '8px',
             padding: '10px 15px',
@@ -4849,52 +4966,66 @@ class PTSideBarMenuComponent {
     }
     getSubMenuLinkStyles(level = 1) {
         return {
-            color: this.menuConfig.fontColorSubMenu || this.menuConfig.fontColor || '#666',
+            color: this.menuConfig.fontColorSubMenu ||
+                this.menuConfig.fontColor ||
+                'var(--pt-sidebar-submenu-text, #666666)',
             textDecoration: 'none',
             borderRadius: '5px',
             padding: level === 1 ? '5px 10px' : '4px 10px',
             transition: 'background-color 0.2s, color 0.2s',
-            fontSize: level === 1 ? '14px' : '13px',
             display: 'flex',
             alignItems: 'center',
+            fontSize: level === 1 ? '14px' : '13px',
         };
     }
+    getMenuHoverBackground() {
+        return (this.menuConfig.hoverColor || 'var(--pt-sidebar-menu-hover-bg, #f1f1f1)');
+    }
+    getSubMenuHoverBackground() {
+        return (this.menuConfig.hoverColorSubMenu ||
+            this.menuConfig.hoverColor ||
+            'var(--pt-sidebar-submenu-hover-bg, #f1f1f1)');
+    }
+    getMenuHoverColor() {
+        return (this.menuConfig.fontColor || 'var(--pt-sidebar-menu-hover-text, #111111)');
+    }
+    getSubMenuHoverColor() {
+        return (this.menuConfig.fontColorSubMenu ||
+            this.menuConfig.fontColor ||
+            'var(--pt-sidebar-submenu-hover-text, #000000)');
+    }
     applyHoverEffects() {
-        const menuLinks = this.el.nativeElement.querySelectorAll('a.menu-link');
-        const subMenuLinks = this.el.nativeElement.querySelectorAll('a.submenu-link');
+        const menuLinks = this.el.nativeElement.querySelectorAll('.menu-link') ?? [];
+        const submenuLinks = this.el.nativeElement.querySelectorAll('.submenu-link') ?? [];
         menuLinks.forEach((link) => {
             this.renderer.listen(link, 'mouseenter', () => {
-                this.renderer.setStyle(link, 'background-color', this.menuConfig.hoverColor || '#f1f1f1');
-                this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColor || '#111');
+                this.renderer.setStyle(link, 'background-color', this.getMenuHoverBackground());
+                this.renderer.setStyle(link, 'color', this.getMenuHoverColor());
             });
             this.renderer.listen(link, 'mouseleave', () => {
-                this.renderer.setStyle(link, 'background-color', 'transparent');
-                this.renderer.setStyle(link, 'color', this.menuConfig.fontColor || '#333');
+                this.renderer.removeStyle(link, 'background-color');
+                this.renderer.setStyle(link, 'color', this.menuConfig.fontColor || 'var(--pt-sidebar-menu-text, #333333)');
             });
         });
-        subMenuLinks.forEach((link) => {
+        submenuLinks.forEach((link) => {
             this.renderer.listen(link, 'mouseenter', () => {
-                this.renderer.setStyle(link, 'background-color', this.menuConfig.hoverColorSubMenu ||
-                    this.menuConfig.hoverColor ||
-                    '#f1f1f1');
-                this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColorSubMenu ||
-                    this.menuConfig.hoverFontColor ||
-                    '#000');
+                this.renderer.setStyle(link, 'background-color', this.getSubMenuHoverBackground());
+                this.renderer.setStyle(link, 'color', this.getSubMenuHoverColor());
             });
             this.renderer.listen(link, 'mouseleave', () => {
-                this.renderer.setStyle(link, 'background-color', 'transparent');
+                this.renderer.removeStyle(link, 'background-color');
                 this.renderer.setStyle(link, 'color', this.menuConfig.fontColorSubMenu ||
                     this.menuConfig.fontColor ||
-                    '#666');
+                    'var(--pt-sidebar-submenu-text, #666666)');
             });
         });
     }
     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 (isSearchEnabled()) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n    >\n      <div class=\"search-input\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [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 === false }\"\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      @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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n\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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box}.pt-side-bar-menu *{box-sizing:border-box}.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;width:100%;box-sizing:border-box}.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}.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%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0}\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 (isSearchEnabled()) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n    >\n      <div class=\"search-input\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [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 === false }\"\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      @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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n\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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box;background:var(--pt-sidebar-bg, transparent);color:var(--pt-sidebar-text, #1f2937)}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color:var(--pt-sidebar-badge-info-bg, #38bdf8);border-radius:5px;color:var(--pt-sidebar-badge-info-text, #ffffff);font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:var(--pt-sidebar-chevron, #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:var(--pt-sidebar-menu-text, #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:var(--pt-sidebar-menu-hover-bg, #f1f1f1);color:var(--pt-sidebar-menu-hover-text, #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;width:100%;box-sizing:border-box}.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}.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 var(--pt-sidebar-submenu-border, #e5e7eb);margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:var(--pt-sidebar-submenu-border, #e5e7eb);bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid var(--pt-sidebar-submenu-nested-border, #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:var(--pt-sidebar-submenu-border, #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:var(--pt-sidebar-submenu-text, #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:var(--pt-sidebar-submenu-hover-bg, #f1f1f1);color:var(--pt-sidebar-submenu-hover-text, #000)}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box;background:var(--pt-sidebar-search-bg, #ffffff)!important;color:var(--pt-sidebar-search-text, #111827)!important;border-color:var(--pt-sidebar-search-border, #d1d5db)!important}.pt-side-bar-menu .search-input ::ng-deep input::placeholder,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext::placeholder{color:var(--pt-sidebar-search-placeholder, #94a3b8)!important}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0;border-color:var(--pt-sidebar-search-focus-border, #3b82f6)!important;box-shadow:0 0 0 3px var(--pt-sidebar-search-focus-shadow, rgba(59, 130, 246, .15))!important}\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 (isSearchEnabled()) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n    >\n      <div class=\"search-input\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [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 === false }\"\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      @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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n\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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box}.pt-side-bar-menu *{box-sizing:border-box}.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;width:100%;box-sizing:border-box}.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}.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%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0}\n"] }]
+            args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n  @if (isSearchEnabled()) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n    >\n      <div class=\"search-input\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [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 === false }\"\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      @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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n\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\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\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{display:block;box-sizing:border-box;background:var(--pt-sidebar-bg, transparent);color:var(--pt-sidebar-text, #1f2937)}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color:var(--pt-sidebar-badge-info-bg, #38bdf8);border-radius:5px;color:var(--pt-sidebar-badge-info-text, #ffffff);font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:var(--pt-sidebar-chevron, #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:var(--pt-sidebar-menu-text, #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:var(--pt-sidebar-menu-hover-bg, #f1f1f1);color:var(--pt-sidebar-menu-hover-text, #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;width:100%;box-sizing:border-box}.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}.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 var(--pt-sidebar-submenu-border, #e5e7eb);margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:var(--pt-sidebar-submenu-border, #e5e7eb);bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid var(--pt-sidebar-submenu-nested-border, #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:var(--pt-sidebar-submenu-border, #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:var(--pt-sidebar-submenu-text, #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:var(--pt-sidebar-submenu-hover-bg, #f1f1f1);color:var(--pt-sidebar-submenu-hover-text, #000)}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box;background:var(--pt-sidebar-search-bg, #ffffff)!important;color:var(--pt-sidebar-search-text, #111827)!important;border-color:var(--pt-sidebar-search-border, #d1d5db)!important}.pt-side-bar-menu .search-input ::ng-deep input::placeholder,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext::placeholder{color:var(--pt-sidebar-search-placeholder, #94a3b8)!important}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0;border-color:var(--pt-sidebar-search-focus-border, #3b82f6)!important;box-shadow:0 0 0 3px var(--pt-sidebar-search-focus-shadow, rgba(59, 130, 246, .15))!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
                 type: Input
             }] } });
@@ -5108,9 +5239,14 @@ class PTPageSkeletonComponent {
         this.pageSkeletonConfig.backgroundCardConfig = {
             identifier: 'pt-page-skeleton/background',
             noBorder: this.pageSkeletonConfig.backgroundCardConfig?.noBorder ?? true,
-            backgroundColor: this.pageSkeletonConfig.backgroundCardConfig?.backgroundColor || '#fff',
+            backgroundColor: this.pageSkeletonConfig.backgroundCardConfig?.backgroundColor ||
+                'var(--pt-page-skeleton-bg, #ffffff)',
             padding: this.pageSkeletonConfig.backgroundCardConfig?.padding || '20px',
             margin: this.pageSkeletonConfig.backgroundCardConfig?.margin || '10px',
+            borderColor: this.pageSkeletonConfig.backgroundCardConfig?.borderColor ||
+                'var(--pt-page-skeleton-border, transparent)',
+            boxShadow: this.pageSkeletonConfig.backgroundCardConfig?.boxShadow ||
+                'var(--pt-page-skeleton-shadow, none)',
             ...this.pageSkeletonConfig.backgroundCardConfig,
         };
     }
@@ -5118,19 +5254,24 @@ class PTPageSkeletonComponent {
         this.pageSkeletonConfig.contentCardConfig = {
             identifier: 'pt-page-skeleton/content',
             noBorder: this.pageSkeletonConfig.contentCardConfig?.noBorder ?? false,
-            backgroundColor: this.pageSkeletonConfig.contentCardConfig?.backgroundColor || '#f0f0f0',
+            backgroundColor: this.pageSkeletonConfig.contentCardConfig?.backgroundColor ||
+                'var(--pt-page-skeleton-content-bg, #f0f0f0)',
             padding: this.pageSkeletonConfig.contentCardConfig?.padding || '15px',
+            borderColor: this.pageSkeletonConfig.contentCardConfig?.borderColor ||
+                'var(--pt-page-skeleton-content-border, #e5e7eb)',
+            boxShadow: this.pageSkeletonConfig.contentCardConfig?.boxShadow ||
+                'var(--pt-page-skeleton-content-shadow, none)',
             scrollableVertical: true,
             scrollableHorizontal: true,
             ...this.pageSkeletonConfig.contentCardConfig,
         };
     }
     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 -->\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      <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        <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{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"] }] }); }
+    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 -->\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      <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        <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;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.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;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\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 -->\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      <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        <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{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"] }]
+            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 -->\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      <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        <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;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.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;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\n"] }]
         }], propDecorators: { pageSkeletonConfig: [{
                 type: Input
             }], serverDateTime: [{
@@ -5763,11 +5904,11 @@ class PTConfirmDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, deps: [{ token: i1$1.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 24px 60px #0f172a4d!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:#fff;overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid;box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:#ffffffd9;color:#64748b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:#fff;color:#0f172a;transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:#fff;box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$6.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:var(--pt-confirm-dialog-bg, #ffffff)!important;box-shadow:var( --pt-confirm-dialog-shadow, 0 24px 60px rgba(15, 23, 42, .3) )!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:var(--pt-confirm-dialog-bg, #ffffff);color:var(--pt-confirm-dialog-text, #0f172a);overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid var(--pt-confirm-dialog-border, #e5e7eb);box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25;color:var(--pt-confirm-dialog-title, #0f172a)}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400;color:var(--pt-confirm-dialog-message, #475569)}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:var(--pt-confirm-dialog-close-bg, rgba(255, 255, 255, .85));color:var(--pt-confirm-dialog-close-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:var(--pt-confirm-dialog-close-hover-bg, #ffffff);color:var(--pt-confirm-dialog-close-hover-color, #0f172a);transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:var(--pt-confirm-dialog-footer-bg, #ffffff);box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$6.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-confirm-dialog', providers: [ConfirmationService], standalone: false, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 24px 60px #0f172a4d!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:#fff;overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid;box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:#ffffffd9;color:#64748b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:#fff;color:#0f172a;transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:#fff;box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"] }]
+            args: [{ selector: 'pt-confirm-dialog', providers: [ConfirmationService], standalone: false, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:var(--pt-confirm-dialog-bg, #ffffff)!important;box-shadow:var( --pt-confirm-dialog-shadow, 0 24px 60px rgba(15, 23, 42, .3) )!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:var(--pt-confirm-dialog-bg, #ffffff);color:var(--pt-confirm-dialog-text, #0f172a);overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid var(--pt-confirm-dialog-border, #e5e7eb);box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25;color:var(--pt-confirm-dialog-title, #0f172a)}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400;color:var(--pt-confirm-dialog-message, #475569)}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:var(--pt-confirm-dialog-close-bg, rgba(255, 255, 255, .85));color:var(--pt-confirm-dialog-close-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:var(--pt-confirm-dialog-close-hover-bg, #ffffff);color:var(--pt-confirm-dialog-close-hover-color, #0f172a);transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:var(--pt-confirm-dialog-footer-bg, #ffffff);box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ConfirmationService }], propDecorators: { dialogConfig: [{
                 type: Input
             }], formGroup: [{
@@ -5990,11 +6131,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: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"] }] }); }
+    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:var(--pt-dialog-shadow, 0 20px 45px rgba(15, 23, 42, .35));background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a);z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto;background:var(--pt-dialog-header-bg, #ffffff);color:var(--pt-dialog-header-text, #0f172a)}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}: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:var(--pt-dialog-info-header-bg, #e0f2fe);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:var(--pt-dialog-success-header-bg, #dcfce7);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:var(--pt-dialog-warning-header-bg, #fff4d1);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:var(--pt-dialog-danger-header-bg, #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 var(--pt-dialog-header-btn-border, rgba(148, 163, 184, .3));background:var(--pt-dialog-header-btn-bg, rgba(255, 255, 255, .65));color:var(--pt-dialog-header-btn-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:var(--pt-dialog-header-btn-hover-bg, rgba(255, 255, 255, .9));border-color:var( --pt-dialog-header-btn-hover-border, rgba(100, 116, 139, .5) );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:var(--pt-dialog-info-header-text, #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:var(--pt-dialog-success-header-text, #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:var(--pt-dialog-warning-header-text, #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:var(--pt-dialog-danger-header-text, #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;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}.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:var(--pt-dialog-footer-bg, #ffffff)!important;border-top:1px solid var(--pt-dialog-footer-border, 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:var(--pt-dialog-danger-button-bg, #ffffff)!important;border-color:var(--pt-dialog-danger-button-border, #dc2626)!important;color:var(--pt-dialog-danger-button-text, #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:var(--pt-dialog-warning-button-bg, #ffffff)!important;border-color:var(--pt-dialog-warning-button-border, #d97706)!important;color:var(--pt-dialog-warning-button-text, #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:var(--pt-dialog-success-button-bg, #ffffff)!important;border-color:var(--pt-dialog-success-button-border, #16a34a)!important;color:var(--pt-dialog-success-button-text, #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:var(--pt-dialog-info-button-bg, #ffffff)!important;border-color:var(--pt-dialog-info-button-border, #2563eb)!important;color:var(--pt-dialog-info-button-text, #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:var(--pt-dialog-info-button-hover-bg, #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: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"] }]
+            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:var(--pt-dialog-shadow, 0 20px 45px rgba(15, 23, 42, .35));background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a);z-index:1200!important}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-header{overflow:hidden!important;flex:0 0 auto;background:var(--pt-dialog-header-bg, #ffffff);color:var(--pt-dialog-header-text, #0f172a)}:host ::ng-deep .p-dialog.pt-dialog-overlay .p-dialog-content{overflow:hidden!important;position:relative;z-index:1;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}: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:var(--pt-dialog-info-header-bg, #e0f2fe);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-success .p-dialog-header{background-color:var(--pt-dialog-success-header-bg, #dcfce7);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-warning .p-dialog-header{background-color:var(--pt-dialog-warning-header-bg, #fff4d1);border-bottom:0}:host ::ng-deep .p-dialog.pt-dialog-danger .p-dialog-header{background-color:var(--pt-dialog-danger-header-bg, #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 var(--pt-dialog-header-btn-border, rgba(148, 163, 184, .3));background:var(--pt-dialog-header-btn-bg, rgba(255, 255, 255, .65));color:var(--pt-dialog-header-btn-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:var(--pt-dialog-header-btn-hover-bg, rgba(255, 255, 255, .9));border-color:var( --pt-dialog-header-btn-hover-border, rgba(100, 116, 139, .5) );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:var(--pt-dialog-info-header-text, #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:var(--pt-dialog-success-header-text, #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:var(--pt-dialog-warning-header-text, #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:var(--pt-dialog-danger-header-text, #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;background:var(--pt-dialog-bg, #ffffff);color:var(--pt-dialog-text, #0f172a)}.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:var(--pt-dialog-footer-bg, #ffffff)!important;border-top:1px solid var(--pt-dialog-footer-border, 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:var(--pt-dialog-danger-button-bg, #ffffff)!important;border-color:var(--pt-dialog-danger-button-border, #dc2626)!important;color:var(--pt-dialog-danger-button-text, #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:var(--pt-dialog-warning-button-bg, #ffffff)!important;border-color:var(--pt-dialog-warning-button-border, #d97706)!important;color:var(--pt-dialog-warning-button-text, #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:var(--pt-dialog-success-button-bg, #ffffff)!important;border-color:var(--pt-dialog-success-button-border, #16a34a)!important;color:var(--pt-dialog-success-button-text, #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:var(--pt-dialog-info-button-bg, #ffffff)!important;border-color:var(--pt-dialog-info-button-border, #2563eb)!important;color:var(--pt-dialog-info-button-text, #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:var(--pt-dialog-info-button-hover-bg, #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: [{