npm - @elasticias/ui - Versions diffs - 0.0.10 → 0.0.12 - Mend

@elasticias/ui 0.0.10 → 0.0.12

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

Files changed (3) hide show

package/fesm2022/elasticias-ui.mjs +89 -89
package/fesm2022/elasticias-ui.mjs.map +1 -1
package/package.json +2 -1

package/fesm2022/elasticias-ui.mjs CHANGED Viewed

@@ -86,10 +86,10 @@ class EfCurrencyPipe {
             maximumFractionDigits: 2,
         }).format(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: EfCurrencyPipe, isStandalone: true, name: "efCurrency" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: EfCurrencyPipe, isStandalone: true, name: "efCurrency" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfCurrencyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'efCurrency', standalone: true }]
         }] });
@@ -100,20 +100,20 @@ class TruncatePipe {
             return '';
         return value.length > maxLength ? value.slice(0, maxLength) + suffix : value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TruncatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'truncate', standalone: true }]
         }] });
 class EfPriceDisplayComponent {
     amount = input.required(...(ngDevMode ? [{ debugName: "amount" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfPriceDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: EfPriceDisplayComponent, isStandalone: true, selector: "ef-price-display", inputs: { amount: { classPropertyName: "amount", publicName: "amount", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<span class="font-medium">{{ amount() | efCurrency }}</span>`, isInline: true, dependencies: [{ kind: "pipe", type: EfCurrencyPipe, name: "efCurrency" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPriceDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: EfPriceDisplayComponent, isStandalone: true, selector: "ef-price-display", inputs: { amount: { classPropertyName: "amount", publicName: "amount", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<span class="font-medium">{{ amount() | efCurrency }}</span>`, isInline: true, dependencies: [{ kind: "pipe", type: EfCurrencyPipe, name: "efCurrency" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfPriceDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPriceDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ef-price-display',
@@ -134,8 +134,8 @@ class EfQuantitySelectorComponent {
             this.quantityChange.emit(this.quantity() - 1);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfQuantitySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: EfQuantitySelectorComponent, isStandalone: true, selector: "ef-quantity-selector", inputs: { quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { quantityChange: "quantityChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfQuantitySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: EfQuantitySelectorComponent, isStandalone: true, selector: "ef-quantity-selector", inputs: { quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { quantityChange: "quantityChange" }, ngImport: i0, template: `
     <div class="flex items-center gap-2">
       <p-button
         icon="pi pi-minus"
@@ -156,7 +156,7 @@ class EfQuantitySelectorComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfQuantitySelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfQuantitySelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ef-quantity-selector',
@@ -553,10 +553,10 @@ class EfOrderSummaryComponent {
      * Check if there are any groups to display
      */
     hasGroups = computed(() => this.groupedCounts().length > 0, ...(ngDevMode ? [{ debugName: "hasGroups" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfOrderSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfOrderSummaryComponent, isStandalone: true, selector: "ef-order-summary", inputs: { orderLines: { classPropertyName: "orderLines", publicName: "orderLines", isSignal: true, isRequired: true, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasGroups()) {\n  <p-fieldset [legend]=\"legend()\">\n    <div class=\"ef-order-summary\">\n      <div class=\"ef-order-summary__content\">\n        @for (column of columnGroups(); track $index) {\n          <div class=\"ef-order-summary__column\">\n            @for (group of column; track group.code) {\n              <div class=\"ef-order-summary__item\">\n                <span class=\"ef-order-summary__label\">{{ group.label }}:</span>\n                <span class=\"ef-order-summary__count\">{{ group.count }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"ef-order-summary__footer\">\n        <span class=\"ef-order-summary__total-label\">Total:</span>\n        <span class=\"ef-order-summary__total-count\">{{ totalCount() }}</span>\n      </div>\n    </div>\n  </p-fieldset>\n}\n", styles: [".ef-order-summary__content{display:flex;gap:2rem;padding:1rem .25rem}.ef-order-summary__column{flex:1;display:flex;flex-direction:column;gap:.25rem}.ef-order-summary__column:not(:last-child){border-right:1px solid var(--p-surface-200);padding-right:2rem}.ef-order-summary__item{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.ef-order-summary__label{font-weight:600;color:var(--p-surface-700)}:host-context(.dark) .ef-order-summary__label{color:var(--p-surface-300)}.ef-order-summary__count{font-weight:500;color:var(--p-surface-900)}:host-context(.dark) .ef-order-summary__count{color:var(--p-surface-100)}.ef-order-summary__footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--p-surface-300)}.ef-order-summary__total-label,.ef-order-summary__total-count{font-size:1rem;font-weight:700;color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderSummaryComponent, isStandalone: true, selector: "ef-order-summary", inputs: { orderLines: { classPropertyName: "orderLines", publicName: "orderLines", isSignal: true, isRequired: true, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasGroups()) {\n  <p-fieldset [legend]=\"legend()\">\n    <div class=\"ef-order-summary\">\n      <div class=\"ef-order-summary__content\">\n        @for (column of columnGroups(); track $index) {\n          <div class=\"ef-order-summary__column\">\n            @for (group of column; track group.code) {\n              <div class=\"ef-order-summary__item\">\n                <span class=\"ef-order-summary__label\">{{ group.label }}:</span>\n                <span class=\"ef-order-summary__count\">{{ group.count }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"ef-order-summary__footer\">\n        <span class=\"ef-order-summary__total-label\">Total:</span>\n        <span class=\"ef-order-summary__total-count\">{{ totalCount() }}</span>\n      </div>\n    </div>\n  </p-fieldset>\n}\n", styles: [".ef-order-summary__content{display:flex;gap:2rem;padding:1rem .25rem}.ef-order-summary__column{flex:1;display:flex;flex-direction:column;gap:.25rem}.ef-order-summary__column:not(:last-child){border-right:1px solid var(--p-surface-200);padding-right:2rem}.ef-order-summary__item{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.ef-order-summary__label{font-weight:600;color:var(--p-surface-700)}:host-context(.dark) .ef-order-summary__label{color:var(--p-surface-300)}.ef-order-summary__count{font-weight:500;color:var(--p-surface-900)}:host-context(.dark) .ef-order-summary__count{color:var(--p-surface-100)}.ef-order-summary__footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--p-surface-300)}.ef-order-summary__total-label,.ef-order-summary__total-count{font-size:1rem;font-weight:700;color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfOrderSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-order-summary', standalone: true, imports: [CommonModule, FieldsetModule], template: "@if (hasGroups()) {\n  <p-fieldset [legend]=\"legend()\">\n    <div class=\"ef-order-summary\">\n      <div class=\"ef-order-summary__content\">\n        @for (column of columnGroups(); track $index) {\n          <div class=\"ef-order-summary__column\">\n            @for (group of column; track group.code) {\n              <div class=\"ef-order-summary__item\">\n                <span class=\"ef-order-summary__label\">{{ group.label }}:</span>\n                <span class=\"ef-order-summary__count\">{{ group.count }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"ef-order-summary__footer\">\n        <span class=\"ef-order-summary__total-label\">Total:</span>\n        <span class=\"ef-order-summary__total-count\">{{ totalCount() }}</span>\n      </div>\n    </div>\n  </p-fieldset>\n}\n", styles: [".ef-order-summary__content{display:flex;gap:2rem;padding:1rem .25rem}.ef-order-summary__column{flex:1;display:flex;flex-direction:column;gap:.25rem}.ef-order-summary__column:not(:last-child){border-right:1px solid var(--p-surface-200);padding-right:2rem}.ef-order-summary__item{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.ef-order-summary__label{font-weight:600;color:var(--p-surface-700)}:host-context(.dark) .ef-order-summary__label{color:var(--p-surface-300)}.ef-order-summary__count{font-weight:500;color:var(--p-surface-900)}:host-context(.dark) .ef-order-summary__count{color:var(--p-surface-100)}.ef-order-summary__footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--p-surface-300)}.ef-order-summary__total-label,.ef-order-summary__total-count{font-size:1rem;font-weight:700;color:var(--p-primary-color)}\n"] }]
         }], propDecorators: { orderLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderLines", required: true }] }], countGroupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "countGroupLabels", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }] } });
@@ -572,10 +572,10 @@ class EfLabelComponent {
     styleClass = 'form-label';
     /** Show required indicator */
     required = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.4", type: EfLabelComponent, isStandalone: true, selector: "ef-label", inputs: { label: "label", labelKey: "labelKey", for: "for", styleClass: "styleClass", required: ["required", "required", booleanAttribute] }, ngImport: i0, template: `<label [attr.for]="for" [class]="styleClass" [class.required]="required">{{ labelKey ? (labelKey | translate) : label }}</label>`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.11", type: EfLabelComponent, isStandalone: true, selector: "ef-label", inputs: { label: "label", labelKey: "labelKey", for: "for", styleClass: "styleClass", required: ["required", "required", booleanAttribute] }, ngImport: i0, template: `<label [attr.for]="for" [class]="styleClass" [class.required]="required">{{ labelKey ? (labelKey | translate) : label }}</label>`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-label', standalone: true, template: `<label [attr.for]="for" [class]="styleClass" [class.required]="required">{{ labelKey ? (labelKey | translate) : label }}</label>`, imports: [TranslateModule], styles: [":host{display:contents}\n"] }]
         }], propDecorators: { label: [{
@@ -681,14 +681,14 @@ class EfSelectComponent {
             this.filteredOptions = this.options ?? [];
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfSelectComponent, isStandalone: true, selector: "ef-select", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], filter: ["filter", "filter", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], appendTo: "appendTo", filterByKeys: "filterByKeys" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSelectComponent, isStandalone: true, selector: "ef-select", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], filter: ["filter", "filter", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], appendTo: "appendTo", filterByKeys: "filterByKeys" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EfSelectComponent),
                 multi: true,
             }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selectedItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-select\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (onChange)=\"handleSelectionChange($event)\"\n    (onClear)=\"handleClear()\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [filter]=\"filter\"\n    [showClear]=\"showClear\"\n    [disabled]=\"disabled\"\n    [appendTo]=\"appendTo\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    fluid\n  >\n    @if (itemTemplate) {\n      <ng-template #item let-item>\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n      </ng-template>\n    }\n    @if (selectedItemTemplate) {\n      <ng-template #selectedItem let-item>\n        <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: item }\"></ng-container>\n      </ng-template>\n    }\n  </p-select>\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-select', standalone: true, imports: [SelectModule, FormsModule, TranslateModule, EfLabelComponent, CommonModule], providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -820,10 +820,10 @@ class EfDatepickerComponent {
     handleBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfDatepickerComponent, isStandalone: true, selector: "ef-datepicker", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], iconDisplay: "iconDisplay", selectionMode: "selectionMode", dateFormat: "dateFormat", appendTo: "appendTo", showTime: ["showTime", "showTime", booleanAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], minDate: "minDate", maxDate: "maxDate" }, outputs: { dateSelectEvent: "dateSelectEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$3.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatepickerComponent, isStandalone: true, selector: "ef-datepicker", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], iconDisplay: "iconDisplay", selectionMode: "selectionMode", dateFormat: "dateFormat", appendTo: "appendTo", showTime: ["showTime", "showTime", booleanAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], minDate: "minDate", maxDate: "maxDate" }, outputs: { dateSelectEvent: "dateSelectEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$3.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-datepicker', standalone: true, imports: [DatePickerModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
@@ -1042,10 +1042,10 @@ class EfInputNumberComponent {
             this.handleClear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfInputNumberComponent, isStandalone: true, selector: "ef-inputnumber", inputs: { label: "label", labelKey: "labelKey", required: ["required", "required", booleanAttribute], value: "value", invalid: "invalid", disabled: "disabled", readonly: "readonly", format: "format", showButtons: "showButtons", buttonLayout: "buttonLayout", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", prefix: "prefix", suffix: "suffix", currency: "currency", currencyDisplay: "currencyDisplay", locale: "locale", localeMatcher: "localeMatcher", mode: "mode", useGrouping: "useGrouping", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", min: "min", max: "max", step: "step", allowEmpty: "allowEmpty", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", inputSize: "inputSize", size: "size", maxlength: "maxlength", minlength: "minlength", pattern: "pattern", tabindex: "tabindex", title: "title", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", ariaRequired: "ariaRequired", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", style: "style", styleClass: "styleClass", showClear: "showClear", variant: "variant", autofocus: "autofocus", autocomplete: "autocomplete", fluid: "fluid", inline: ["inline", "inline", booleanAttribute], pt: "pt", ptOptions: "ptOptions", dt: "dt", unstyled: "unstyled" }, outputs: { inputEvent: "inputEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyDownEvent: "keyDownEvent", clearEvent: "clearEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, viewQueries: [{ propertyName: "inputNumber", first: true, predicate: ["inputNumber"], descendants: true }], ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-inputnumber\n    #inputNumber\n    [(ngModel)]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [invalid]=\"isInvalid\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [format]=\"format\"\n    [showButtons]=\"showButtons\"\n    [buttonLayout]=\"buttonLayout\"\n    [incrementButtonClass]=\"incrementButtonClass\"\n    [decrementButtonClass]=\"decrementButtonClass\"\n    [incrementButtonIcon]=\"incrementButtonIcon\"\n    [decrementButtonIcon]=\"decrementButtonIcon\"\n    [prefix]=\"prefix\"\n    [suffix]=\"suffix\"\n    [currency]=\"currency\"\n    [currencyDisplay]=\"currencyDisplay\"\n    [locale]=\"locale\"\n    [localeMatcher]=\"localeMatcher\"\n    [mode]=\"mode\"\n    [useGrouping]=\"useGrouping\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [allowEmpty]=\"allowEmpty\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [placeholder]=\"effectivePlaceholder\"\n    [inputSize]=\"inputSize\"\n    [size]=\"size\"\n    [maxlength]=\"maxlength\"\n    [minlength]=\"minlength\"\n    [pattern]=\"pattern\"\n    [tabindex]=\"tabindex\"\n    [title]=\"title\"\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [ariaDescribedBy]=\"ariaDescribedBy\"\n    [ariaRequired]=\"ariaRequired\"\n    [inputStyle]=\"inputStyle\"\n    [inputStyleClass]=\"inputStyleClass\"\n    [style]=\"style\"\n    [styleClass]=\"styleClass\"\n    [showClear]=\"showClear\"\n    [variant]=\"variant\"\n    [autofocus]=\"autofocus\"\n    [autocomplete]=\"autocomplete\"\n    [fluid]=\"fluid\"\n    [pt]=\"pt\"\n    [ptOptions]=\"ptOptions\"\n    [dt]=\"dt\"\n    [unstyled]=\"unstyled\"\n    (onInput)=\"handleInput($event)\"\n    (onFocus)=\"handleFocus($event)\"\n    (onBlur)=\"handleBlur($event)\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    (onClear)=\"handleClear()\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}:host(.ef-inputnumber-small) ::ng-deep .p-inputnumber-input{font-size:.875rem;padding:.375rem .5rem}:host(.ef-inputnumber-large) ::ng-deep .p-inputnumber-input{font-size:1.125rem;padding:.75rem 1rem}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input{border-color:var(--red-500, #ef4444)}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input:focus,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input:focus{box-shadow:0 0 0 .2rem #ef444440}\n"], dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfInputNumberComponent, isStandalone: true, selector: "ef-inputnumber", inputs: { label: "label", labelKey: "labelKey", required: ["required", "required", booleanAttribute], value: "value", invalid: "invalid", disabled: "disabled", readonly: "readonly", format: "format", showButtons: "showButtons", buttonLayout: "buttonLayout", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", prefix: "prefix", suffix: "suffix", currency: "currency", currencyDisplay: "currencyDisplay", locale: "locale", localeMatcher: "localeMatcher", mode: "mode", useGrouping: "useGrouping", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", min: "min", max: "max", step: "step", allowEmpty: "allowEmpty", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", inputSize: "inputSize", size: "size", maxlength: "maxlength", minlength: "minlength", pattern: "pattern", tabindex: "tabindex", title: "title", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", ariaRequired: "ariaRequired", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", style: "style", styleClass: "styleClass", showClear: "showClear", variant: "variant", autofocus: "autofocus", autocomplete: "autocomplete", fluid: "fluid", inline: ["inline", "inline", booleanAttribute], pt: "pt", ptOptions: "ptOptions", dt: "dt", unstyled: "unstyled" }, outputs: { inputEvent: "inputEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyDownEvent: "keyDownEvent", clearEvent: "clearEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, viewQueries: [{ propertyName: "inputNumber", first: true, predicate: ["inputNumber"], descendants: true }], ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-inputnumber\n    #inputNumber\n    [(ngModel)]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [invalid]=\"isInvalid\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [format]=\"format\"\n    [showButtons]=\"showButtons\"\n    [buttonLayout]=\"buttonLayout\"\n    [incrementButtonClass]=\"incrementButtonClass\"\n    [decrementButtonClass]=\"decrementButtonClass\"\n    [incrementButtonIcon]=\"incrementButtonIcon\"\n    [decrementButtonIcon]=\"decrementButtonIcon\"\n    [prefix]=\"prefix\"\n    [suffix]=\"suffix\"\n    [currency]=\"currency\"\n    [currencyDisplay]=\"currencyDisplay\"\n    [locale]=\"locale\"\n    [localeMatcher]=\"localeMatcher\"\n    [mode]=\"mode\"\n    [useGrouping]=\"useGrouping\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [allowEmpty]=\"allowEmpty\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [placeholder]=\"effectivePlaceholder\"\n    [inputSize]=\"inputSize\"\n    [size]=\"size\"\n    [maxlength]=\"maxlength\"\n    [minlength]=\"minlength\"\n    [pattern]=\"pattern\"\n    [tabindex]=\"tabindex\"\n    [title]=\"title\"\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [ariaDescribedBy]=\"ariaDescribedBy\"\n    [ariaRequired]=\"ariaRequired\"\n    [inputStyle]=\"inputStyle\"\n    [inputStyleClass]=\"inputStyleClass\"\n    [style]=\"style\"\n    [styleClass]=\"styleClass\"\n    [showClear]=\"showClear\"\n    [variant]=\"variant\"\n    [autofocus]=\"autofocus\"\n    [autocomplete]=\"autocomplete\"\n    [fluid]=\"fluid\"\n    [pt]=\"pt\"\n    [ptOptions]=\"ptOptions\"\n    [dt]=\"dt\"\n    [unstyled]=\"unstyled\"\n    (onInput)=\"handleInput($event)\"\n    (onFocus)=\"handleFocus($event)\"\n    (onBlur)=\"handleBlur($event)\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    (onClear)=\"handleClear()\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}:host(.ef-inputnumber-small) ::ng-deep .p-inputnumber-input{font-size:.875rem;padding:.375rem .5rem}:host(.ef-inputnumber-large) ::ng-deep .p-inputnumber-input{font-size:1.125rem;padding:.75rem 1rem}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input{border-color:var(--red-500, #ef4444)}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input:focus,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input:focus{box-shadow:0 0 0 .2rem #ef444440}\n"], dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfInputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-inputnumber', standalone: true, imports: [InputNumberModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-inputnumber\n    #inputNumber\n    [(ngModel)]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [invalid]=\"isInvalid\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [format]=\"format\"\n    [showButtons]=\"showButtons\"\n    [buttonLayout]=\"buttonLayout\"\n    [incrementButtonClass]=\"incrementButtonClass\"\n    [decrementButtonClass]=\"decrementButtonClass\"\n    [incrementButtonIcon]=\"incrementButtonIcon\"\n    [decrementButtonIcon]=\"decrementButtonIcon\"\n    [prefix]=\"prefix\"\n    [suffix]=\"suffix\"\n    [currency]=\"currency\"\n    [currencyDisplay]=\"currencyDisplay\"\n    [locale]=\"locale\"\n    [localeMatcher]=\"localeMatcher\"\n    [mode]=\"mode\"\n    [useGrouping]=\"useGrouping\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [allowEmpty]=\"allowEmpty\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [placeholder]=\"effectivePlaceholder\"\n    [inputSize]=\"inputSize\"\n    [size]=\"size\"\n    [maxlength]=\"maxlength\"\n    [minlength]=\"minlength\"\n    [pattern]=\"pattern\"\n    [tabindex]=\"tabindex\"\n    [title]=\"title\"\n    [ariaLabel]=\"ariaLabel\"\n    [ariaLabelledBy]=\"ariaLabelledBy\"\n    [ariaDescribedBy]=\"ariaDescribedBy\"\n    [ariaRequired]=\"ariaRequired\"\n    [inputStyle]=\"inputStyle\"\n    [inputStyleClass]=\"inputStyleClass\"\n    [style]=\"style\"\n    [styleClass]=\"styleClass\"\n    [showClear]=\"showClear\"\n    [variant]=\"variant\"\n    [autofocus]=\"autofocus\"\n    [autocomplete]=\"autocomplete\"\n    [fluid]=\"fluid\"\n    [pt]=\"pt\"\n    [ptOptions]=\"ptOptions\"\n    [dt]=\"dt\"\n    [unstyled]=\"unstyled\"\n    (onInput)=\"handleInput($event)\"\n    (onFocus)=\"handleFocus($event)\"\n    (onBlur)=\"handleBlur($event)\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    (onClear)=\"handleClear()\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}:host(.ef-inputnumber-small) ::ng-deep .p-inputnumber-input{font-size:.875rem;padding:.375rem .5rem}:host(.ef-inputnumber-large) ::ng-deep .p-inputnumber-input{font-size:1.125rem;padding:.75rem 1rem}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input{border-color:var(--red-500, #ef4444)}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input:focus,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input:focus{box-shadow:0 0 0 .2rem #ef444440}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputNumber: [{
@@ -1190,10 +1190,10 @@ class EfFieldsetComponent {
     toggleable = false;
     collapsed = false;
     styleClass;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.4", type: EfFieldsetComponent, isStandalone: true, selector: "ef-fieldset", inputs: { legend: "legend", legendKey: "legendKey", toggleable: ["toggleable", "toggleable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], styleClass: "styleClass" }, ngImport: i0, template: "<p-fieldset\n  [legend]=\"legendKey ? (legendKey | translate) : legend\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  [styleClass]=\"styleClass\"\n>\n  <ng-content />\n</p-fieldset>\n", dependencies: [{ kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.11", type: EfFieldsetComponent, isStandalone: true, selector: "ef-fieldset", inputs: { legend: "legend", legendKey: "legendKey", toggleable: ["toggleable", "toggleable", booleanAttribute], collapsed: ["collapsed", "collapsed", booleanAttribute], styleClass: "styleClass" }, ngImport: i0, template: "<p-fieldset\n  [legend]=\"legendKey ? (legendKey | translate) : legend\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  [styleClass]=\"styleClass\"\n>\n  <ng-content />\n</p-fieldset>\n", dependencies: [{ kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-fieldset', standalone: true, imports: [FieldsetModule, TranslateModule], template: "<p-fieldset\n  [legend]=\"legendKey ? (legendKey | translate) : legend\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  [styleClass]=\"styleClass\"\n>\n  <ng-content />\n</p-fieldset>\n" }]
         }], propDecorators: { legend: [{
@@ -1237,10 +1237,10 @@ class EfButtonComponent {
     handleClick(event) {
         this.clickEvent.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.4", type: EfButtonComponent, isStandalone: true, selector: "ef-button", inputs: { label: "label", labelKey: "labelKey", icon: "icon", severity: "severity", size: "size", disabled: ["disabled", "disabled", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], raised: ["raised", "raised", booleanAttribute], text: ["text", "text", booleanAttribute], loading: ["loading", "loading", booleanAttribute], styleClass: "styleClass", type: "type", badge: "badge", badgeSeverity: "badgeSeverity", tooltip: "tooltip", tooltipKey: "tooltipKey", tooltipPosition: "tooltipPosition" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<p-button\n  [label]=\"labelKey ? (labelKey | translate) : label\"\n  [icon]=\"icon\"\n  [severity]=\"severity\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [rounded]=\"rounded\"\n  [outlined]=\"outlined\"\n  [raised]=\"raised\"\n  [text]=\"text\"\n  [loading]=\"loading\"\n  [styleClass]=\"styleClass\"\n  [type]=\"type\"\n  [badge]=\"badge\"\n  [badgeSeverity]=\"badgeSeverity\"\n  [pTooltip]=\"tooltipKey ? (tooltipKey | translate) : tooltip\"\n  [tooltipPosition]=\"tooltipPosition\"\n  (onClick)=\"handleClick($event)\"\n/>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.11", type: EfButtonComponent, isStandalone: true, selector: "ef-button", inputs: { label: "label", labelKey: "labelKey", icon: "icon", severity: "severity", size: "size", disabled: ["disabled", "disabled", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], raised: ["raised", "raised", booleanAttribute], text: ["text", "text", booleanAttribute], loading: ["loading", "loading", booleanAttribute], styleClass: "styleClass", type: "type", badge: "badge", badgeSeverity: "badgeSeverity", tooltip: "tooltip", tooltipKey: "tooltipKey", tooltipPosition: "tooltipPosition" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<p-button\n  [label]=\"labelKey ? (labelKey | translate) : label\"\n  [icon]=\"icon\"\n  [severity]=\"severity\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [rounded]=\"rounded\"\n  [outlined]=\"outlined\"\n  [raised]=\"raised\"\n  [text]=\"text\"\n  [loading]=\"loading\"\n  [styleClass]=\"styleClass\"\n  [type]=\"type\"\n  [badge]=\"badge\"\n  [badgeSeverity]=\"badgeSeverity\"\n  [pTooltip]=\"tooltipKey ? (tooltipKey | translate) : tooltip\"\n  [tooltipPosition]=\"tooltipPosition\"\n  (onClick)=\"handleClick($event)\"\n/>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-button', standalone: true, imports: [ButtonModule, TooltipModule, TranslateModule], template: "<p-button\n  [label]=\"labelKey ? (labelKey | translate) : label\"\n  [icon]=\"icon\"\n  [severity]=\"severity\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [rounded]=\"rounded\"\n  [outlined]=\"outlined\"\n  [raised]=\"raised\"\n  [text]=\"text\"\n  [loading]=\"loading\"\n  [styleClass]=\"styleClass\"\n  [type]=\"type\"\n  [badge]=\"badge\"\n  [badgeSeverity]=\"badgeSeverity\"\n  [pTooltip]=\"tooltipKey ? (tooltipKey | translate) : tooltip\"\n  [tooltipPosition]=\"tooltipPosition\"\n  (onClick)=\"handleClick($event)\"\n/>\n" }]
         }], propDecorators: { label: [{
@@ -1762,10 +1762,10 @@ class EfOrderBuilderComponent {
     exportOrder() {
         return OrderEntityHelper.calculateTotals(this.order());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfOrderBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfOrderBuilderComponent, isStandalone: true, selector: "ef-order-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, customers: { classPropertyName: "customers", publicName: "customers", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, backendErrors: { classPropertyName: "backendErrors", publicName: "backendErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { order: "orderChange", openCatalogue: "openCatalogue", orderChanged: "orderChanged", orderValidated: "orderValidated", productsAdded: "productsAdded" }, ngImport: i0, template: "<!-- Order Header -->\n<p-fieldset [legend]=\"config().headerLabel\">\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2\">\n    <ef-label [label]=\"config().customerLabel\" for=\"order.customerId\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" required />\n    <ef-label [label]=\"config().dateLabel\" for=\"order.orderDate\" styleClass=\"col-span-3 form-label-left\" required />\n  </div>\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2 mt-4\">\n    <div class=\"col-span-12 md:col-span-6\">\n      <ef-select\n        [ngModel]=\"order().customerId\"\n        (ngModelChange)=\"updateCustomer($event)\"\n        name=\"order.customerId\"\n        inputId=\"order.customerId\"\n        [options]=\"customers()\"\n        optionValue=\"customerId\"\n        optionLabel=\"companyName\"\n        [placeholder]=\"config().customerLabel\"\n        filter\n        showClear\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n    <div class=\"col-span-3\">\n      <ef-datepicker\n        [ngModel]=\"order().orderDate\"\n        (ngModelChange)=\"updateOrderDate($event)\"\n        name=\"order.orderDate\"\n        inputId=\"order.orderDate\"\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n  </div>\n\n  @if (config().enableQuickAdd && !readonly()) {\n    <div class=\"grid grid-cols-12 items-baseline gap-2 mt-4 mb-2\">\n      <ef-label labelKey=\"label.article\" for=\"quickAdd.product\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" />\n      <ef-label labelKey=\"label.sale_price\" for=\"quickAdd.price\" styleClass=\"col-span-2 form-label-left\" />\n      <ef-label labelKey=\"label.quantity\" for=\"quickAdd.quantity\" styleClass=\"col-span-2 form-label-left\" />\n    </div>\n    <div class=\"grid grid-cols-12 items-center gap-2\">\n      <div class=\"col-span-12 md:col-span-6\">\n        <ef-select\n          [ngModel]=\"quickAddProduct()\"\n          (ngModelChange)=\"onQuickAddProductSelect($event)\"\n          name=\"quickAdd.product\"\n          inputId=\"quickAdd.product\"\n          [options]=\"flattenedProductOptions()\"\n          optionLabel=\"_displayLabel\"\n          placeholderKey=\"placeholder.select_article\"\n          filter\n          showClear\n          [disabled]=\"readonly()\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.price\"\n          name=\"quickAdd.price\"\n          [ngModel]=\"quickAddPrice()\"\n          (ngModelChange)=\"quickAddPrice.set($event)\"\n          mode=\"currency\"\n          [currency]=\"currency()\"\n          [locale]=\"locale()\"\n          [min]=\"0\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.quantity\"\n          name=\"quickAdd.quantity\"\n          [ngModel]=\"quickAddQuantity()\"\n          (ngModelChange)=\"quickAddQuantity.set($event)\"\n          [min]=\"1\"\n          [minFractionDigits]=\"4\"\n          [maxFractionDigits]=\"4\"\n          [locale]=\"locale()\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2 flex justify-start gap-2\">\n        <ef-button\n          icon=\"pi pi-plus\"\n          [rounded]=\"true\"\n          severity=\"primary\"\n          tooltipKey=\"tooltip.add_article\"\n          [disabled]=\"quickAddDisabled()\"\n          (clickEvent)=\"addQuickProduct()\"\n        />\n        @if (config().showCatalogue) {\n          <ef-button\n            icon=\"pi pi-search\"\n            [rounded]=\"true\"\n            severity=\"primary\"\n            tooltipKey=\"tooltip.open_catalogue\"\n            [disabled]=\"readonly()\"\n            (clickEvent)=\"handleOpenCatalogue()\"\n          />\n        }\n      </div>\n    </div>\n  }\n</p-fieldset>\n\n<div class=\"my-4\"></div>\n\n<!-- Order Line Items -->\n<p-fieldset legend=\"D\u00E9tails\">\n  <p-table\n    #pTable\n    class=\"text-sm\"\n    size=\"small\"\n    [value]=\"orderLines()\"\n    [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\n    [resizableColumns]=\"true\"\n    [tableStyle]=\"{ 'min-width': '50rem' }\"\n    columnResizeMode=\"expand\"\n    [showCurrentPageReport]=\"true\"\n    stateStorage=\"local\"\n    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackBy\"\n  >\n    <ng-template #header>\n      <tr>\n        <th>{{ 'label.article' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.sale_price' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.quantity' | translate }}</th>\n        @if (config().enableTax) {\n          <th class=\"w-[120px] !text-end\">TVA (%)</th>\n        }\n        @if (config().enableDiscount) {\n          <th class=\"w-[120px] !text-end\">\n            Remise (%)\n          </th>\n        }\n        <th class=\"w-[120px] !text-end\">Sous-Total</th>\n        @if (!readonly()) {\n          <th class=\"w-10 !text-end\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-item let-rowIndex=\"rowIndex\">\n      <!-- Editing mode for new row -->\n      @if (item.isEditing) {\n        <tr>\n          <td>\n            <div class=\"align-items-center flex gap-2\">\n              <ef-select\n                [(ngModel)]=\"item.product\"\n                (ngModelChange)=\"onProductSelect(item)\"\n                [name]=\"'item.product.' + rowIndex\"\n                [inputId]=\"'item.product.' + rowIndex\"\n                [options]=\"flattenedProductOptions()\"\n                optionLabel=\"_displayLabel\"\n                placeholderKey=\"placeholder.select_article\"\n                filter\n                showClear\n                [disabled]=\"readonly()\"\n                appendTo=\"body\"\n              />\n            </div>\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.productUnitPrice.' + rowIndex\"\n              [name]=\"'item.productUnitPrice.' + rowIndex\"\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"stopEditField(item)\"\n              mode=\"currency\"\n              [currency]=\"currency()\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.quantity.' + rowIndex\"\n              [name]=\"'item.quantity.' + rowIndex\"\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"saveEditingRow(item)\"\n              [min]=\"1\"\n              [minFractionDigits]=\"4\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td class=\"w-[120px]\">\n              <ef-inputnumber\n                [id]=\"'item.discount.' + rowIndex\"\n                [name]=\"'item.discount.' + rowIndex\"\n                [(ngModel)]=\"item.discount\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"saveEditingRow(item)\"\n                [min]=\"0\"\n                [max]=\"100\"\n                suffix=\"%\"\n                [disabled]=\"readonly()\"\n                size=\"small\"\n              />\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ calculateSubtotal(item) | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                pTooltip=\"Supprimer\"\n                tooltipPosition=\"top\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n\n      <!-- Display mode for saved row -->\n      @if (!item.isEditing) {\n        <tr>\n          <td>\n            <div\n              [innerHTML]=\"AppUtils.truncate(item.productDescription)\"\n              [pTooltip]=\"item.productDescription\"\n              tooltipPosition=\"top\"\n            ></div>\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'productUnitPrice')\"\n          >\n            @if (\n              item.editingField === 'productUnitPrice' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [name]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [(ngModel)]=\"item.productUnitPrice\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                mode=\"currency\"\n                [currency]=\"currency()\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.productUnitPrice | currency: currency() }}\n              </span>\n            }\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'quantity')\"\n          >\n            @if (\n              item.editingField === 'quantity' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.quantity.edit.' + rowIndex\"\n                [name]=\"'item.quantity.edit.' + rowIndex\"\n                [(ngModel)]=\"item.quantity\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                [min]=\"1\"\n                [minFractionDigits]=\"4\"\n                [maxFractionDigits]=\"4\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.quantity | number: '1.4-4' : locale() }}\n              </span>\n            }\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td\n              class=\"w-[120px]\"\n              [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n              (click)=\"startEditField(item, 'discount')\"\n            >\n              @if (\n                item.editingField === 'discount' &&\n                  config().allowInlineEdit &&\n                  !readonly()\n              ) {\n                <ef-inputnumber\n                  [id]=\"'item.discount.edit.' + rowIndex\"\n                  [name]=\"'item.discount.edit.' + rowIndex\"\n                  [(ngModel)]=\"item.discount\"\n                  (ngModelChange)=\"onFieldChange(item)\"\n                  (onBlur)=\"stopEditField(item)\"\n                  [min]=\"0\"\n                  [max]=\"100\"\n                  suffix=\"%\"\n                  size=\"small\"\n                  class=\"!text-end\"\n                />\n              } @else {\n                <span\n                  [class]=\"\n                    config().allowInlineEdit && !readonly()\n                      ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                      : 'block px-2 py-1 text-end'\n                  \"\n                >\n                  {{ item.discount || 0 }}%\n                </span>\n              }\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ item.grossAmount | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                tooltipPosition=\"top\"\n                pTooltip=\"Supprimer\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template #footer>\n      @if (!readonly()) {\n        <tr>\n          <td\n            [attr.colspan]=\"\n              config().enableTax && config().enableDiscount\n                ? 7\n                : config().enableTax || config().enableDiscount\n                  ? 6\n                  : 5\n            \"\n          >\n            <a\n              href=\"javascript:void(0)\"\n              class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n              [class.opacity-50]=\"hasEditingRow()\"\n              [class.pointer-events-none]=\"hasEditingRow()\"\n              (click)=\"addNewProductRow()\"\n            >\n              <i class=\"pi pi-plus text-xs\"></i>\n              Ajouter un article\n            </a>\n            @if (config().showCatalogue) {\n              <ng-container>\n                &nbsp; | &nbsp;\n                <a\n                  href=\"javascript:void(0)\"\n                  class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n                  (click)=\"handleOpenCatalogue()\"\n                >\n                  <i class=\"pi pi-search text-xs\"></i>\n                  Ouvrir le catalogue des articles\n                </a>\n              </ng-container>\n            }\n          </td>\n        </tr>\n      }\n\n      <!-- Totals Section -->\n      <tr class=\"border-t\">\n        <td\n          [attr.colspan]=\"\n            config().enableTax && config().enableDiscount\n              ? 5\n              : config().enableTax || config().enableDiscount\n                ? 4\n                : 3\n          \"\n        >\n          @if (config().showProductsSummary) {\n            <div class=\"w-[500px]\">\n              <div class=\"my-4\"></div>\n              <ef-order-summary\n                [orderLines]=\"orderLines()\"\n                [countGroupLabels]=\"countGroupLabels()\"\n                legend=\"R\u00E9capitulatif\"\n              />\n            </div>\n          }\n        </td>\n        <td [attr.colspan]=\"readonly() ? 2 : 3\" class=\"!text-end\">\n          <p-fieldset [legend]=\"'Totaux'\">\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"flex items-end justify-between gap-4\">\n                <span\n                  class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                >\n                  Montant brut :\n                </span>\n                <span class=\"font-semibold\">\n                  {{ grossTotal() | currency: currency() }}\n                </span>\n              </div>\n              @if (config().enableDiscount) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    Remise :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ discountTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              @if (config().enableTax) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    TVA :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ tvaTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              <p-divider class=\"!my-1\" />\n              <div class=\"flex justify-between gap-4\">\n                <span class=\"text-lg font-bold text-primary\">\n                  Montant Total :\n                </span>\n                <span class=\"text-lg font-bold text-primary\">\n                  {{ finalTotal() | currency: currency() }}\n                </span>\n              </div>\n            </div>\n          </p-fieldset>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</p-fieldset>\n\n<!-- Optional Notes Section -->\n@if (config().showNotes) {\n  <p-fieldset legend=\"Notes\">\n    <textarea\n      pTextarea\n      id=\"order.notes\"\n      name=\"order.notes\"\n      [ngModel]=\"order().notes\"\n      (ngModelChange)=\"updateNotes($event)\"\n      [disabled]=\"readonly()\"\n      [placeholder]=\"'common.notes_placeholder' | translate\"\n      rows=\"5\"\n      class=\"w-full\"\n    ></textarea>\n  </p-fieldset>\n}\n\n<!-- Validation Messages -->\n@if (hasErrors()) {\n  <div\n    class=\"my-4 rounded border border-red-200 bg-red-50 p-4 dark:bg-red-900/20\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <i\n        class=\"pi pi-exclamation-triangle mt-1 text-red-600 dark:text-red-400\"\n      ></i>\n      <div class=\"flex-1\">\n        <h4 class=\"mb-2 font-semibold text-red-800 dark:text-red-200\">\n          Erreurs de validation\n        </h4>\n        <ul class=\"list-inside list-disc text-sm text-red-700 dark:text-red-300\">\n          @for (error of combinedErrors() | keyvalue; track error.key) {\n            <li>\n              {{ error.value[0] }}\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Change Indicator -->\n@if (hasChanges()) {\n  <div\n    class=\"my-4 flex items-center gap-2 rounded border border-orange-200 bg-orange-50 p-3 dark:bg-orange-900/20\"\n  >\n    <i class=\"pi pi-info-circle text-orange-600 dark:text-orange-400\"></i>\n    <span class=\"text-sm text-orange-800 dark:text-orange-200\">\n      Modifications non sauvegard\u00E9es d\u00E9tect\u00E9es\n    </span>\n  </div>\n}\n", styles: [".inline-edit-cell{position:relative}.inline-edit-cell .edit-indicator{position:absolute;top:2px;right:2px;font-size:.65rem;opacity:0;transition:opacity .2s ease}.inline-edit-cell:hover .edit-indicator{opacity:.5}.cursor-pointer{cursor:pointer;transition:background-color .2s ease}.cursor-pointer:hover{background-color:#0000000d}:host-context(.dark-mode) .cursor-pointer:hover{background-color:#ffffff0d}.cursor-pointer:active{transform:scale(.98)}::ng-deep .p-datatable .p-datatable-thead>tr>th{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}::ng-deep .p-datatable .editing-row{background-color:rgba(var(--primary-500),.05);border-left:3px solid var(--primary-500)}::ng-deep .p-datatable .w-\\[120px\\]{width:120px;min-width:120px;max-width:120px}::ng-deep .p-datatable .w-20{width:5rem;min-width:5rem;max-width:5rem}::ng-deep .p-datatable .\\!text-end{text-align:right!important;justify-content:flex-end}.totals-section{background-color:rgba(var(--surface-0),.5);border-top:2px solid var(--surface-border);padding:1rem}.totals-section .totals-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;gap:1rem}.totals-section .totals-row.total-final{border-top:2px solid var(--primary-500);padding-top:.75rem;margin-top:.5rem;font-size:1.125rem;font-weight:700;color:var(--primary-500)}.totals-section .totals-label{color:var(--text-color-secondary);font-weight:600}.totals-section .totals-value{font-weight:600;font-variant-numeric:tabular-nums}.add-product-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--primary-500);text-decoration:none;transition:color .2s ease}.add-product-link:hover{color:var(--primary-700)}.add-product-link.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.add-product-link i{font-size:.75rem}.validation-message{padding:1rem;margin-bottom:1rem;border-radius:4px}.validation-message.error{background-color:rgba(var(--red-50),1);border:1px solid rgba(var(--red-200),1);color:var(--red-800)}:host-context(.dark-mode) .validation-message.error{background-color:rgba(var(--red-900),.2);color:var(--red-200)}.validation-message.error .icon{color:var(--red-600)}:host-context(.dark-mode) .validation-message.error .icon{color:var(--red-400)}.validation-message.warning{background-color:rgba(var(--orange-50),1);border:1px solid rgba(var(--orange-200),1);color:var(--orange-800)}:host-context(.dark-mode) .validation-message.warning{background-color:rgba(var(--orange-900),.2);color:var(--orange-200)}.validation-message.warning .icon{color:var(--orange-600)}:host-context(.dark-mode) .validation-message.warning .icon{color:var(--orange-400)}.validation-message.info{background-color:rgba(var(--blue-50),1);border:1px solid rgba(var(--blue-200),1);color:var(--blue-800)}:host-context(.dark-mode) .validation-message.info{background-color:rgba(var(--blue-900),.2);color:var(--blue-200)}.validation-message.info .icon{color:var(--blue-600)}:host-context(.dark-mode) .validation-message.info .icon{color:var(--blue-400)}::ng-deep .p-inputnumber-input.currency-input{text-align:right}::ng-deep .p-inputnumber.discount-input .p-inputnumber-input{text-align:right}@media(max-width:768px){::ng-deep .p-datatable{font-size:.875rem}::ng-deep .p-datatable .w-\\[120px\\]{width:100px;min-width:100px;max-width:100px}.totals-section{font-size:.875rem}.totals-section .totals-row.total-final{font-size:1rem}}@media(max-width:576px){::ng-deep .p-datatable .p-datatable-thead>tr>th{font-size:.7rem;padding:.5rem .25rem}::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:.5rem .25rem}}:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;border-radius:4px}@media(prefers-contrast:high){.cursor-pointer:hover{background-color:#0000001a}.validation-message{border-width:2px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media print{.add-product-link,.p-button,.inline-edit-cell:hover,.cursor-pointer{display:none!important}.validation-message{display:none}::ng-deep .p-datatable .p-datatable-thead>tr>th,::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:1px solid #000}}.loading-overlay{position:absolute;inset:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:1000}:host-context(.dark-mode) .loading-overlay{background-color:#000c}.loading-overlay .spinner{width:3rem;height:3rem;border:3px solid var(--surface-border);border-top-color:var(--primary-500);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-color-secondary)}.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.3}.empty-state .empty-title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.empty-state .empty-message{font-size:.875rem;margin-bottom:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i2$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: EfOrderSummaryComponent, selector: "ef-order-summary", inputs: ["orderLines", "countGroupLabels", "legend"] }, { kind: "component", type: EfSelectComponent, selector: "ef-select", inputs: ["label", "labelKey", "inputId", "name", "options", "optionLabel", "optionValue", "placeholder", "placeholderKey", "size", "required", "fluid", "inline", "filter", "showClear", "disabled", "appendTo", "filterByKeys"], outputs: ["selectionChangeEvent"] }, { kind: "component", type: EfDatepickerComponent, selector: "ef-datepicker", inputs: ["label", "labelKey", "inputId", "name", "placeholder", "placeholderKey", "size", "required", "fluid", "inline", "disabled", "showIcon", "iconDisplay", "selectionMode", "dateFormat", "appendTo", "showTime", "showButtonBar", "minDate", "maxDate"], outputs: ["dateSelectEvent"] }, { kind: "component", type: EfInputNumberComponent, selector: "ef-inputnumber", inputs: ["label", "labelKey", "required", "value", "invalid", "disabled", "readonly", "format", "showButtons", "buttonLayout", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "prefix", "suffix", "currency", "currencyDisplay", "locale", "localeMatcher", "mode", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "allowEmpty", "inputId", "name", "placeholder", "placeholderKey", "inputSize", "size", "maxlength", "minlength", "pattern", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaRequired", "inputStyle", "inputStyleClass", "style", "styleClass", "showClear", "variant", "autofocus", "autocomplete", "fluid", "inline", "pt", "ptOptions", "dt", "unstyled"], outputs: ["inputEvent", "focusEvent", "blurEvent", "keyDownEvent", "clearEvent"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }, { kind: "pipe", type: i8.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i8.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderBuilderComponent, isStandalone: true, selector: "ef-order-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, customers: { classPropertyName: "customers", publicName: "customers", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, backendErrors: { classPropertyName: "backendErrors", publicName: "backendErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { order: "orderChange", openCatalogue: "openCatalogue", orderChanged: "orderChanged", orderValidated: "orderValidated", productsAdded: "productsAdded" }, ngImport: i0, template: "<!-- Order Header -->\n<p-fieldset [legend]=\"config().headerLabel\">\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2\">\n    <ef-label [label]=\"config().customerLabel\" for=\"order.customerId\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" required />\n    <ef-label [label]=\"config().dateLabel\" for=\"order.orderDate\" styleClass=\"col-span-3 form-label-left\" required />\n  </div>\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2 mt-4\">\n    <div class=\"col-span-12 md:col-span-6\">\n      <ef-select\n        [ngModel]=\"order().customerId\"\n        (ngModelChange)=\"updateCustomer($event)\"\n        name=\"order.customerId\"\n        inputId=\"order.customerId\"\n        [options]=\"customers()\"\n        optionValue=\"customerId\"\n        optionLabel=\"companyName\"\n        [placeholder]=\"config().customerLabel\"\n        filter\n        showClear\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n    <div class=\"col-span-3\">\n      <ef-datepicker\n        [ngModel]=\"order().orderDate\"\n        (ngModelChange)=\"updateOrderDate($event)\"\n        name=\"order.orderDate\"\n        inputId=\"order.orderDate\"\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n  </div>\n\n  @if (config().enableQuickAdd && !readonly()) {\n    <div class=\"grid grid-cols-12 items-baseline gap-2 mt-4 mb-2\">\n      <ef-label labelKey=\"label.article\" for=\"quickAdd.product\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" />\n      <ef-label labelKey=\"label.sale_price\" for=\"quickAdd.price\" styleClass=\"col-span-2 form-label-left\" />\n      <ef-label labelKey=\"label.quantity\" for=\"quickAdd.quantity\" styleClass=\"col-span-2 form-label-left\" />\n    </div>\n    <div class=\"grid grid-cols-12 items-center gap-2\">\n      <div class=\"col-span-12 md:col-span-6\">\n        <ef-select\n          [ngModel]=\"quickAddProduct()\"\n          (ngModelChange)=\"onQuickAddProductSelect($event)\"\n          name=\"quickAdd.product\"\n          inputId=\"quickAdd.product\"\n          [options]=\"flattenedProductOptions()\"\n          optionLabel=\"_displayLabel\"\n          placeholderKey=\"placeholder.select_article\"\n          filter\n          showClear\n          [disabled]=\"readonly()\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.price\"\n          name=\"quickAdd.price\"\n          [ngModel]=\"quickAddPrice()\"\n          (ngModelChange)=\"quickAddPrice.set($event)\"\n          mode=\"currency\"\n          [currency]=\"currency()\"\n          [locale]=\"locale()\"\n          [min]=\"0\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.quantity\"\n          name=\"quickAdd.quantity\"\n          [ngModel]=\"quickAddQuantity()\"\n          (ngModelChange)=\"quickAddQuantity.set($event)\"\n          [min]=\"0\"\n          [maxFractionDigits]=\"4\"\n          [locale]=\"locale()\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2 flex justify-start gap-2\">\n        <ef-button\n          icon=\"pi pi-plus\"\n          [rounded]=\"true\"\n          severity=\"primary\"\n          tooltipKey=\"tooltip.add_article\"\n          [disabled]=\"quickAddDisabled()\"\n          (clickEvent)=\"addQuickProduct()\"\n        />\n        @if (config().showCatalogue) {\n          <ef-button\n            icon=\"pi pi-search\"\n            [rounded]=\"true\"\n            severity=\"primary\"\n            tooltipKey=\"tooltip.open_catalogue\"\n            [disabled]=\"readonly()\"\n            (clickEvent)=\"handleOpenCatalogue()\"\n          />\n        }\n      </div>\n    </div>\n  }\n</p-fieldset>\n\n<div class=\"my-4\"></div>\n\n<!-- Order Line Items -->\n<p-fieldset legend=\"D\u00E9tails\">\n  <p-table\n    #pTable\n    class=\"text-sm\"\n    size=\"small\"\n    [value]=\"orderLines()\"\n    [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\n    [resizableColumns]=\"true\"\n    [tableStyle]=\"{ 'min-width': '50rem' }\"\n    columnResizeMode=\"expand\"\n    [showCurrentPageReport]=\"true\"\n    stateStorage=\"local\"\n    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackBy\"\n  >\n    <ng-template #header>\n      <tr>\n        <th>{{ 'label.article' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.sale_price' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.quantity' | translate }}</th>\n        @if (config().enableTax) {\n          <th class=\"w-[120px] !text-end\">TVA (%)</th>\n        }\n        @if (config().enableDiscount) {\n          <th class=\"w-[120px] !text-end\">\n            Remise (%)\n          </th>\n        }\n        <th class=\"w-[120px] !text-end\">Sous-Total</th>\n        @if (!readonly()) {\n          <th class=\"w-10 !text-end\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-item let-rowIndex=\"rowIndex\">\n      <!-- Editing mode for new row -->\n      @if (item.isEditing) {\n        <tr>\n          <td>\n            <div class=\"align-items-center flex gap-2\">\n              <ef-select\n                [(ngModel)]=\"item.product\"\n                (ngModelChange)=\"onProductSelect(item)\"\n                [name]=\"'item.product.' + rowIndex\"\n                [inputId]=\"'item.product.' + rowIndex\"\n                [options]=\"flattenedProductOptions()\"\n                optionLabel=\"_displayLabel\"\n                placeholderKey=\"placeholder.select_article\"\n                filter\n                showClear\n                [disabled]=\"readonly()\"\n                appendTo=\"body\"\n              />\n            </div>\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.productUnitPrice.' + rowIndex\"\n              [name]=\"'item.productUnitPrice.' + rowIndex\"\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"stopEditField(item)\"\n              mode=\"currency\"\n              [currency]=\"currency()\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.quantity.' + rowIndex\"\n              [name]=\"'item.quantity.' + rowIndex\"\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"saveEditingRow(item)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td class=\"w-[120px]\">\n              <ef-inputnumber\n                [id]=\"'item.discount.' + rowIndex\"\n                [name]=\"'item.discount.' + rowIndex\"\n                [(ngModel)]=\"item.discount\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"saveEditingRow(item)\"\n                [min]=\"0\"\n                [max]=\"100\"\n                suffix=\"%\"\n                [disabled]=\"readonly()\"\n                size=\"small\"\n              />\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ calculateSubtotal(item) | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                pTooltip=\"Supprimer\"\n                tooltipPosition=\"top\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n\n      <!-- Display mode for saved row -->\n      @if (!item.isEditing) {\n        <tr>\n          <td>\n            <div\n              [innerHTML]=\"AppUtils.truncate(item.productDescription)\"\n              [pTooltip]=\"item.productDescription\"\n              tooltipPosition=\"top\"\n            ></div>\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'productUnitPrice')\"\n          >\n            @if (\n              item.editingField === 'productUnitPrice' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [name]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [(ngModel)]=\"item.productUnitPrice\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                mode=\"currency\"\n                [currency]=\"currency()\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.productUnitPrice | currency: currency() }}\n              </span>\n            }\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'quantity')\"\n          >\n            @if (\n              item.editingField === 'quantity' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.quantity.edit.' + rowIndex\"\n                [name]=\"'item.quantity.edit.' + rowIndex\"\n                [(ngModel)]=\"item.quantity\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                [min]=\"0\"\n                [maxFractionDigits]=\"4\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.quantity | number: '1.4-4' : locale() }}\n              </span>\n            }\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td\n              class=\"w-[120px]\"\n              [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n              (click)=\"startEditField(item, 'discount')\"\n            >\n              @if (\n                item.editingField === 'discount' &&\n                  config().allowInlineEdit &&\n                  !readonly()\n              ) {\n                <ef-inputnumber\n                  [id]=\"'item.discount.edit.' + rowIndex\"\n                  [name]=\"'item.discount.edit.' + rowIndex\"\n                  [(ngModel)]=\"item.discount\"\n                  (ngModelChange)=\"onFieldChange(item)\"\n                  (onBlur)=\"stopEditField(item)\"\n                  [min]=\"0\"\n                  [max]=\"100\"\n                  suffix=\"%\"\n                  size=\"small\"\n                  class=\"!text-end\"\n                />\n              } @else {\n                <span\n                  [class]=\"\n                    config().allowInlineEdit && !readonly()\n                      ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                      : 'block px-2 py-1 text-end'\n                  \"\n                >\n                  {{ item.discount || 0 }}%\n                </span>\n              }\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ item.grossAmount | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                tooltipPosition=\"top\"\n                pTooltip=\"Supprimer\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template #footer>\n      @if (!readonly()) {\n        <tr>\n          <td\n            [attr.colspan]=\"\n              config().enableTax && config().enableDiscount\n                ? 7\n                : config().enableTax || config().enableDiscount\n                  ? 6\n                  : 5\n            \"\n          >\n            <a\n              href=\"javascript:void(0)\"\n              class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n              [class.opacity-50]=\"hasEditingRow()\"\n              [class.pointer-events-none]=\"hasEditingRow()\"\n              (click)=\"addNewProductRow()\"\n            >\n              <i class=\"pi pi-plus text-xs\"></i>\n              Ajouter un article\n            </a>\n            @if (config().showCatalogue) {\n              <ng-container>\n                &nbsp; | &nbsp;\n                <a\n                  href=\"javascript:void(0)\"\n                  class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n                  (click)=\"handleOpenCatalogue()\"\n                >\n                  <i class=\"pi pi-search text-xs\"></i>\n                  Ouvrir le catalogue des articles\n                </a>\n              </ng-container>\n            }\n          </td>\n        </tr>\n      }\n\n      <!-- Totals Section -->\n      <tr class=\"border-t\">\n        <td\n          [attr.colspan]=\"\n            config().enableTax && config().enableDiscount\n              ? 5\n              : config().enableTax || config().enableDiscount\n                ? 4\n                : 3\n          \"\n        >\n          @if (config().showProductsSummary) {\n            <div class=\"w-[500px]\">\n              <div class=\"my-4\"></div>\n              <ef-order-summary\n                [orderLines]=\"orderLines()\"\n                [countGroupLabels]=\"countGroupLabels()\"\n                legend=\"R\u00E9capitulatif\"\n              />\n            </div>\n          }\n        </td>\n        <td [attr.colspan]=\"readonly() ? 2 : 3\" class=\"!text-end\">\n          <p-fieldset [legend]=\"'Totaux'\">\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"flex items-end justify-between gap-4\">\n                <span\n                  class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                >\n                  Montant brut :\n                </span>\n                <span class=\"font-semibold\">\n                  {{ grossTotal() | currency: currency() }}\n                </span>\n              </div>\n              @if (config().enableDiscount) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    Remise :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ discountTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              @if (config().enableTax) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    TVA :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ tvaTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              <p-divider class=\"!my-1\" />\n              <div class=\"flex justify-between gap-4\">\n                <span class=\"text-lg font-bold text-primary\">\n                  Montant Total :\n                </span>\n                <span class=\"text-lg font-bold text-primary\">\n                  {{ finalTotal() | currency: currency() }}\n                </span>\n              </div>\n            </div>\n          </p-fieldset>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</p-fieldset>\n\n<!-- Optional Notes Section -->\n@if (config().showNotes) {\n  <p-fieldset legend=\"Notes\">\n    <textarea\n      pTextarea\n      id=\"order.notes\"\n      name=\"order.notes\"\n      [ngModel]=\"order().notes\"\n      (ngModelChange)=\"updateNotes($event)\"\n      [disabled]=\"readonly()\"\n      [placeholder]=\"'common.notes_placeholder' | translate\"\n      rows=\"5\"\n      class=\"w-full\"\n    ></textarea>\n  </p-fieldset>\n}\n\n<!-- Validation Messages -->\n@if (hasErrors()) {\n  <div\n    class=\"my-4 rounded border border-red-200 bg-red-50 p-4 dark:bg-red-900/20\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <i\n        class=\"pi pi-exclamation-triangle mt-1 text-red-600 dark:text-red-400\"\n      ></i>\n      <div class=\"flex-1\">\n        <h4 class=\"mb-2 font-semibold text-red-800 dark:text-red-200\">\n          Erreurs de validation\n        </h4>\n        <ul class=\"list-inside list-disc text-sm text-red-700 dark:text-red-300\">\n          @for (error of combinedErrors() | keyvalue; track error.key) {\n            <li>\n              {{ error.value[0] }}\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Change Indicator -->\n@if (hasChanges()) {\n  <div\n    class=\"my-4 flex items-center gap-2 rounded border border-orange-200 bg-orange-50 p-3 dark:bg-orange-900/20\"\n  >\n    <i class=\"pi pi-info-circle text-orange-600 dark:text-orange-400\"></i>\n    <span class=\"text-sm text-orange-800 dark:text-orange-200\">\n      Modifications non sauvegard\u00E9es d\u00E9tect\u00E9es\n    </span>\n  </div>\n}\n", styles: [".inline-edit-cell{position:relative}.inline-edit-cell .edit-indicator{position:absolute;top:2px;right:2px;font-size:.65rem;opacity:0;transition:opacity .2s ease}.inline-edit-cell:hover .edit-indicator{opacity:.5}.cursor-pointer{cursor:pointer;transition:background-color .2s ease}.cursor-pointer:hover{background-color:#0000000d}:host-context(.dark-mode) .cursor-pointer:hover{background-color:#ffffff0d}.cursor-pointer:active{transform:scale(.98)}::ng-deep .p-datatable .p-datatable-thead>tr>th{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}::ng-deep .p-datatable .editing-row{background-color:rgba(var(--primary-500),.05);border-left:3px solid var(--primary-500)}::ng-deep .p-datatable .w-\\[120px\\]{width:120px;min-width:120px;max-width:120px}::ng-deep .p-datatable .w-20{width:5rem;min-width:5rem;max-width:5rem}::ng-deep .p-datatable .\\!text-end{text-align:right!important;justify-content:flex-end}.totals-section{background-color:rgba(var(--surface-0),.5);border-top:2px solid var(--surface-border);padding:1rem}.totals-section .totals-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;gap:1rem}.totals-section .totals-row.total-final{border-top:2px solid var(--primary-500);padding-top:.75rem;margin-top:.5rem;font-size:1.125rem;font-weight:700;color:var(--primary-500)}.totals-section .totals-label{color:var(--text-color-secondary);font-weight:600}.totals-section .totals-value{font-weight:600;font-variant-numeric:tabular-nums}.add-product-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--primary-500);text-decoration:none;transition:color .2s ease}.add-product-link:hover{color:var(--primary-700)}.add-product-link.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.add-product-link i{font-size:.75rem}.validation-message{padding:1rem;margin-bottom:1rem;border-radius:4px}.validation-message.error{background-color:rgba(var(--red-50),1);border:1px solid rgba(var(--red-200),1);color:var(--red-800)}:host-context(.dark-mode) .validation-message.error{background-color:rgba(var(--red-900),.2);color:var(--red-200)}.validation-message.error .icon{color:var(--red-600)}:host-context(.dark-mode) .validation-message.error .icon{color:var(--red-400)}.validation-message.warning{background-color:rgba(var(--orange-50),1);border:1px solid rgba(var(--orange-200),1);color:var(--orange-800)}:host-context(.dark-mode) .validation-message.warning{background-color:rgba(var(--orange-900),.2);color:var(--orange-200)}.validation-message.warning .icon{color:var(--orange-600)}:host-context(.dark-mode) .validation-message.warning .icon{color:var(--orange-400)}.validation-message.info{background-color:rgba(var(--blue-50),1);border:1px solid rgba(var(--blue-200),1);color:var(--blue-800)}:host-context(.dark-mode) .validation-message.info{background-color:rgba(var(--blue-900),.2);color:var(--blue-200)}.validation-message.info .icon{color:var(--blue-600)}:host-context(.dark-mode) .validation-message.info .icon{color:var(--blue-400)}::ng-deep .p-inputnumber-input.currency-input{text-align:right}::ng-deep .p-inputnumber.discount-input .p-inputnumber-input{text-align:right}@media(max-width:768px){::ng-deep .p-datatable{font-size:.875rem}::ng-deep .p-datatable .w-\\[120px\\]{width:100px;min-width:100px;max-width:100px}.totals-section{font-size:.875rem}.totals-section .totals-row.total-final{font-size:1rem}}@media(max-width:576px){::ng-deep .p-datatable .p-datatable-thead>tr>th{font-size:.7rem;padding:.5rem .25rem}::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:.5rem .25rem}}:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;border-radius:4px}@media(prefers-contrast:high){.cursor-pointer:hover{background-color:#0000001a}.validation-message{border-width:2px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media print{.add-product-link,.p-button,.inline-edit-cell:hover,.cursor-pointer{display:none!important}.validation-message{display:none}::ng-deep .p-datatable .p-datatable-thead>tr>th,::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:1px solid #000}}.loading-overlay{position:absolute;inset:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:1000}:host-context(.dark-mode) .loading-overlay{background-color:#000c}.loading-overlay .spinner{width:3rem;height:3rem;border:3px solid var(--surface-border);border-top-color:var(--primary-500);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-color-secondary)}.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.3}.empty-state .empty-title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.empty-state .empty-message{font-size:.875rem;margin-bottom:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i2$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: EfOrderSummaryComponent, selector: "ef-order-summary", inputs: ["orderLines", "countGroupLabels", "legend"] }, { kind: "component", type: EfSelectComponent, selector: "ef-select", inputs: ["label", "labelKey", "inputId", "name", "options", "optionLabel", "optionValue", "placeholder", "placeholderKey", "size", "required", "fluid", "inline", "filter", "showClear", "disabled", "appendTo", "filterByKeys"], outputs: ["selectionChangeEvent"] }, { kind: "component", type: EfDatepickerComponent, selector: "ef-datepicker", inputs: ["label", "labelKey", "inputId", "name", "placeholder", "placeholderKey", "size", "required", "fluid", "inline", "disabled", "showIcon", "iconDisplay", "selectionMode", "dateFormat", "appendTo", "showTime", "showButtonBar", "minDate", "maxDate"], outputs: ["dateSelectEvent"] }, { kind: "component", type: EfInputNumberComponent, selector: "ef-inputnumber", inputs: ["label", "labelKey", "required", "value", "invalid", "disabled", "readonly", "format", "showButtons", "buttonLayout", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "prefix", "suffix", "currency", "currencyDisplay", "locale", "localeMatcher", "mode", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "allowEmpty", "inputId", "name", "placeholder", "placeholderKey", "inputSize", "size", "maxlength", "minlength", "pattern", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaRequired", "inputStyle", "inputStyleClass", "style", "styleClass", "showClear", "variant", "autofocus", "autocomplete", "fluid", "inline", "pt", "ptOptions", "dt", "unstyled"], outputs: ["inputEvent", "focusEvent", "blurEvent", "keyDownEvent", "clearEvent"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }, { kind: "pipe", type: i8.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i8.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfOrderBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-order-builder', standalone: true, imports: [
                         CommonModule,
@@ -1784,7 +1784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         EfLabelComponent,
                         EfFieldsetComponent,
                         EfButtonComponent,
-                    ], template: "<!-- Order Header -->\n<p-fieldset [legend]=\"config().headerLabel\">\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2\">\n    <ef-label [label]=\"config().customerLabel\" for=\"order.customerId\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" required />\n    <ef-label [label]=\"config().dateLabel\" for=\"order.orderDate\" styleClass=\"col-span-3 form-label-left\" required />\n  </div>\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2 mt-4\">\n    <div class=\"col-span-12 md:col-span-6\">\n      <ef-select\n        [ngModel]=\"order().customerId\"\n        (ngModelChange)=\"updateCustomer($event)\"\n        name=\"order.customerId\"\n        inputId=\"order.customerId\"\n        [options]=\"customers()\"\n        optionValue=\"customerId\"\n        optionLabel=\"companyName\"\n        [placeholder]=\"config().customerLabel\"\n        filter\n        showClear\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n    <div class=\"col-span-3\">\n      <ef-datepicker\n        [ngModel]=\"order().orderDate\"\n        (ngModelChange)=\"updateOrderDate($event)\"\n        name=\"order.orderDate\"\n        inputId=\"order.orderDate\"\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n  </div>\n\n  @if (config().enableQuickAdd && !readonly()) {\n    <div class=\"grid grid-cols-12 items-baseline gap-2 mt-4 mb-2\">\n      <ef-label labelKey=\"label.article\" for=\"quickAdd.product\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" />\n      <ef-label labelKey=\"label.sale_price\" for=\"quickAdd.price\" styleClass=\"col-span-2 form-label-left\" />\n      <ef-label labelKey=\"label.quantity\" for=\"quickAdd.quantity\" styleClass=\"col-span-2 form-label-left\" />\n    </div>\n    <div class=\"grid grid-cols-12 items-center gap-2\">\n      <div class=\"col-span-12 md:col-span-6\">\n        <ef-select\n          [ngModel]=\"quickAddProduct()\"\n          (ngModelChange)=\"onQuickAddProductSelect($event)\"\n          name=\"quickAdd.product\"\n          inputId=\"quickAdd.product\"\n          [options]=\"flattenedProductOptions()\"\n          optionLabel=\"_displayLabel\"\n          placeholderKey=\"placeholder.select_article\"\n          filter\n          showClear\n          [disabled]=\"readonly()\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.price\"\n          name=\"quickAdd.price\"\n          [ngModel]=\"quickAddPrice()\"\n          (ngModelChange)=\"quickAddPrice.set($event)\"\n          mode=\"currency\"\n          [currency]=\"currency()\"\n          [locale]=\"locale()\"\n          [min]=\"0\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.quantity\"\n          name=\"quickAdd.quantity\"\n          [ngModel]=\"quickAddQuantity()\"\n          (ngModelChange)=\"quickAddQuantity.set($event)\"\n          [min]=\"1\"\n          [minFractionDigits]=\"4\"\n          [maxFractionDigits]=\"4\"\n          [locale]=\"locale()\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2 flex justify-start gap-2\">\n        <ef-button\n          icon=\"pi pi-plus\"\n          [rounded]=\"true\"\n          severity=\"primary\"\n          tooltipKey=\"tooltip.add_article\"\n          [disabled]=\"quickAddDisabled()\"\n          (clickEvent)=\"addQuickProduct()\"\n        />\n        @if (config().showCatalogue) {\n          <ef-button\n            icon=\"pi pi-search\"\n            [rounded]=\"true\"\n            severity=\"primary\"\n            tooltipKey=\"tooltip.open_catalogue\"\n            [disabled]=\"readonly()\"\n            (clickEvent)=\"handleOpenCatalogue()\"\n          />\n        }\n      </div>\n    </div>\n  }\n</p-fieldset>\n\n<div class=\"my-4\"></div>\n\n<!-- Order Line Items -->\n<p-fieldset legend=\"D\u00E9tails\">\n  <p-table\n    #pTable\n    class=\"text-sm\"\n    size=\"small\"\n    [value]=\"orderLines()\"\n    [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\n    [resizableColumns]=\"true\"\n    [tableStyle]=\"{ 'min-width': '50rem' }\"\n    columnResizeMode=\"expand\"\n    [showCurrentPageReport]=\"true\"\n    stateStorage=\"local\"\n    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackBy\"\n  >\n    <ng-template #header>\n      <tr>\n        <th>{{ 'label.article' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.sale_price' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.quantity' | translate }}</th>\n        @if (config().enableTax) {\n          <th class=\"w-[120px] !text-end\">TVA (%)</th>\n        }\n        @if (config().enableDiscount) {\n          <th class=\"w-[120px] !text-end\">\n            Remise (%)\n          </th>\n        }\n        <th class=\"w-[120px] !text-end\">Sous-Total</th>\n        @if (!readonly()) {\n          <th class=\"w-10 !text-end\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-item let-rowIndex=\"rowIndex\">\n      <!-- Editing mode for new row -->\n      @if (item.isEditing) {\n        <tr>\n          <td>\n            <div class=\"align-items-center flex gap-2\">\n              <ef-select\n                [(ngModel)]=\"item.product\"\n                (ngModelChange)=\"onProductSelect(item)\"\n                [name]=\"'item.product.' + rowIndex\"\n                [inputId]=\"'item.product.' + rowIndex\"\n                [options]=\"flattenedProductOptions()\"\n                optionLabel=\"_displayLabel\"\n                placeholderKey=\"placeholder.select_article\"\n                filter\n                showClear\n                [disabled]=\"readonly()\"\n                appendTo=\"body\"\n              />\n            </div>\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.productUnitPrice.' + rowIndex\"\n              [name]=\"'item.productUnitPrice.' + rowIndex\"\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"stopEditField(item)\"\n              mode=\"currency\"\n              [currency]=\"currency()\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.quantity.' + rowIndex\"\n              [name]=\"'item.quantity.' + rowIndex\"\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"saveEditingRow(item)\"\n              [min]=\"1\"\n              [minFractionDigits]=\"4\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td class=\"w-[120px]\">\n              <ef-inputnumber\n                [id]=\"'item.discount.' + rowIndex\"\n                [name]=\"'item.discount.' + rowIndex\"\n                [(ngModel)]=\"item.discount\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"saveEditingRow(item)\"\n                [min]=\"0\"\n                [max]=\"100\"\n                suffix=\"%\"\n                [disabled]=\"readonly()\"\n                size=\"small\"\n              />\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ calculateSubtotal(item) | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                pTooltip=\"Supprimer\"\n                tooltipPosition=\"top\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n\n      <!-- Display mode for saved row -->\n      @if (!item.isEditing) {\n        <tr>\n          <td>\n            <div\n              [innerHTML]=\"AppUtils.truncate(item.productDescription)\"\n              [pTooltip]=\"item.productDescription\"\n              tooltipPosition=\"top\"\n            ></div>\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'productUnitPrice')\"\n          >\n            @if (\n              item.editingField === 'productUnitPrice' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [name]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [(ngModel)]=\"item.productUnitPrice\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                mode=\"currency\"\n                [currency]=\"currency()\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.productUnitPrice | currency: currency() }}\n              </span>\n            }\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'quantity')\"\n          >\n            @if (\n              item.editingField === 'quantity' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.quantity.edit.' + rowIndex\"\n                [name]=\"'item.quantity.edit.' + rowIndex\"\n                [(ngModel)]=\"item.quantity\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                [min]=\"1\"\n                [minFractionDigits]=\"4\"\n                [maxFractionDigits]=\"4\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.quantity | number: '1.4-4' : locale() }}\n              </span>\n            }\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td\n              class=\"w-[120px]\"\n              [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n              (click)=\"startEditField(item, 'discount')\"\n            >\n              @if (\n                item.editingField === 'discount' &&\n                  config().allowInlineEdit &&\n                  !readonly()\n              ) {\n                <ef-inputnumber\n                  [id]=\"'item.discount.edit.' + rowIndex\"\n                  [name]=\"'item.discount.edit.' + rowIndex\"\n                  [(ngModel)]=\"item.discount\"\n                  (ngModelChange)=\"onFieldChange(item)\"\n                  (onBlur)=\"stopEditField(item)\"\n                  [min]=\"0\"\n                  [max]=\"100\"\n                  suffix=\"%\"\n                  size=\"small\"\n                  class=\"!text-end\"\n                />\n              } @else {\n                <span\n                  [class]=\"\n                    config().allowInlineEdit && !readonly()\n                      ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                      : 'block px-2 py-1 text-end'\n                  \"\n                >\n                  {{ item.discount || 0 }}%\n                </span>\n              }\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ item.grossAmount | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                tooltipPosition=\"top\"\n                pTooltip=\"Supprimer\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template #footer>\n      @if (!readonly()) {\n        <tr>\n          <td\n            [attr.colspan]=\"\n              config().enableTax && config().enableDiscount\n                ? 7\n                : config().enableTax || config().enableDiscount\n                  ? 6\n                  : 5\n            \"\n          >\n            <a\n              href=\"javascript:void(0)\"\n              class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n              [class.opacity-50]=\"hasEditingRow()\"\n              [class.pointer-events-none]=\"hasEditingRow()\"\n              (click)=\"addNewProductRow()\"\n            >\n              <i class=\"pi pi-plus text-xs\"></i>\n              Ajouter un article\n            </a>\n            @if (config().showCatalogue) {\n              <ng-container>\n                &nbsp; | &nbsp;\n                <a\n                  href=\"javascript:void(0)\"\n                  class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n                  (click)=\"handleOpenCatalogue()\"\n                >\n                  <i class=\"pi pi-search text-xs\"></i>\n                  Ouvrir le catalogue des articles\n                </a>\n              </ng-container>\n            }\n          </td>\n        </tr>\n      }\n\n      <!-- Totals Section -->\n      <tr class=\"border-t\">\n        <td\n          [attr.colspan]=\"\n            config().enableTax && config().enableDiscount\n              ? 5\n              : config().enableTax || config().enableDiscount\n                ? 4\n                : 3\n          \"\n        >\n          @if (config().showProductsSummary) {\n            <div class=\"w-[500px]\">\n              <div class=\"my-4\"></div>\n              <ef-order-summary\n                [orderLines]=\"orderLines()\"\n                [countGroupLabels]=\"countGroupLabels()\"\n                legend=\"R\u00E9capitulatif\"\n              />\n            </div>\n          }\n        </td>\n        <td [attr.colspan]=\"readonly() ? 2 : 3\" class=\"!text-end\">\n          <p-fieldset [legend]=\"'Totaux'\">\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"flex items-end justify-between gap-4\">\n                <span\n                  class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                >\n                  Montant brut :\n                </span>\n                <span class=\"font-semibold\">\n                  {{ grossTotal() | currency: currency() }}\n                </span>\n              </div>\n              @if (config().enableDiscount) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    Remise :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ discountTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              @if (config().enableTax) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    TVA :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ tvaTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              <p-divider class=\"!my-1\" />\n              <div class=\"flex justify-between gap-4\">\n                <span class=\"text-lg font-bold text-primary\">\n                  Montant Total :\n                </span>\n                <span class=\"text-lg font-bold text-primary\">\n                  {{ finalTotal() | currency: currency() }}\n                </span>\n              </div>\n            </div>\n          </p-fieldset>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</p-fieldset>\n\n<!-- Optional Notes Section -->\n@if (config().showNotes) {\n  <p-fieldset legend=\"Notes\">\n    <textarea\n      pTextarea\n      id=\"order.notes\"\n      name=\"order.notes\"\n      [ngModel]=\"order().notes\"\n      (ngModelChange)=\"updateNotes($event)\"\n      [disabled]=\"readonly()\"\n      [placeholder]=\"'common.notes_placeholder' | translate\"\n      rows=\"5\"\n      class=\"w-full\"\n    ></textarea>\n  </p-fieldset>\n}\n\n<!-- Validation Messages -->\n@if (hasErrors()) {\n  <div\n    class=\"my-4 rounded border border-red-200 bg-red-50 p-4 dark:bg-red-900/20\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <i\n        class=\"pi pi-exclamation-triangle mt-1 text-red-600 dark:text-red-400\"\n      ></i>\n      <div class=\"flex-1\">\n        <h4 class=\"mb-2 font-semibold text-red-800 dark:text-red-200\">\n          Erreurs de validation\n        </h4>\n        <ul class=\"list-inside list-disc text-sm text-red-700 dark:text-red-300\">\n          @for (error of combinedErrors() | keyvalue; track error.key) {\n            <li>\n              {{ error.value[0] }}\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Change Indicator -->\n@if (hasChanges()) {\n  <div\n    class=\"my-4 flex items-center gap-2 rounded border border-orange-200 bg-orange-50 p-3 dark:bg-orange-900/20\"\n  >\n    <i class=\"pi pi-info-circle text-orange-600 dark:text-orange-400\"></i>\n    <span class=\"text-sm text-orange-800 dark:text-orange-200\">\n      Modifications non sauvegard\u00E9es d\u00E9tect\u00E9es\n    </span>\n  </div>\n}\n", styles: [".inline-edit-cell{position:relative}.inline-edit-cell .edit-indicator{position:absolute;top:2px;right:2px;font-size:.65rem;opacity:0;transition:opacity .2s ease}.inline-edit-cell:hover .edit-indicator{opacity:.5}.cursor-pointer{cursor:pointer;transition:background-color .2s ease}.cursor-pointer:hover{background-color:#0000000d}:host-context(.dark-mode) .cursor-pointer:hover{background-color:#ffffff0d}.cursor-pointer:active{transform:scale(.98)}::ng-deep .p-datatable .p-datatable-thead>tr>th{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}::ng-deep .p-datatable .editing-row{background-color:rgba(var(--primary-500),.05);border-left:3px solid var(--primary-500)}::ng-deep .p-datatable .w-\\[120px\\]{width:120px;min-width:120px;max-width:120px}::ng-deep .p-datatable .w-20{width:5rem;min-width:5rem;max-width:5rem}::ng-deep .p-datatable .\\!text-end{text-align:right!important;justify-content:flex-end}.totals-section{background-color:rgba(var(--surface-0),.5);border-top:2px solid var(--surface-border);padding:1rem}.totals-section .totals-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;gap:1rem}.totals-section .totals-row.total-final{border-top:2px solid var(--primary-500);padding-top:.75rem;margin-top:.5rem;font-size:1.125rem;font-weight:700;color:var(--primary-500)}.totals-section .totals-label{color:var(--text-color-secondary);font-weight:600}.totals-section .totals-value{font-weight:600;font-variant-numeric:tabular-nums}.add-product-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--primary-500);text-decoration:none;transition:color .2s ease}.add-product-link:hover{color:var(--primary-700)}.add-product-link.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.add-product-link i{font-size:.75rem}.validation-message{padding:1rem;margin-bottom:1rem;border-radius:4px}.validation-message.error{background-color:rgba(var(--red-50),1);border:1px solid rgba(var(--red-200),1);color:var(--red-800)}:host-context(.dark-mode) .validation-message.error{background-color:rgba(var(--red-900),.2);color:var(--red-200)}.validation-message.error .icon{color:var(--red-600)}:host-context(.dark-mode) .validation-message.error .icon{color:var(--red-400)}.validation-message.warning{background-color:rgba(var(--orange-50),1);border:1px solid rgba(var(--orange-200),1);color:var(--orange-800)}:host-context(.dark-mode) .validation-message.warning{background-color:rgba(var(--orange-900),.2);color:var(--orange-200)}.validation-message.warning .icon{color:var(--orange-600)}:host-context(.dark-mode) .validation-message.warning .icon{color:var(--orange-400)}.validation-message.info{background-color:rgba(var(--blue-50),1);border:1px solid rgba(var(--blue-200),1);color:var(--blue-800)}:host-context(.dark-mode) .validation-message.info{background-color:rgba(var(--blue-900),.2);color:var(--blue-200)}.validation-message.info .icon{color:var(--blue-600)}:host-context(.dark-mode) .validation-message.info .icon{color:var(--blue-400)}::ng-deep .p-inputnumber-input.currency-input{text-align:right}::ng-deep .p-inputnumber.discount-input .p-inputnumber-input{text-align:right}@media(max-width:768px){::ng-deep .p-datatable{font-size:.875rem}::ng-deep .p-datatable .w-\\[120px\\]{width:100px;min-width:100px;max-width:100px}.totals-section{font-size:.875rem}.totals-section .totals-row.total-final{font-size:1rem}}@media(max-width:576px){::ng-deep .p-datatable .p-datatable-thead>tr>th{font-size:.7rem;padding:.5rem .25rem}::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:.5rem .25rem}}:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;border-radius:4px}@media(prefers-contrast:high){.cursor-pointer:hover{background-color:#0000001a}.validation-message{border-width:2px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media print{.add-product-link,.p-button,.inline-edit-cell:hover,.cursor-pointer{display:none!important}.validation-message{display:none}::ng-deep .p-datatable .p-datatable-thead>tr>th,::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:1px solid #000}}.loading-overlay{position:absolute;inset:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:1000}:host-context(.dark-mode) .loading-overlay{background-color:#000c}.loading-overlay .spinner{width:3rem;height:3rem;border:3px solid var(--surface-border);border-top-color:var(--primary-500);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-color-secondary)}.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.3}.empty-state .empty-title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.empty-state .empty-message{font-size:.875rem;margin-bottom:1.5rem}\n"] }]
+                    ], template: "<!-- Order Header -->\n<p-fieldset [legend]=\"config().headerLabel\">\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2\">\n    <ef-label [label]=\"config().customerLabel\" for=\"order.customerId\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" required />\n    <ef-label [label]=\"config().dateLabel\" for=\"order.orderDate\" styleClass=\"col-span-3 form-label-left\" required />\n  </div>\n  <div class=\"grid grid-cols-12 items-baseline gap-2 mb-2 mt-4\">\n    <div class=\"col-span-12 md:col-span-6\">\n      <ef-select\n        [ngModel]=\"order().customerId\"\n        (ngModelChange)=\"updateCustomer($event)\"\n        name=\"order.customerId\"\n        inputId=\"order.customerId\"\n        [options]=\"customers()\"\n        optionValue=\"customerId\"\n        optionLabel=\"companyName\"\n        [placeholder]=\"config().customerLabel\"\n        filter\n        showClear\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n    <div class=\"col-span-3\">\n      <ef-datepicker\n        [ngModel]=\"order().orderDate\"\n        (ngModelChange)=\"updateOrderDate($event)\"\n        name=\"order.orderDate\"\n        inputId=\"order.orderDate\"\n        [disabled]=\"readonly()\"\n        required\n      />\n    </div>\n  </div>\n\n  @if (config().enableQuickAdd && !readonly()) {\n    <div class=\"grid grid-cols-12 items-baseline gap-2 mt-4 mb-2\">\n      <ef-label labelKey=\"label.article\" for=\"quickAdd.product\" styleClass=\"col-span-12 md:col-span-6 form-label-left\" />\n      <ef-label labelKey=\"label.sale_price\" for=\"quickAdd.price\" styleClass=\"col-span-2 form-label-left\" />\n      <ef-label labelKey=\"label.quantity\" for=\"quickAdd.quantity\" styleClass=\"col-span-2 form-label-left\" />\n    </div>\n    <div class=\"grid grid-cols-12 items-center gap-2\">\n      <div class=\"col-span-12 md:col-span-6\">\n        <ef-select\n          [ngModel]=\"quickAddProduct()\"\n          (ngModelChange)=\"onQuickAddProductSelect($event)\"\n          name=\"quickAdd.product\"\n          inputId=\"quickAdd.product\"\n          [options]=\"flattenedProductOptions()\"\n          optionLabel=\"_displayLabel\"\n          placeholderKey=\"placeholder.select_article\"\n          filter\n          showClear\n          [disabled]=\"readonly()\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.price\"\n          name=\"quickAdd.price\"\n          [ngModel]=\"quickAddPrice()\"\n          (ngModelChange)=\"quickAddPrice.set($event)\"\n          mode=\"currency\"\n          [currency]=\"currency()\"\n          [locale]=\"locale()\"\n          [min]=\"0\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2\">\n        <ef-inputnumber\n          id=\"quickAdd.quantity\"\n          name=\"quickAdd.quantity\"\n          [ngModel]=\"quickAddQuantity()\"\n          (ngModelChange)=\"quickAddQuantity.set($event)\"\n          [min]=\"0\"\n          [maxFractionDigits]=\"4\"\n          [locale]=\"locale()\"\n          [disabled]=\"readonly()\"\n          size=\"small\"\n        />\n      </div>\n      <div class=\"col-span-2 flex justify-start gap-2\">\n        <ef-button\n          icon=\"pi pi-plus\"\n          [rounded]=\"true\"\n          severity=\"primary\"\n          tooltipKey=\"tooltip.add_article\"\n          [disabled]=\"quickAddDisabled()\"\n          (clickEvent)=\"addQuickProduct()\"\n        />\n        @if (config().showCatalogue) {\n          <ef-button\n            icon=\"pi pi-search\"\n            [rounded]=\"true\"\n            severity=\"primary\"\n            tooltipKey=\"tooltip.open_catalogue\"\n            [disabled]=\"readonly()\"\n            (clickEvent)=\"handleOpenCatalogue()\"\n          />\n        }\n      </div>\n    </div>\n  }\n</p-fieldset>\n\n<div class=\"my-4\"></div>\n\n<!-- Order Line Items -->\n<p-fieldset legend=\"D\u00E9tails\">\n  <p-table\n    #pTable\n    class=\"text-sm\"\n    size=\"small\"\n    [value]=\"orderLines()\"\n    [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\n    [resizableColumns]=\"true\"\n    [tableStyle]=\"{ 'min-width': '50rem' }\"\n    columnResizeMode=\"expand\"\n    [showCurrentPageReport]=\"true\"\n    stateStorage=\"local\"\n    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackBy\"\n  >\n    <ng-template #header>\n      <tr>\n        <th>{{ 'label.article' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.sale_price' | translate }}</th>\n        <th class=\"w-[120px] !text-end\">{{ 'label.quantity' | translate }}</th>\n        @if (config().enableTax) {\n          <th class=\"w-[120px] !text-end\">TVA (%)</th>\n        }\n        @if (config().enableDiscount) {\n          <th class=\"w-[120px] !text-end\">\n            Remise (%)\n          </th>\n        }\n        <th class=\"w-[120px] !text-end\">Sous-Total</th>\n        @if (!readonly()) {\n          <th class=\"w-10 !text-end\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-item let-rowIndex=\"rowIndex\">\n      <!-- Editing mode for new row -->\n      @if (item.isEditing) {\n        <tr>\n          <td>\n            <div class=\"align-items-center flex gap-2\">\n              <ef-select\n                [(ngModel)]=\"item.product\"\n                (ngModelChange)=\"onProductSelect(item)\"\n                [name]=\"'item.product.' + rowIndex\"\n                [inputId]=\"'item.product.' + rowIndex\"\n                [options]=\"flattenedProductOptions()\"\n                optionLabel=\"_displayLabel\"\n                placeholderKey=\"placeholder.select_article\"\n                filter\n                showClear\n                [disabled]=\"readonly()\"\n                appendTo=\"body\"\n              />\n            </div>\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.productUnitPrice.' + rowIndex\"\n              [name]=\"'item.productUnitPrice.' + rowIndex\"\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"stopEditField(item)\"\n              mode=\"currency\"\n              [currency]=\"currency()\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          <td class=\"w-[120px]\">\n            <ef-inputnumber\n              [id]=\"'item.quantity.' + rowIndex\"\n              [name]=\"'item.quantity.' + rowIndex\"\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              (onBlur)=\"saveEditingRow(item)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              [disabled]=\"readonly()\"\n              size=\"small\"\n            />\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td class=\"w-[120px]\">\n              <ef-inputnumber\n                [id]=\"'item.discount.' + rowIndex\"\n                [name]=\"'item.discount.' + rowIndex\"\n                [(ngModel)]=\"item.discount\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"saveEditingRow(item)\"\n                [min]=\"0\"\n                [max]=\"100\"\n                suffix=\"%\"\n                [disabled]=\"readonly()\"\n                size=\"small\"\n              />\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ calculateSubtotal(item) | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                pTooltip=\"Supprimer\"\n                tooltipPosition=\"top\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n\n      <!-- Display mode for saved row -->\n      @if (!item.isEditing) {\n        <tr>\n          <td>\n            <div\n              [innerHTML]=\"AppUtils.truncate(item.productDescription)\"\n              [pTooltip]=\"item.productDescription\"\n              tooltipPosition=\"top\"\n            ></div>\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'productUnitPrice')\"\n          >\n            @if (\n              item.editingField === 'productUnitPrice' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [name]=\"'item.productUnitPrice.edit.' + rowIndex\"\n                [(ngModel)]=\"item.productUnitPrice\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                mode=\"currency\"\n                [currency]=\"currency()\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.productUnitPrice | currency: currency() }}\n              </span>\n            }\n          </td>\n          <td\n            class=\"w-[120px]\"\n            [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n            (click)=\"startEditField(item, 'quantity')\"\n          >\n            @if (\n              item.editingField === 'quantity' &&\n                config().allowInlineEdit &&\n                !readonly()\n            ) {\n              <ef-inputnumber\n                [id]=\"'item.quantity.edit.' + rowIndex\"\n                [name]=\"'item.quantity.edit.' + rowIndex\"\n                [(ngModel)]=\"item.quantity\"\n                (ngModelChange)=\"onFieldChange(item)\"\n                (onBlur)=\"stopEditField(item)\"\n                [min]=\"0\"\n                [maxFractionDigits]=\"4\"\n                [locale]=\"locale()\"\n                size=\"small\"\n                class=\"!text-end\"\n              />\n            } @else {\n              <span\n                [class]=\"\n                  config().allowInlineEdit && !readonly()\n                    ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                    : 'block px-2 py-1 text-end'\n                \"\n              >\n                {{ item.quantity | number: '1.4-4' : locale() }}\n              </span>\n            }\n          </td>\n          @if (config().enableTax) {\n            <td class=\"w-[120px] !text-end\">\n              {{ item.taxRate || 0 }} %\n            </td>\n          }\n          @if (config().enableDiscount) {\n            <td\n              class=\"w-[120px]\"\n              [class.cursor-pointer]=\"config().allowInlineEdit && !readonly()\"\n              (click)=\"startEditField(item, 'discount')\"\n            >\n              @if (\n                item.editingField === 'discount' &&\n                  config().allowInlineEdit &&\n                  !readonly()\n              ) {\n                <ef-inputnumber\n                  [id]=\"'item.discount.edit.' + rowIndex\"\n                  [name]=\"'item.discount.edit.' + rowIndex\"\n                  [(ngModel)]=\"item.discount\"\n                  (ngModelChange)=\"onFieldChange(item)\"\n                  (onBlur)=\"stopEditField(item)\"\n                  [min]=\"0\"\n                  [max]=\"100\"\n                  suffix=\"%\"\n                  size=\"small\"\n                  class=\"!text-end\"\n                />\n              } @else {\n                <span\n                  [class]=\"\n                    config().allowInlineEdit && !readonly()\n                      ? 'block cursor-pointer rounded px-2 py-1 text-end hover:bg-surface-100 dark:hover:bg-surface-700'\n                      : 'block px-2 py-1 text-end'\n                  \"\n                >\n                  {{ item.discount || 0 }}%\n                </span>\n              }\n            </td>\n          }\n          <td class=\"w-[120px] !text-end\">\n            {{ item.grossAmount | currency: currency() }}\n          </td>\n          @if (!readonly()) {\n            <td class=\"w-10 !text-end\">\n              <p-button\n                icon=\"pi pi-trash\"\n                size=\"small\"\n                [outlined]=\"true\"\n                tooltipPosition=\"top\"\n                pTooltip=\"Supprimer\"\n                (click)=\"removeOrderLine(item.id)\"\n              />\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template #footer>\n      @if (!readonly()) {\n        <tr>\n          <td\n            [attr.colspan]=\"\n              config().enableTax && config().enableDiscount\n                ? 7\n                : config().enableTax || config().enableDiscount\n                  ? 6\n                  : 5\n            \"\n          >\n            <a\n              href=\"javascript:void(0)\"\n              class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n              [class.opacity-50]=\"hasEditingRow()\"\n              [class.pointer-events-none]=\"hasEditingRow()\"\n              (click)=\"addNewProductRow()\"\n            >\n              <i class=\"pi pi-plus text-xs\"></i>\n              Ajouter un article\n            </a>\n            @if (config().showCatalogue) {\n              <ng-container>\n                &nbsp; | &nbsp;\n                <a\n                  href=\"javascript:void(0)\"\n                  class=\"inline-flex items-center gap-2 text-sm font-medium text-primary-500 hover:text-primary-700\"\n                  (click)=\"handleOpenCatalogue()\"\n                >\n                  <i class=\"pi pi-search text-xs\"></i>\n                  Ouvrir le catalogue des articles\n                </a>\n              </ng-container>\n            }\n          </td>\n        </tr>\n      }\n\n      <!-- Totals Section -->\n      <tr class=\"border-t\">\n        <td\n          [attr.colspan]=\"\n            config().enableTax && config().enableDiscount\n              ? 5\n              : config().enableTax || config().enableDiscount\n                ? 4\n                : 3\n          \"\n        >\n          @if (config().showProductsSummary) {\n            <div class=\"w-[500px]\">\n              <div class=\"my-4\"></div>\n              <ef-order-summary\n                [orderLines]=\"orderLines()\"\n                [countGroupLabels]=\"countGroupLabels()\"\n                legend=\"R\u00E9capitulatif\"\n              />\n            </div>\n          }\n        </td>\n        <td [attr.colspan]=\"readonly() ? 2 : 3\" class=\"!text-end\">\n          <p-fieldset [legend]=\"'Totaux'\">\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"flex items-end justify-between gap-4\">\n                <span\n                  class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                >\n                  Montant brut :\n                </span>\n                <span class=\"font-semibold\">\n                  {{ grossTotal() | currency: currency() }}\n                </span>\n              </div>\n              @if (config().enableDiscount) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    Remise :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ discountTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              @if (config().enableTax) {\n                <div class=\"flex justify-between gap-4\">\n                  <span\n                    class=\"font-semibold text-surface-700 dark:text-surface-300\"\n                  >\n                    TVA :\n                  </span>\n                  <span class=\"font-semibold\">\n                    {{ tvaTotal() | currency: currency() }}\n                  </span>\n                </div>\n              }\n              <p-divider class=\"!my-1\" />\n              <div class=\"flex justify-between gap-4\">\n                <span class=\"text-lg font-bold text-primary\">\n                  Montant Total :\n                </span>\n                <span class=\"text-lg font-bold text-primary\">\n                  {{ finalTotal() | currency: currency() }}\n                </span>\n              </div>\n            </div>\n          </p-fieldset>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</p-fieldset>\n\n<!-- Optional Notes Section -->\n@if (config().showNotes) {\n  <p-fieldset legend=\"Notes\">\n    <textarea\n      pTextarea\n      id=\"order.notes\"\n      name=\"order.notes\"\n      [ngModel]=\"order().notes\"\n      (ngModelChange)=\"updateNotes($event)\"\n      [disabled]=\"readonly()\"\n      [placeholder]=\"'common.notes_placeholder' | translate\"\n      rows=\"5\"\n      class=\"w-full\"\n    ></textarea>\n  </p-fieldset>\n}\n\n<!-- Validation Messages -->\n@if (hasErrors()) {\n  <div\n    class=\"my-4 rounded border border-red-200 bg-red-50 p-4 dark:bg-red-900/20\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <i\n        class=\"pi pi-exclamation-triangle mt-1 text-red-600 dark:text-red-400\"\n      ></i>\n      <div class=\"flex-1\">\n        <h4 class=\"mb-2 font-semibold text-red-800 dark:text-red-200\">\n          Erreurs de validation\n        </h4>\n        <ul class=\"list-inside list-disc text-sm text-red-700 dark:text-red-300\">\n          @for (error of combinedErrors() | keyvalue; track error.key) {\n            <li>\n              {{ error.value[0] }}\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Change Indicator -->\n@if (hasChanges()) {\n  <div\n    class=\"my-4 flex items-center gap-2 rounded border border-orange-200 bg-orange-50 p-3 dark:bg-orange-900/20\"\n  >\n    <i class=\"pi pi-info-circle text-orange-600 dark:text-orange-400\"></i>\n    <span class=\"text-sm text-orange-800 dark:text-orange-200\">\n      Modifications non sauvegard\u00E9es d\u00E9tect\u00E9es\n    </span>\n  </div>\n}\n", styles: [".inline-edit-cell{position:relative}.inline-edit-cell .edit-indicator{position:absolute;top:2px;right:2px;font-size:.65rem;opacity:0;transition:opacity .2s ease}.inline-edit-cell:hover .edit-indicator{opacity:.5}.cursor-pointer{cursor:pointer;transition:background-color .2s ease}.cursor-pointer:hover{background-color:#0000000d}:host-context(.dark-mode) .cursor-pointer:hover{background-color:#ffffff0d}.cursor-pointer:active{transform:scale(.98)}::ng-deep .p-datatable .p-datatable-thead>tr>th{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}::ng-deep .p-datatable .editing-row{background-color:rgba(var(--primary-500),.05);border-left:3px solid var(--primary-500)}::ng-deep .p-datatable .w-\\[120px\\]{width:120px;min-width:120px;max-width:120px}::ng-deep .p-datatable .w-20{width:5rem;min-width:5rem;max-width:5rem}::ng-deep .p-datatable .\\!text-end{text-align:right!important;justify-content:flex-end}.totals-section{background-color:rgba(var(--surface-0),.5);border-top:2px solid var(--surface-border);padding:1rem}.totals-section .totals-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;gap:1rem}.totals-section .totals-row.total-final{border-top:2px solid var(--primary-500);padding-top:.75rem;margin-top:.5rem;font-size:1.125rem;font-weight:700;color:var(--primary-500)}.totals-section .totals-label{color:var(--text-color-secondary);font-weight:600}.totals-section .totals-value{font-weight:600;font-variant-numeric:tabular-nums}.add-product-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--primary-500);text-decoration:none;transition:color .2s ease}.add-product-link:hover{color:var(--primary-700)}.add-product-link.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.add-product-link i{font-size:.75rem}.validation-message{padding:1rem;margin-bottom:1rem;border-radius:4px}.validation-message.error{background-color:rgba(var(--red-50),1);border:1px solid rgba(var(--red-200),1);color:var(--red-800)}:host-context(.dark-mode) .validation-message.error{background-color:rgba(var(--red-900),.2);color:var(--red-200)}.validation-message.error .icon{color:var(--red-600)}:host-context(.dark-mode) .validation-message.error .icon{color:var(--red-400)}.validation-message.warning{background-color:rgba(var(--orange-50),1);border:1px solid rgba(var(--orange-200),1);color:var(--orange-800)}:host-context(.dark-mode) .validation-message.warning{background-color:rgba(var(--orange-900),.2);color:var(--orange-200)}.validation-message.warning .icon{color:var(--orange-600)}:host-context(.dark-mode) .validation-message.warning .icon{color:var(--orange-400)}.validation-message.info{background-color:rgba(var(--blue-50),1);border:1px solid rgba(var(--blue-200),1);color:var(--blue-800)}:host-context(.dark-mode) .validation-message.info{background-color:rgba(var(--blue-900),.2);color:var(--blue-200)}.validation-message.info .icon{color:var(--blue-600)}:host-context(.dark-mode) .validation-message.info .icon{color:var(--blue-400)}::ng-deep .p-inputnumber-input.currency-input{text-align:right}::ng-deep .p-inputnumber.discount-input .p-inputnumber-input{text-align:right}@media(max-width:768px){::ng-deep .p-datatable{font-size:.875rem}::ng-deep .p-datatable .w-\\[120px\\]{width:100px;min-width:100px;max-width:100px}.totals-section{font-size:.875rem}.totals-section .totals-row.total-final{font-size:1rem}}@media(max-width:576px){::ng-deep .p-datatable .p-datatable-thead>tr>th{font-size:.7rem;padding:.5rem .25rem}::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:.5rem .25rem}}:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;border-radius:4px}@media(prefers-contrast:high){.cursor-pointer:hover{background-color:#0000001a}.validation-message{border-width:2px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media print{.add-product-link,.p-button,.inline-edit-cell:hover,.cursor-pointer{display:none!important}.validation-message{display:none}::ng-deep .p-datatable .p-datatable-thead>tr>th,::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:1px solid #000}}.loading-overlay{position:absolute;inset:0;background-color:#fffc;display:flex;align-items:center;justify-content:center;z-index:1000}:host-context(.dark-mode) .loading-overlay{background-color:#000c}.loading-overlay .spinner{width:3rem;height:3rem;border:3px solid var(--surface-border);border-top-color:var(--primary-500);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-color-secondary)}.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.3}.empty-state .empty-title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.empty-state .empty-message{font-size:.875rem;margin-bottom:1.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: true }] }, { type: i0.Output, args: ["orderChange"] }], products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: true }] }], customers: [{ type: i0.Input, args: [{ isSignal: true, alias: "customers", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], countGroupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "countGroupLabels", required: false }] }], productKeyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "productKeyField", required: false }] }], backendErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "backendErrors", required: false }] }], openCatalogue: [{ type: i0.Output, args: ["openCatalogue"] }], orderChanged: [{ type: i0.Output, args: ["orderChanged"] }], orderValidated: [{ type: i0.Output, args: ["orderValidated"] }], productsAdded: [{ type: i0.Output, args: ["productsAdded"] }] } });
 class EfProductCatalogueFilterComponent {
@@ -1863,10 +1863,10 @@ class EfProductCatalogueFilterComponent {
     shouldShowSearch(group) {
         return (group.children?.length || 0) > 5;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfProductCatalogueFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfProductCatalogueFilterComponent, isStandalone: true, selector: "ef-product-catalogue-filter", inputs: { categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, selectedFilters: { classPropertyName: "selectedFilters", publicName: "selectedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedFilters: "selectedFiltersChange", filtersChanged: "filtersChanged" }, ngImport: i0, template: "<div class=\"flex w-80 shrink-0 flex-col items-start justify-start sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto\">\n  <div\n    class=\"mb-4 flex flex-col items-start justify-center gap-2 self-stretch border-b border-surface-200 px-2 pb-4 dark:border-surface-700\"\n  >\n    <div class=\"flex items-center justify-between gap-2 self-stretch\">\n      <div\n        class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n      >\n        Filters\n      </div>\n      <p-button\n        size=\"small\"\n        severity=\"secondary\"\n        [text]=\"true\"\n        class=\"py-1! px-2! text-base! font-normal!\"\n        (clickEvent)=\"clearAllFilters()\"\n      >\n        <span pButtonLabel>\n          <i class=\"pi pi-eraser\"></i>\n          Clear\n        </span>\n      </p-button>\n    </div>\n    @if (selectedFilters().length > 0) {\n      <div\n        class=\"flex flex-wrap items-start justify-start gap-2 self-stretch\"\n      >\n        @for (filter of selectedFilters(); track filter.type + filter.code) {\n          <p-chip\n            [label]=\"filter.label\"\n            [removable]=\"true\"\n            size=\"small\"\n            class=\"h-auto rounded-full px-6\"\n            removeIcon=\"pi pi-times\"\n            (onRemove)=\"removeFilter(filter)\"\n          ></p-chip>\n        }\n      </div>\n    }\n  </div>\n\n  <p-accordion\n    [multiple]=\"true\"\n    [value]=\"expandedPanels()\"\n    class=\"w-full\"\n  >\n    @for (group of categoryGroups(); track group.code) {\n      @if (group.children && group.children.length > 0) {\n        <p-accordion-panel [value]=\"group.code\">\n          <p-accordion-header>\n            <span\n              class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n            >{{ group.label }}</span>\n          </p-accordion-header>\n          <p-accordion-content>\n            <div class=\"flex flex-col gap-4\">\n              @if (shouldShowSearch(group)) {\n                <p-iconfield iconPosition=\"left\" class=\"w-full\">\n                  <p-inputicon class=\"pi pi-search\"></p-inputicon>\n                  <input\n                    pInputText\n                    size=\"small\"\n                    [ngModel]=\"searchTerms()[group.code] || ''\"\n                    (ngModelChange)=\"updateSearchTerm(group.code, $event)\"\n                    [placeholder]=\"'Rechercher ' + group.label.toLowerCase()\"\n                    class=\"w-full\"\n                  />\n                </p-iconfield>\n              }\n\n              @for (item of getFilteredChildren(group); track item.code) {\n                <div class=\"flex items-center justify-between gap-2\">\n                  <div class=\"flex flex-1 items-center gap-2\">\n                    <p-checkbox\n                      size=\"small\"\n                      [inputId]=\"group.code + '_' + item.code\"\n                      [binary]=\"true\"\n                      [ngModel]=\"isFilterSelected(group.code, item.code)\"\n                      (ngModelChange)=\"toggleFilter(group, item)\"\n                    ></p-checkbox>\n                    @if (getColorClass(item)) {\n                      <div\n                        class=\"h-5 w-5 rounded-full\"\n                        [class]=\"getColorClass(item)\"\n                      ></div>\n                    }\n                    <ef-label\n                      [label]=\"item.label\"\n                      [for]=\"group.code + '_' + item.code\"\n                      styleClass=\"cursor-pointer text-base font-normal leading-tight text-surface-700 dark:text-surface-300\"\n                    />\n                  </div>\n                  @if (getItemCount(group.code, item.code) > 0) {\n                    <p-badge\n                      [value]=\"getItemCount(group.code, item.code)\"\n                      size=\"small\"\n                      class=\"rounded-xl! h-6! min-w-6!\"\n                      severity=\"secondary\"\n                    ></p-badge>\n                  }\n                </div>\n              }\n            </div>\n          </p-accordion-content>\n        </p-accordion-panel>\n      }\n    }\n  </p-accordion>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3$1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i1.ButtonLabel, selector: "[pButtonLabel]", inputs: ["ptButtonLabel", "pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i6$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProductCatalogueFilterComponent, isStandalone: true, selector: "ef-product-catalogue-filter", inputs: { categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, selectedFilters: { classPropertyName: "selectedFilters", publicName: "selectedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedFilters: "selectedFiltersChange", filtersChanged: "filtersChanged" }, ngImport: i0, template: "<div class=\"flex w-80 shrink-0 flex-col items-start justify-start sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto\">\n  <div\n    class=\"mb-4 flex flex-col items-start justify-center gap-2 self-stretch border-b border-surface-200 px-2 pb-4 dark:border-surface-700\"\n  >\n    <div class=\"flex items-center justify-between gap-2 self-stretch\">\n      <div\n        class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n      >\n        Filters\n      </div>\n      <p-button\n        size=\"small\"\n        severity=\"secondary\"\n        [text]=\"true\"\n        class=\"py-1! px-2! text-base! font-normal!\"\n        (clickEvent)=\"clearAllFilters()\"\n      >\n        <span pButtonLabel>\n          <i class=\"pi pi-eraser\"></i>\n          Clear\n        </span>\n      </p-button>\n    </div>\n    @if (selectedFilters().length > 0) {\n      <div\n        class=\"flex flex-wrap items-start justify-start gap-2 self-stretch\"\n      >\n        @for (filter of selectedFilters(); track filter.type + filter.code) {\n          <p-chip\n            [label]=\"filter.label\"\n            [removable]=\"true\"\n            size=\"small\"\n            class=\"h-auto rounded-full px-6\"\n            removeIcon=\"pi pi-times\"\n            (onRemove)=\"removeFilter(filter)\"\n          ></p-chip>\n        }\n      </div>\n    }\n  </div>\n\n  <p-accordion\n    [multiple]=\"true\"\n    [value]=\"expandedPanels()\"\n    class=\"w-full\"\n  >\n    @for (group of categoryGroups(); track group.code) {\n      @if (group.children && group.children.length > 0) {\n        <p-accordion-panel [value]=\"group.code\">\n          <p-accordion-header>\n            <span\n              class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n            >{{ group.label }}</span>\n          </p-accordion-header>\n          <p-accordion-content>\n            <div class=\"flex flex-col gap-4\">\n              @if (shouldShowSearch(group)) {\n                <p-iconfield iconPosition=\"left\" class=\"w-full\">\n                  <p-inputicon class=\"pi pi-search\"></p-inputicon>\n                  <input\n                    pInputText\n                    size=\"small\"\n                    [ngModel]=\"searchTerms()[group.code] || ''\"\n                    (ngModelChange)=\"updateSearchTerm(group.code, $event)\"\n                    [placeholder]=\"'Rechercher ' + group.label.toLowerCase()\"\n                    class=\"w-full\"\n                  />\n                </p-iconfield>\n              }\n\n              @for (item of getFilteredChildren(group); track item.code) {\n                <div class=\"flex items-center justify-between gap-2\">\n                  <div class=\"flex flex-1 items-center gap-2\">\n                    <p-checkbox\n                      size=\"small\"\n                      [inputId]=\"group.code + '_' + item.code\"\n                      [binary]=\"true\"\n                      [ngModel]=\"isFilterSelected(group.code, item.code)\"\n                      (ngModelChange)=\"toggleFilter(group, item)\"\n                    ></p-checkbox>\n                    @if (getColorClass(item)) {\n                      <div\n                        class=\"h-5 w-5 rounded-full\"\n                        [class]=\"getColorClass(item)\"\n                      ></div>\n                    }\n                    <ef-label\n                      [label]=\"item.label\"\n                      [for]=\"group.code + '_' + item.code\"\n                      styleClass=\"cursor-pointer text-base font-normal leading-tight text-surface-700 dark:text-surface-300\"\n                    />\n                  </div>\n                  @if (getItemCount(group.code, item.code) > 0) {\n                    <p-badge\n                      [value]=\"getItemCount(group.code, item.code)\"\n                      size=\"small\"\n                      class=\"rounded-xl! h-6! min-w-6!\"\n                      severity=\"secondary\"\n                    ></p-badge>\n                  }\n                </div>\n              }\n            </div>\n          </p-accordion-content>\n        </p-accordion-panel>\n      }\n    }\n  </p-accordion>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3$1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i1.ButtonLabel, selector: "[pButtonLabel]", inputs: ["ptButtonLabel", "pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i6$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfProductCatalogueFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-product-catalogue-filter', imports: [
                         FormsModule,
@@ -1992,8 +1992,8 @@ class EfQuantityStepperComponent {
     handleBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfQuantityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EfQuantityStepperComponent, isStandalone: true, selector: "ef-quantity-stepper", inputs: { value: "value", min: "min", max: "max", step: "step", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", locale: "locale", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfQuantityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: EfQuantityStepperComponent, isStandalone: true, selector: "ef-quantity-stepper", inputs: { value: "value", min: "min", max: "max", step: "step", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", locale: "locale", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EfQuantityStepperComponent),
@@ -2001,7 +2001,7 @@ class EfQuantityStepperComponent {
             },
         ], ngImport: i0, template: "<div\n  class=\"flex h-12 items-center text-center justify-center gap-2 rounded-full !border !border-gray-200 bg-gray-100 dark:bg-slate-500 p-2\"\n>\n  <ef-inputnumber\n    [(ngModel)]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [locale]=\"locale\"\n    [disabled]=\"disabled\"\n    [showButtons]=\"true\"\n    buttonLayout=\"horizontal\"\n    decrementButtonIcon=\"-\"\n    incrementButtonIcon=\"+\"\n    [pt]=\"ptConfig\"\n    (ngModelChange)=\"handleValueChange($event)\"\n    (blurEvent)=\"handleBlur()\"\n  >\n  </ef-inputnumber>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: EfInputNumberComponent, selector: "ef-inputnumber", inputs: ["label", "labelKey", "required", "value", "invalid", "disabled", "readonly", "format", "showButtons", "buttonLayout", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "prefix", "suffix", "currency", "currencyDisplay", "locale", "localeMatcher", "mode", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "allowEmpty", "inputId", "name", "placeholder", "placeholderKey", "inputSize", "size", "maxlength", "minlength", "pattern", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaRequired", "inputStyle", "inputStyleClass", "style", "styleClass", "showClear", "variant", "autofocus", "autocomplete", "fluid", "inline", "pt", "ptOptions", "dt", "unstyled"], outputs: ["inputEvent", "focusEvent", "blurEvent", "keyDownEvent", "clearEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfQuantityStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfQuantityStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-quantity-stepper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [EfInputNumberComponent, FormsModule], providers: [
                         {
@@ -2328,10 +2328,10 @@ class EfProductCatalogueComponent {
             return '';
         return (this.currencyPipe.transform(value, this.currencyCode(), 'symbol-narrow', '1.2-2') || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfProductCatalogueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfProductCatalogueComponent, isStandalone: true, selector: "ef-product-catalogue", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedItems: { classPropertyName: "initialSelectedItems", publicName: "initialSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, trackByField: { classPropertyName: "trackByField", publicName: "trackByField", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productsValidated: "productsValidated" }, queries: [{ propertyName: "productThumbnailTpl", first: true, predicate: ["productThumbnail"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sortMenu", first: true, predicate: ["sortMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [minFractionDigits]=\"4\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [minFractionDigits]=\"4\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--surface-200)!important}:host-context(.dark) .p-accordion-panel{border-bottom-color:var(--surface-700)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3$1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: EfQuantityStepperComponent, selector: "ef-quantity-stepper", inputs: ["value", "min", "max", "step", "minFractionDigits", "maxFractionDigits", "locale", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: EfProductCatalogueFilterComponent, selector: "ef-product-catalogue-filter", inputs: ["categoryGroups", "products", "selectedFilters"], outputs: ["selectedFiltersChange", "filtersChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProductCatalogueComponent, isStandalone: true, selector: "ef-product-catalogue", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedItems: { classPropertyName: "initialSelectedItems", publicName: "initialSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, trackByField: { classPropertyName: "trackByField", publicName: "trackByField", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productsValidated: "productsValidated" }, queries: [{ propertyName: "productThumbnailTpl", first: true, predicate: ["productThumbnail"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sortMenu", first: true, predicate: ["sortMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--surface-200)!important}:host-context(.dark) .p-accordion-panel{border-bottom-color:var(--surface-700)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3$1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: EfQuantityStepperComponent, selector: "ef-quantity-stepper", inputs: ["value", "min", "max", "step", "minFractionDigits", "maxFractionDigits", "locale", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: EfProductCatalogueFilterComponent, selector: "ef-product-catalogue-filter", inputs: ["categoryGroups", "products", "selectedFilters"], outputs: ["selectedFiltersChange", "filtersChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfProductCatalogueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-product-catalogue', imports: [
                         CommonModule,
@@ -2347,7 +2347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         EfQuantityStepperComponent,
                         EfProductCatalogueFilterComponent,
                         TranslateModule,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [minFractionDigits]=\"4\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [minFractionDigits]=\"4\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--surface-200)!important}:host-context(.dark) .p-accordion-panel{border-bottom-color:var(--surface-700)!important}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--surface-200)!important}:host-context(.dark) .p-accordion-panel{border-bottom-color:var(--surface-700)!important}\n"] }]
         }], propDecorators: { products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: false }] }], categoryGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryGroups", required: false }] }], initialSelectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedItems", required: false }] }], defaultFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFilters", required: false }] }], trackByField: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByField", required: false }] }], currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], productThumbnailTpl: [{ type: i0.ContentChild, args: ['productThumbnail', { isSignal: true }] }], sortMenu: [{
                 type: ViewChild,
                 args: ['sortMenu']
@@ -2415,10 +2415,10 @@ class EfDialogComponent {
             return;
         this.saveAction.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.4", type: EfDialogComponent, isStandalone: true, selector: "ef-dialog", inputs: { header: "header", headerKey: "headerKey", visible: ["visible", "visible", booleanAttribute], modal: ["modal", "modal", booleanAttribute], closable: ["closable", "closable", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], style: "style", styleClass: "styleClass", position: "position", appendTo: "appendTo", defaultActions: ["defaultActions", "defaultActions", booleanAttribute], saveLabelKey: "saveLabelKey", cancelLabelKey: "cancelLabelKey", saveLabel: "saveLabel", cancelLabel: "cancelLabel", saveIcon: "saveIcon", saveDisabled: ["saveDisabled", "saveDisabled", booleanAttribute], saveStyleClass: "saveStyleClass", cancelStyleClass: "cancelStyleClass" }, outputs: { visibleChange: "visibleChange", showEvent: "showEvent", hideEvent: "hideEvent", saveAction: "saveAction", cancelAction: "cancelAction" }, viewQueries: [{ propertyName: "defaultFooterTpl", first: true, predicate: ["defaultFooter"], descendants: true, static: true }], ngImport: i0, template: "<p-dialog\n  [header]=\"headerKey ? (headerKey | translate) : header\"\n  [visible]=\"visible\"\n  (visibleChange)=\"handleVisibleChange($event)\"\n  [modal]=\"modal\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [style]=\"style\"\n  [styleClass]=\"styleClass\"\n  [position]=\"position\"\n  [appendTo]=\"appendTo\"\n  [footerTemplate]=\"defaultActions ? defaultFooterTpl : null\"\n  (onShow)=\"handleShow()\"\n  (onHide)=\"handleHide()\"\n>\n  <ng-content />\n</p-dialog>\n\n<!-- Default action footer. Declared outside <p-dialog> because its <ng-template>\n     is a view child of ef-dialog, not a content child of <p-dialog>; we hand it\n     to <p-dialog> via the [footerTemplate] input above. -->\n<ng-template #defaultFooter>\n  <div class=\"flex justify-end gap-2\">\n    <ef-button\n      [labelKey]=\"cancelLabelKey\"\n      [label]=\"cancelLabel\"\n      [styleClass]=\"cancelStyleClass\"\n      (clickEvent)=\"onDefaultCancel()\"\n    />\n    <ef-button\n      [labelKey]=\"saveLabelKey\"\n      [label]=\"saveLabel\"\n      [icon]=\"saveIcon\"\n      [styleClass]=\"saveStyleClass\"\n      [disabled]=\"saveDisabled\"\n      (clickEvent)=\"onDefaultSave()\"\n    />\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$5.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: "ngmodule", type: TranslateModule }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.11", type: EfDialogComponent, isStandalone: true, selector: "ef-dialog", inputs: { header: "header", headerKey: "headerKey", visible: ["visible", "visible", booleanAttribute], modal: ["modal", "modal", booleanAttribute], closable: ["closable", "closable", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], style: "style", styleClass: "styleClass", position: "position", appendTo: "appendTo", defaultActions: ["defaultActions", "defaultActions", booleanAttribute], saveLabelKey: "saveLabelKey", cancelLabelKey: "cancelLabelKey", saveLabel: "saveLabel", cancelLabel: "cancelLabel", saveIcon: "saveIcon", saveDisabled: ["saveDisabled", "saveDisabled", booleanAttribute], saveStyleClass: "saveStyleClass", cancelStyleClass: "cancelStyleClass" }, outputs: { visibleChange: "visibleChange", showEvent: "showEvent", hideEvent: "hideEvent", saveAction: "saveAction", cancelAction: "cancelAction" }, viewQueries: [{ propertyName: "defaultFooterTpl", first: true, predicate: ["defaultFooter"], descendants: true, static: true }], ngImport: i0, template: "<p-dialog\n  [header]=\"headerKey ? (headerKey | translate) : header\"\n  [visible]=\"visible\"\n  (visibleChange)=\"handleVisibleChange($event)\"\n  [modal]=\"modal\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [style]=\"style\"\n  [styleClass]=\"styleClass\"\n  [position]=\"position\"\n  [appendTo]=\"appendTo\"\n  [footerTemplate]=\"defaultActions ? defaultFooterTpl : null\"\n  (onShow)=\"handleShow()\"\n  (onHide)=\"handleHide()\"\n>\n  <ng-content />\n</p-dialog>\n\n<!-- Default action footer. Declared outside <p-dialog> because its <ng-template>\n     is a view child of ef-dialog, not a content child of <p-dialog>; we hand it\n     to <p-dialog> via the [footerTemplate] input above. -->\n<ng-template #defaultFooter>\n  <div class=\"flex justify-end gap-2\">\n    <ef-button\n      [labelKey]=\"cancelLabelKey\"\n      [label]=\"cancelLabel\"\n      [styleClass]=\"cancelStyleClass\"\n      (clickEvent)=\"onDefaultCancel()\"\n    />\n    <ef-button\n      [labelKey]=\"saveLabelKey\"\n      [label]=\"saveLabel\"\n      [icon]=\"saveIcon\"\n      [styleClass]=\"saveStyleClass\"\n      [disabled]=\"saveDisabled\"\n      (clickEvent)=\"onDefaultSave()\"\n    />\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$5.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: "ngmodule", type: TranslateModule }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-dialog', standalone: true, imports: [DialogModule, TranslateModule, EfButtonComponent], template: "<p-dialog\n  [header]=\"headerKey ? (headerKey | translate) : header\"\n  [visible]=\"visible\"\n  (visibleChange)=\"handleVisibleChange($event)\"\n  [modal]=\"modal\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [style]=\"style\"\n  [styleClass]=\"styleClass\"\n  [position]=\"position\"\n  [appendTo]=\"appendTo\"\n  [footerTemplate]=\"defaultActions ? defaultFooterTpl : null\"\n  (onShow)=\"handleShow()\"\n  (onHide)=\"handleHide()\"\n>\n  <ng-content />\n</p-dialog>\n\n<!-- Default action footer. Declared outside <p-dialog> because its <ng-template>\n     is a view child of ef-dialog, not a content child of <p-dialog>; we hand it\n     to <p-dialog> via the [footerTemplate] input above. -->\n<ng-template #defaultFooter>\n  <div class=\"flex justify-end gap-2\">\n    <ef-button\n      [labelKey]=\"cancelLabelKey\"\n      [label]=\"cancelLabel\"\n      [styleClass]=\"cancelStyleClass\"\n      (clickEvent)=\"onDefaultCancel()\"\n    />\n    <ef-button\n      [labelKey]=\"saveLabelKey\"\n      [label]=\"saveLabel\"\n      [icon]=\"saveIcon\"\n      [styleClass]=\"saveStyleClass\"\n      [disabled]=\"saveDisabled\"\n      (clickEvent)=\"onDefaultSave()\"\n    />\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { header: [{
@@ -2765,10 +2765,10 @@ class EfBadgeComponent {
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfBadgeComponent, isStandalone: true, selector: "ef-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showDot: { classPropertyName: "showDot", publicName: "showDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"badgeClasses()\">\n  <!-- Dot indicator -->\n  @if (config().showDot) {\n    <span [class]=\"dotClasses()\"></span>\n  }\n\n  <!-- Icon -->\n  @if (config().icon) {\n    <i [class]=\"iconClasses()\"></i>\n  }\n\n  <!-- Label -->\n  @if (config().label) {\n    <span>{{ config().label }}</span>\n  }\n</span>\n", styles: [":host{display:inline-flex}.ef-badge{white-space:nowrap;transition:all .2s ease-in-out;cursor:pointer}.ef-badge:hover{transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfBadgeComponent, isStandalone: true, selector: "ef-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showDot: { classPropertyName: "showDot", publicName: "showDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"badgeClasses()\">\n  <!-- Dot indicator -->\n  @if (config().showDot) {\n    <span [class]=\"dotClasses()\"></span>\n  }\n\n  <!-- Icon -->\n  @if (config().icon) {\n    <i [class]=\"iconClasses()\"></i>\n  }\n\n  <!-- Label -->\n  @if (config().label) {\n    <span>{{ config().label }}</span>\n  }\n</span>\n", styles: [":host{display:inline-flex}.ef-badge{white-space:nowrap;transition:all .2s ease-in-out;cursor:pointer}.ef-badge:hover{transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-badge', standalone: true, imports: [CommonModule], template: "<span [class]=\"badgeClasses()\">\n  <!-- Dot indicator -->\n  @if (config().showDot) {\n    <span [class]=\"dotClasses()\"></span>\n  }\n\n  <!-- Icon -->\n  @if (config().icon) {\n    <i [class]=\"iconClasses()\"></i>\n  }\n\n  <!-- Label -->\n  @if (config().label) {\n    <span>{{ config().label }}</span>\n  }\n</span>\n", styles: [":host{display:inline-flex}.ef-badge{white-space:nowrap;transition:all .2s ease-in-out;cursor:pointer}.ef-badge:hover{transform:translateY(-1px)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDot", required: false }] }] } });
@@ -2865,10 +2865,10 @@ class EfToolbarComponent {
         const baseUrl = currentUrl.substring(0, currentUrl.indexOf('/details'));
         this.router.navigate([baseUrl]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfToolbarComponent, isStandalone: true, selector: "ef-toolbar", inputs: { context: "context", state: "state", disabled: "disabled", backButton: "backButton", deleteButton: "deleteButton", duplicateButton: "duplicateButton", saveButton: "saveButton", exportButton: "exportButton", printButton: "printButton", addButton: "addButton", clearButton: "clearButton", searchButton: "searchButton", showFreeSearchInput: "showFreeSearchInput" }, outputs: { back: "back", save: "save", delete: "delete", duplicate: "duplicate", print: "print", triggerCustoAction: "triggerCustoAction", add: "add", search: "search", clear: "clear" }, ngImport: i0, template: "<p-toolbar>\n  <ng-template #start>\n    <div class=\"flex items-center gap-3\">\n      @if (isDetailState || backButton) {\n        <ef-button\n          icon=\"pi pi-angle-left\"\n          severity=\"primary\"\n          styleClass=\"action-btn-text\"\n          tooltipKey=\"common.back\"\n          labelKey=\"common.back\"\n          size=\"small\"\n          (clickEvent)=\"backAction()\"\n        />\n      }\n      <!-- Custom content slot for start section (e.g., status badge) -->\n      <ng-content select=\"[toolbarStart]\" />\n    </div>\n  </ng-template>\n  <ng-template #center>\n    @if (showFreeSearchInput) {\n      <p-iconfield iconPosition=\"left\">\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          id=\"freeTextSearch\"\n          type=\"text\"\n          pInputText\n          [placeholder]=\"'common.search' | translate\"\n        />\n      </p-iconfield>\n    }\n  </ng-template>\n  <ng-template #end>\n    <!-- DETAIL state -->\n    <!-- Custom content slot for start section (e.g., status badge) -->\n    <ng-content select=\"[toolbarEnd]\" />\n    @if (isDetailState && isDuplicateMode) {\n      <span\n        class=\"duplicate-badge flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-700\"\n      >\n        <i class=\"pi pi-copy\"></i> {{ 'common.duplicate' | translate }}\n      </span>\n    }\n    @if (isDetailState && deleteButton && hasDeletePermission) {\n      <ef-button\n        icon=\"pi pi-trash\"\n        severity=\"danger\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.delete\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"deleteAction()\"\n      />\n    }\n    @if (isDetailState && printButton) {\n      <ef-button\n        icon=\"pi pi-print\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.print\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"printAction()\"\n      />\n    }\n    @if (\n      isDetailState &&\n      duplicateButton &&\n      hasDuplicatePermission &&\n      !isDuplicateMode\n    ) {\n      <ef-button\n        icon=\"pi pi-copy\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"left\"\n        tooltipKey=\"common.duplicate\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"duplicateAction()\"\n      />\n    }\n    @if (isDetailState && saveButton && hasWritePermission) {\n      <ef-button\n        icon=\"pi pi-save\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.save\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"saveAction()\"\n      />\n    }\n    <!-- SEARCH state -->\n    @if (isSearchState && exportButton && hasExportPermission) {\n      <ef-button\n        icon=\"pi pi-upload\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.export\"\n        size=\"small\"\n        (clickEvent)=\"exportAction()\"\n      />\n    }\n    @if (isSearchState && addButton && hasWritePermission) {\n      <ef-button\n        icon=\"pi pi-plus\"\n        severity=\"primary\"\n        styleClass=\"action-btn-text\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.add\"\n        labelKey=\"common.add\"\n        size=\"small\"\n        (clickEvent)=\"addAction()\"\n      />\n    }\n    @if (isSearchState && clearButton) {\n      <ef-button\n        icon=\"pi pi-filter-slash\"\n        severity=\"primary\"\n        styleClass=\"action-btn-text\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.clear_search_criteria\"\n        labelKey=\"common.clear\"\n        size=\"small\"\n        (clickEvent)=\"clearAction()\"\n      />\n    }\n    @if (isSearchState && searchButton && hasReadPermission) {\n      <ef-button\n        icon=\"pi pi-search\"\n        severity=\"primary\"\n        styleClass=\"action-btn-text\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.search\"\n        labelKey=\"common.search\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"searchAction()\"\n      />\n    }\n  </ng-template>\n</p-toolbar>\n", styles: [":host ::ng-deep .p-toolbar{padding:4px!important;border-radius:0;border-left:none;border-right:none;overflow:visible}:host ::ng-deep .p-toolbar-end{flex-wrap:wrap;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i1$6.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfToolbarComponent, isStandalone: true, selector: "ef-toolbar", inputs: { context: "context", state: "state", disabled: "disabled", backButton: "backButton", deleteButton: "deleteButton", duplicateButton: "duplicateButton", saveButton: "saveButton", exportButton: "exportButton", printButton: "printButton", addButton: "addButton", clearButton: "clearButton", searchButton: "searchButton", showFreeSearchInput: "showFreeSearchInput" }, outputs: { back: "back", save: "save", delete: "delete", duplicate: "duplicate", print: "print", triggerCustoAction: "triggerCustoAction", add: "add", search: "search", clear: "clear" }, ngImport: i0, template: "<p-toolbar>\n  <ng-template #start>\n    <div class=\"flex items-center gap-3\">\n      @if (isDetailState || backButton) {\n        <ef-button\n          icon=\"pi pi-angle-left\"\n          severity=\"primary\"\n          styleClass=\"action-btn-text\"\n          tooltipKey=\"common.back\"\n          labelKey=\"common.back\"\n          size=\"small\"\n          (clickEvent)=\"backAction()\"\n        />\n      }\n      <!-- Custom content slot for start section (e.g., status badge) -->\n      <ng-content select=\"[toolbarStart]\" />\n    </div>\n  </ng-template>\n  <ng-template #center>\n    @if (showFreeSearchInput) {\n      <p-iconfield iconPosition=\"left\">\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          id=\"freeTextSearch\"\n          type=\"text\"\n          pInputText\n          [placeholder]=\"'common.search' | translate\"\n        />\n      </p-iconfield>\n    }\n  </ng-template>\n  <ng-template #end>\n    <!-- DETAIL state -->\n    <!-- Custom content slot for start section (e.g., status badge) -->\n    <ng-content select=\"[toolbarEnd]\" />\n    @if (isDetailState && isDuplicateMode) {\n      <span\n        class=\"duplicate-badge flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-700\"\n      >\n        <i class=\"pi pi-copy\"></i> {{ 'common.duplicate' | translate }}\n      </span>\n    }\n    @if (isDetailState && deleteButton && hasDeletePermission) {\n      <ef-button\n        icon=\"pi pi-trash\"\n        severity=\"danger\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.delete\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"deleteAction()\"\n      />\n    }\n    @if (isDetailState && printButton) {\n      <ef-button\n        icon=\"pi pi-print\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.print\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"printAction()\"\n      />\n    }\n    @if (\n      isDetailState &&\n      duplicateButton &&\n      hasDuplicatePermission &&\n      !isDuplicateMode\n    ) {\n      <ef-button\n        icon=\"pi pi-copy\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"left\"\n        tooltipKey=\"common.duplicate\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"duplicateAction()\"\n      />\n    }\n    @if (isDetailState && saveButton && hasWritePermission) {\n      <ef-button\n        icon=\"pi pi-save\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.save\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"saveAction()\"\n      />\n    }\n    <!-- SEARCH state -->\n    @if (isSearchState && exportButton && hasExportPermission) {\n      <ef-button\n        icon=\"pi pi-upload\"\n        severity=\"primary\"\n        styleClass=\"action-btn\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.export\"\n        size=\"small\"\n        (clickEvent)=\"exportAction()\"\n      />\n    }\n    @if (isSearchState && addButton && hasWritePermission) {\n      <ef-button\n        icon=\"pi pi-plus\"\n        severity=\"primary\"\n        styleClass=\"action-btn-text\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.add\"\n        labelKey=\"common.add\"\n        size=\"small\"\n        (clickEvent)=\"addAction()\"\n      />\n    }\n    @if (isSearchState && clearButton) {\n      <ef-button\n        icon=\"pi pi-filter-slash\"\n        severity=\"primary\"\n        styleClass=\"action-btn-text\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.clear_search_criteria\"\n        labelKey=\"common.clear\"\n        size=\"small\"\n        (clickEvent)=\"clearAction()\"\n      />\n    }\n    @if (isSearchState && searchButton && hasReadPermission) {\n      <ef-button\n        icon=\"pi pi-search\"\n        severity=\"primary\"\n        styleClass=\"action-btn-text\"\n        tooltipPosition=\"top\"\n        tooltipKey=\"common.search\"\n        labelKey=\"common.search\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (clickEvent)=\"searchAction()\"\n      />\n    }\n  </ng-template>\n</p-toolbar>\n", styles: [":host ::ng-deep .p-toolbar{padding:4px!important;border-radius:0;border-left:none;border-right:none;overflow:visible}:host ::ng-deep .p-toolbar-end{flex-wrap:wrap;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i1$6.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-toolbar', standalone: true, imports: [
                         CommonModule,
@@ -2929,10 +2929,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 class EfBlockUiComponent {
     isLoading = false;
     contentPanel;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfBlockUiComponent, isStandalone: true, selector: "ef-block-ui", inputs: { isLoading: "isLoading", contentPanel: "contentPanel" }, ngImport: i0, template: "@if (isLoading) {\n  <p-blockUI\n    [target]=\"contentPanel\"\n    [blocked]=\"isLoading\"\n    styleClass=\"appBlockUI w-full h-full fixed top-0 left-0 right-0 flex items-start justify-center bg-black/30 z-20\">\n\n    <ng-template pTemplate=\"loader\">\n      <!-- Loader Container -->\n      <div class=\"mt-2 flex flex-row items-center space-x-4 rounded-lg bg-white px-4 py-2 shadow\">\n        <!-- Spinning Loader -->\n        <div class=\"h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent dark:border-primary-contrast dark:border-t-transparent\"></div>\n\n        <!-- Loading Text -->\n        <div id=\"loading-text\" class=\"font-normal text-primary dark:text-primary-contrast\">\n          Chargement en cours... !\n        </div>\n      </div>\n    </ng-template>\n  </p-blockUI>\n}\n", styles: [":host ::ng-deep .p-overlay-mask{background:#13111126!important}:host ::ng-deep .p-blockui-mask{border-radius:none!important}\n"], dependencies: [{ kind: "ngmodule", type: BlockUIModule }, { kind: "component", type: i1$7.BlockUI, selector: "p-blockUI, p-blockui, p-block-ui", inputs: ["target", "autoZIndex", "baseZIndex", "styleClass", "blocked"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfBlockUiComponent, isStandalone: true, selector: "ef-block-ui", inputs: { isLoading: "isLoading", contentPanel: "contentPanel" }, ngImport: i0, template: "@if (isLoading) {\n  <p-blockUI\n    [target]=\"contentPanel\"\n    [blocked]=\"isLoading\"\n    styleClass=\"appBlockUI w-full h-full fixed top-0 left-0 right-0 flex items-start justify-center bg-black/30 z-20\">\n\n    <ng-template pTemplate=\"loader\">\n      <!-- Loader Container -->\n      <div class=\"mt-2 flex flex-row items-center space-x-4 rounded-lg bg-white px-4 py-2 shadow\">\n        <!-- Spinning Loader -->\n        <div class=\"h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent dark:border-primary-contrast dark:border-t-transparent\"></div>\n\n        <!-- Loading Text -->\n        <div id=\"loading-text\" class=\"font-normal text-primary dark:text-primary-contrast\">\n          Chargement en cours... !\n        </div>\n      </div>\n    </ng-template>\n  </p-blockUI>\n}\n", styles: [":host ::ng-deep .p-overlay-mask{background:#13111126!important}:host ::ng-deep .p-blockui-mask{border-radius:none!important}\n"], dependencies: [{ kind: "ngmodule", type: BlockUIModule }, { kind: "component", type: i1$7.BlockUI, selector: "p-blockUI, p-blockui, p-block-ui", inputs: ["target", "autoZIndex", "baseZIndex", "styleClass", "blocked"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfBlockUiComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfBlockUiComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-block-ui', standalone: true, imports: [BlockUIModule], template: "@if (isLoading) {\n  <p-blockUI\n    [target]=\"contentPanel\"\n    [blocked]=\"isLoading\"\n    styleClass=\"appBlockUI w-full h-full fixed top-0 left-0 right-0 flex items-start justify-center bg-black/30 z-20\">\n\n    <ng-template pTemplate=\"loader\">\n      <!-- Loader Container -->\n      <div class=\"mt-2 flex flex-row items-center space-x-4 rounded-lg bg-white px-4 py-2 shadow\">\n        <!-- Spinning Loader -->\n        <div class=\"h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent dark:border-primary-contrast dark:border-t-transparent\"></div>\n\n        <!-- Loading Text -->\n        <div id=\"loading-text\" class=\"font-normal text-primary dark:text-primary-contrast\">\n          Chargement en cours... !\n        </div>\n      </div>\n    </ng-template>\n  </p-blockUI>\n}\n", styles: [":host ::ng-deep .p-overlay-mask{background:#13111126!important}:host ::ng-deep .p-blockui-mask{border-radius:none!important}\n"] }]
         }], propDecorators: { isLoading: [{
@@ -2954,10 +2954,10 @@ class EfBlockableDivComponent {
     get componentClass() {
         return this.cssClass;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfBlockableDivComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: EfBlockableDivComponent, isStandalone: true, selector: "ef-blockable-div", inputs: { style: "style", cssClass: "cssClass" }, host: { properties: { "style": "this.componentStyle", "class": "this.componentClass" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfBlockableDivComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: EfBlockableDivComponent, isStandalone: true, selector: "ef-blockable-div", inputs: { style: "style", cssClass: "cssClass" }, host: { properties: { "style": "this.componentStyle", "class": "this.componentClass" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfBlockableDivComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfBlockableDivComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ef-blockable-div',
@@ -3041,10 +3041,10 @@ class EfInputTextComponent {
     handleBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfInputTextComponent, isStandalone: true, selector: "ef-input-text", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", type: "type", maxlength: "maxlength", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], autocomplete: "autocomplete" }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <input\n    [id]=\"effectiveId\"\n    [type]=\"type\"\n    pInputText\n    [pSize]=\"size\"\n    [value]=\"value\"\n    (input)=\"handleInput($any($event.target).value)\"\n    (blur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [attr.maxlength]=\"maxlength\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfInputTextComponent, isStandalone: true, selector: "ef-input-text", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", type: "type", maxlength: "maxlength", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], autocomplete: "autocomplete" }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <input\n    [id]=\"effectiveId\"\n    [type]=\"type\"\n    pInputText\n    [pSize]=\"size\"\n    [value]=\"value\"\n    (input)=\"handleInput($any($event.target).value)\"\n    (blur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [attr.maxlength]=\"maxlength\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfInputTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-input-text', standalone: true, imports: [InputTextModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <input\n    [id]=\"effectiveId\"\n    [type]=\"type\"\n    pInputText\n    [pSize]=\"size\"\n    [value]=\"value\"\n    (input)=\"handleInput($any($event.target).value)\"\n    (blur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [attr.maxlength]=\"maxlength\"\n    [readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
@@ -3136,10 +3136,10 @@ class EfCheckboxComponent {
         this.onChange(this.binary ? event.checked : event.checked);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", value: "value", binary: ["binary", "binary", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "<p-checkbox\n  [inputId]=\"effectiveId\"\n  [name]=\"name\"\n  [ngModel]=\"checked\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [value]=\"value\"\n  [binary]=\"binary\"\n  [disabled]=\"disabled\"\n/>\n@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" styleClass=\"form-label-left\" />\n}\n@if (showRequired) {\n  <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n}\n@if (serverErrors; as errors) {\n  @for (error of errors; track error) {\n    <small class=\"text-danger block\">{{ error }}</small>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", value: "value", binary: ["binary", "binary", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "<p-checkbox\n  [inputId]=\"effectiveId\"\n  [name]=\"name\"\n  [ngModel]=\"checked\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [value]=\"value\"\n  [binary]=\"binary\"\n  [disabled]=\"disabled\"\n/>\n@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" styleClass=\"form-label-left\" />\n}\n@if (showRequired) {\n  <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n}\n@if (serverErrors; as errors) {\n  @for (error of errors; track error) {\n    <small class=\"text-danger block\">{{ error }}</small>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-checkbox', standalone: true, imports: [CheckboxModule, FormsModule, TranslateModule, EfLabelComponent], template: "<p-checkbox\n  [inputId]=\"effectiveId\"\n  [name]=\"name\"\n  [ngModel]=\"checked\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [value]=\"value\"\n  [binary]=\"binary\"\n  [disabled]=\"disabled\"\n/>\n@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" styleClass=\"form-label-left\" />\n}\n@if (showRequired) {\n  <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n}\n@if (serverErrors; as errors) {\n  @for (error of errors; track error) {\n    <small class=\"text-danger block\">{{ error }}</small>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
@@ -3227,10 +3227,10 @@ class EfPasswordComponent {
     handleBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfPasswordComponent, isStandalone: true, selector: "ef-password", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], toggleMask: ["toggleMask", "toggleMask", booleanAttribute], feedback: ["feedback", "feedback", booleanAttribute], autocomplete: "autocomplete" }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-password\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [toggleMask]=\"toggleMask\"\n    [feedback]=\"feedback\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i1$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPasswordComponent, isStandalone: true, selector: "ef-password", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], toggleMask: ["toggleMask", "toggleMask", booleanAttribute], feedback: ["feedback", "feedback", booleanAttribute], autocomplete: "autocomplete" }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-password\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [toggleMask]=\"toggleMask\"\n    [feedback]=\"feedback\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i1$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-password', standalone: true, imports: [PasswordModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-password\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [toggleMask]=\"toggleMask\"\n    [feedback]=\"feedback\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
@@ -3358,10 +3358,10 @@ class EfMultiSelectComponent {
         this.filteredOptions = this.options.filter((option) => Object.keys(filters).every(key => option[key] === filters[key]));
         this.selectedValues = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfMultiSelectComponent, isStandalone: true, selector: "ef-multi-select", inputs: { label: "label", labelKey: "labelKey", id: "id", name: "name", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", filteredOptions: "filteredOptions", maxSelectedLabels: "maxSelectedLabels", disabled: "disabled", display: "display", size: "size", selectionLimit: "selectionLimit", filters: "filters", placeholder: "placeholder", placeholderKey: "placeholderKey", showClear: ["showClear", "showClear", booleanAttribute], required: "required", inline: ["inline", "inline", booleanAttribute] }, outputs: { changeEvent: "changeEvent" }, host: { properties: { "class.ef-inline": "this.isInline", "class.ef-required": "this.isRequired" } }, usesOnChanges: true, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"id\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-multiSelect\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"effectivePlaceholder\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [ngModel]=\"selectedValues\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"onInternalModelChange($event)\"\n    (onClear)=\"handleClear()\"\n    [disabled]=\"disabled\"\n    [display]=\"display\"\n    [size]=\"size\"\n    [selectionLimit]=\"selectionLimit\"\n    [showClear]=\"showClear\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host:not(.ef-required) ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:var(--p-multiselect-border-color, #d1d5db)}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfMultiSelectComponent, isStandalone: true, selector: "ef-multi-select", inputs: { label: "label", labelKey: "labelKey", id: "id", name: "name", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", filteredOptions: "filteredOptions", maxSelectedLabels: "maxSelectedLabels", disabled: "disabled", display: "display", size: "size", selectionLimit: "selectionLimit", filters: "filters", placeholder: "placeholder", placeholderKey: "placeholderKey", showClear: ["showClear", "showClear", booleanAttribute], required: "required", inline: ["inline", "inline", booleanAttribute] }, outputs: { changeEvent: "changeEvent" }, host: { properties: { "class.ef-inline": "this.isInline", "class.ef-required": "this.isRequired" } }, usesOnChanges: true, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"id\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-multiSelect\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"effectivePlaceholder\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [ngModel]=\"selectedValues\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"onInternalModelChange($event)\"\n    (onClear)=\"handleClear()\"\n    [disabled]=\"disabled\"\n    [display]=\"display\"\n    [size]=\"size\"\n    [selectionLimit]=\"selectionLimit\"\n    [showClear]=\"showClear\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host:not(.ef-required) ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:var(--p-multiselect-border-color, #d1d5db)}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-multi-select', standalone: true, imports: [FormsModule, MultiSelectModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"id\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-multiSelect\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"effectivePlaceholder\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [ngModel]=\"selectedValues\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"onInternalModelChange($event)\"\n    (onClear)=\"handleClear()\"\n    [disabled]=\"disabled\"\n    [display]=\"display\"\n    [size]=\"size\"\n    [selectionLimit]=\"selectionLimit\"\n    [showClear]=\"showClear\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host:not(.ef-required) ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:var(--p-multiselect-border-color, #d1d5db)}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { changeEvent: [{
@@ -3454,10 +3454,10 @@ class EfSelectButtonComponent {
         this.onChange(event.value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfSelectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfSelectButtonComponent, isStandalone: true, selector: "ef-selectbutton", inputs: { label: "label", labelKey: "labelKey", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", multiple: ["multiple", "multiple", booleanAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], size: "size", styleClass: "styleClass" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }], ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" />\n}\n<p-selectbutton\n  [ngModel]=\"value\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue\"\n  [multiple]=\"multiple\"\n  [allowEmpty]=\"allowEmpty\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [styleClass]=\"styleClass\"\n>\n  @if (itemTemplate) {\n    <ng-template let-item pTemplate=\"item\">\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n    </ng-template>\n  }\n</p-selectbutton>\n", dependencies: [{ kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i1$9.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSelectButtonComponent, isStandalone: true, selector: "ef-selectbutton", inputs: { label: "label", labelKey: "labelKey", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", multiple: ["multiple", "multiple", booleanAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], size: "size", styleClass: "styleClass" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }], ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" />\n}\n<p-selectbutton\n  [ngModel]=\"value\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue\"\n  [multiple]=\"multiple\"\n  [allowEmpty]=\"allowEmpty\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [styleClass]=\"styleClass\"\n>\n  @if (itemTemplate) {\n    <ng-template let-item pTemplate=\"item\">\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n    </ng-template>\n  }\n</p-selectbutton>\n", dependencies: [{ kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i1$9.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfSelectButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-selectbutton', standalone: true, imports: [SelectButtonModule, FormsModule, TranslateModule, CommonModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" />\n}\n<p-selectbutton\n  [ngModel]=\"value\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue\"\n  [multiple]=\"multiple\"\n  [allowEmpty]=\"allowEmpty\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [styleClass]=\"styleClass\"\n>\n  @if (itemTemplate) {\n    <ng-template let-item pTemplate=\"item\">\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n    </ng-template>\n  }\n</p-selectbutton>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{
@@ -3587,10 +3587,10 @@ class EfDatatableActionBarComponent {
     deleteAction() {
         this.delete.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDatatableActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfDatatableActionBarComponent, isStandalone: true, selector: "ef-datatable-actionbar", inputs: { context: "context", state: "state", duplicateButton: "duplicateButton", editButton: "editButton", deleteButton: "deleteButton" }, outputs: { duplicate: "duplicate", edit: "edit", delete: "delete" }, ngImport: i0, template: "<div class=\"flex justify-end\" role=\"toolbar\" tabindex=\"0\" (click)=\"$event.stopPropagation()\" (keyup.enter)=\"$event.stopPropagation()\">\n  @if (duplicateButton) {\n    <ef-button\n      icon=\"pi pi-copy\"\n      severity=\"primary\"\n      styleClass=\"action-btn\"\n      tooltipKey=\"common.duplicate\"\n      (clickEvent)=\"duplicateAction()\" />\n  }\n  @if (editButton && hasEditPermission) {\n    <ef-button\n      icon=\"pi pi-pencil\"\n      severity=\"primary\"\n      styleClass=\"action-btn\"\n      size=\"small\"\n      tooltipKey=\"common.edit\"\n      (clickEvent)=\"editAction()\" />\n  }\n  @if (deleteButton && hasDeletePermission) {\n    <ef-button\n      icon=\"pi pi-trash\"\n      severity=\"primary\"\n      styleClass=\"action-btn\"\n      size=\"small\"\n      tooltipPosition=\"top\"\n      tooltipKey=\"common.delete\"\n      (clickEvent)=\"deleteAction()\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: TranslateModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatatableActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatatableActionBarComponent, isStandalone: true, selector: "ef-datatable-actionbar", inputs: { context: "context", state: "state", duplicateButton: "duplicateButton", editButton: "editButton", deleteButton: "deleteButton" }, outputs: { duplicate: "duplicate", edit: "edit", delete: "delete" }, ngImport: i0, template: "<div class=\"flex justify-end\" role=\"toolbar\" tabindex=\"0\" (click)=\"$event.stopPropagation()\" (keyup.enter)=\"$event.stopPropagation()\">\n  @if (duplicateButton) {\n    <ef-button\n      icon=\"pi pi-copy\"\n      severity=\"primary\"\n      styleClass=\"action-btn\"\n      tooltipKey=\"common.duplicate\"\n      (clickEvent)=\"duplicateAction()\" />\n  }\n  @if (editButton && hasEditPermission) {\n    <ef-button\n      icon=\"pi pi-pencil\"\n      severity=\"primary\"\n      styleClass=\"action-btn\"\n      size=\"small\"\n      tooltipKey=\"common.edit\"\n      (clickEvent)=\"editAction()\" />\n  }\n  @if (deleteButton && hasDeletePermission) {\n    <ef-button\n      icon=\"pi pi-trash\"\n      severity=\"primary\"\n      styleClass=\"action-btn\"\n      size=\"small\"\n      tooltipPosition=\"top\"\n      tooltipKey=\"common.delete\"\n      (clickEvent)=\"deleteAction()\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: TranslateModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDatatableActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatatableActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-datatable-actionbar', standalone: true, imports: [
                         EfButtonComponent,
@@ -3918,10 +3918,10 @@ class EfDatatableComponent {
     getFilters() {
         return this.pTable?.filters;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfDatatableComponent, isStandalone: true, selector: "ef-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, searchEntity: { classPropertyName: "searchEntity", publicName: "searchEntity", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, pt: { classPropertyName: "pt", publicName: "pt", isSignal: true, isRequired: false, transformFunction: null }, screenStateKey: { classPropertyName: "screenStateKey", publicName: "screenStateKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editRow: "editRow", deleteRow: "deleteRow", duplicateRow: "duplicateRow", lazyLoad: "lazyLoad", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "pTable", first: true, predicate: ["pTable"], descendants: true }], ngImport: i0, template: "<p-table #pTable\n  [value]=\"searchEntity()?.items || []\"\n  [columns]=\"processedColumns()\"\n  [dataKey]=\"mergedConfig.dataKey\"\n\n  [lazy]=\"mergedConfig.lazy\"\n  (onLazyLoad)=\"handleLazyLoad($event)\"\n\n  [paginator]=\"mergedConfig.paginator\"\n  [rows]=\"searchEntity()?.pagination?.pageSize || mergedConfig.rows\"\n  [rowsPerPageOptions]=\"mergedConfig.rowsPerPageOptions\"\n  [totalRecords]=\"searchEntity()?.totalCount || 0\"\n  [first]=\"searchEntity()?.pagination ? (searchEntity()!.pagination!.pageNumber - 1) * searchEntity()!.pagination!.pageSize : 0\"\n\n  [scrollable]=\"mergedConfig.scrollable\"\n  [scrollHeight]=\"mergedConfig.scrollHeight\"\n\n  [resizableColumns]=\"mergedConfig.resizableColumns\"\n  [columnResizeMode]=\"mergedConfig.columnResizeMode\"\n\n  [stateStorage]=\"mergedConfig.stateStorage\"\n  [stateKey]=\"mergedConfig.stateKey\"\n\n  [size]=\"mergedConfig.size\"\n  [class]=\"mergedConfig.styleClass\"\n  [tableStyle]=\"mergedConfig.tableStyle\"\n\n  [currentPageReportTemplate]=\"searchEntity()?.totalCount ? 'Affichage de {first} a {last} sur {totalRecords} entrees' : mergedConfig.emptyMessage\"\n  [showCurrentPageReport]=\"true\"\n  [sortField]=\"sortField()\"\n  [sortOrder]=\"sortOrder()\"\n  [loading]=\"loading()\"\n\n  [pt]=\"pt()\"\n\n  selectionMode=\"single\" [(selection)]=\"selectedItem\">\n\n  <!-- Header Template -->\n  <ng-template #header>\n    <tr>\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        @if (column.sortable && column.resizable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.sortable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.resizable) {\n          <th\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        } @else {\n          <th\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        }\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- Body Template -->\n  <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n    <tr (dblclick)=\"handleEdit(rowData)\" style=\"cursor: pointer\"\n      [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        <td [ngClass]=\"getAlignmentClass(column.align)\">\n          @if (column.template) {\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: rowData, column: column }\"></ng-container>\n          } @else {\n            {{ formatCellValue(rowData, column) }}\n          }\n        </td>\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}:host ::ng-deep .text-end{text-align:right!important}:host ::ng-deep .text-center{text-align:center!important}:host ::ng-deep .text-start{text-align:left!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDatatableActionBarComponent, selector: "ef-datatable-actionbar", inputs: ["context", "state", "duplicateButton", "editButton", "deleteButton"], outputs: ["duplicate", "edit", "delete"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatatableComponent, isStandalone: true, selector: "ef-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, searchEntity: { classPropertyName: "searchEntity", publicName: "searchEntity", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, pt: { classPropertyName: "pt", publicName: "pt", isSignal: true, isRequired: false, transformFunction: null }, screenStateKey: { classPropertyName: "screenStateKey", publicName: "screenStateKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editRow: "editRow", deleteRow: "deleteRow", duplicateRow: "duplicateRow", lazyLoad: "lazyLoad", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "pTable", first: true, predicate: ["pTable"], descendants: true }], ngImport: i0, template: "<p-table #pTable\n  [value]=\"searchEntity()?.items || []\"\n  [columns]=\"processedColumns()\"\n  [dataKey]=\"mergedConfig.dataKey\"\n\n  [lazy]=\"mergedConfig.lazy\"\n  (onLazyLoad)=\"handleLazyLoad($event)\"\n\n  [paginator]=\"mergedConfig.paginator\"\n  [rows]=\"searchEntity()?.pagination?.pageSize || mergedConfig.rows\"\n  [rowsPerPageOptions]=\"mergedConfig.rowsPerPageOptions\"\n  [totalRecords]=\"searchEntity()?.totalCount || 0\"\n  [first]=\"searchEntity()?.pagination ? (searchEntity()!.pagination!.pageNumber - 1) * searchEntity()!.pagination!.pageSize : 0\"\n\n  [scrollable]=\"mergedConfig.scrollable\"\n  [scrollHeight]=\"mergedConfig.scrollHeight\"\n\n  [resizableColumns]=\"mergedConfig.resizableColumns\"\n  [columnResizeMode]=\"mergedConfig.columnResizeMode\"\n\n  [stateStorage]=\"mergedConfig.stateStorage\"\n  [stateKey]=\"mergedConfig.stateKey\"\n\n  [size]=\"mergedConfig.size\"\n  [class]=\"mergedConfig.styleClass\"\n  [tableStyle]=\"mergedConfig.tableStyle\"\n\n  [currentPageReportTemplate]=\"searchEntity()?.totalCount ? 'Affichage de {first} a {last} sur {totalRecords} entrees' : mergedConfig.emptyMessage\"\n  [showCurrentPageReport]=\"true\"\n  [sortField]=\"sortField()\"\n  [sortOrder]=\"sortOrder()\"\n  [loading]=\"loading()\"\n\n  [pt]=\"pt()\"\n\n  selectionMode=\"single\" [(selection)]=\"selectedItem\">\n\n  <!-- Header Template -->\n  <ng-template #header>\n    <tr>\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        @if (column.sortable && column.resizable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.sortable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.resizable) {\n          <th\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        } @else {\n          <th\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        }\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- Body Template -->\n  <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n    <tr (dblclick)=\"handleEdit(rowData)\" style=\"cursor: pointer\"\n      [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        <td [ngClass]=\"getAlignmentClass(column.align)\">\n          @if (column.template) {\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: rowData, column: column }\"></ng-container>\n          } @else {\n            {{ formatCellValue(rowData, column) }}\n          }\n        </td>\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}:host ::ng-deep .text-end{text-align:right!important}:host ::ng-deep .text-center{text-align:center!important}:host ::ng-deep .text-start{text-align:left!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDatatableActionBarComponent, selector: "ef-datatable-actionbar", inputs: ["context", "state", "duplicateButton", "editButton", "deleteButton"], outputs: ["duplicate", "edit", "delete"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfDatatableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatatableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-datatable', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -4131,8 +4131,8 @@ class EfThemeConfiguratorComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfThemeConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfThemeConfiguratorComponent, isStandalone: true, selector: "ef-theme-configurator", inputs: { primaryLabelKey: "primaryLabelKey", surfaceLabelKey: "surfaceLabelKey", presetLabelKey: "presetLabelKey", rippleLabelKey: "rippleLabelKey", rtlLabelKey: "rtlLabelKey", presetsDisplayNameKeys: "presetsDisplayNameKeys" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfThemeConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfThemeConfiguratorComponent, isStandalone: true, selector: "ef-theme-configurator", inputs: { primaryLabelKey: "primaryLabelKey", surfaceLabelKey: "surfaceLabelKey", presetLabelKey: "presetLabelKey", rippleLabelKey: "rippleLabelKey", rtlLabelKey: "rtlLabelKey", presetsDisplayNameKeys: "presetsDisplayNameKeys" }, ngImport: i0, template: `
         <div class="config-panel-content">
             <div class="config-panel-colors">
                 <span class="config-panel-label">{{ primaryLabelKey | translate }}</span>
@@ -4200,7 +4200,7 @@ class EfThemeConfiguratorComponent {
         </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfThemeConfiguratorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfThemeConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ef-theme-configurator',
@@ -4359,10 +4359,10 @@ class EfEmailMetricsCardComponent {
             return 'neutral';
         return 'warn';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfEmailMetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EfEmailMetricsCardComponent, isStandalone: true, selector: "ef-email-metrics-card", inputs: { metrics: { classPropertyName: "metrics", publicName: "metrics", isSignal: true, isRequired: false, transformFunction: null }, recentEvents: { classPropertyName: "recentEvents", publicName: "recentEvents", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<p-card styleClass=\"ef-email-metrics-card\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"ef-email-metrics-card__header\">\n      <div>\n        <h3 class=\"ef-email-metrics-card__title\">{{ title() }}</h3>\n        @if (metrics(); as m) {\n          <p class=\"ef-email-metrics-card__subtitle\">\n            {{ m.from | date: 'dd MMM' }} \u2013 {{ m.to | date: 'dd MMM yyyy' }}\n          </p>\n        }\n      </div>\n      <p-selectButton\n        [options]=\"rangeOptions\"\n        [(ngModel)]=\"selectedRange\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        styleClass=\"ef-email-metrics-card__range\"\n        (onChange)=\"onRangeChange($event.value)\"\n      />\n    </div>\n  </ng-template>\n\n  @if (metrics(); as m) {\n    <div class=\"ef-email-metrics-card__kpis\">\n      @for (kpi of kpis(); track kpi.label) {\n        <div class=\"ef-email-metrics-card__kpi\" [attr.data-tone]=\"kpi.tone\">\n          <span class=\"ef-email-metrics-card__kpi-label\">{{ kpi.label }}</span>\n          <span class=\"ef-email-metrics-card__kpi-value\">\n            @if (kpi.rate) {\n              {{ kpi.value | number: '1.1-1' : 'fr' }}\n              <span class=\"ef-email-metrics-card__kpi-unit\">%</span>\n            } @else {\n              {{ kpi.value | number: '1.0-0' : 'fr' }}\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (m.categories.length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">Par cat\u00E9gorie</h4>\n        <p-table [value]=\"m.categories\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"180px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Cat\u00E9gorie</th>\n              <th class=\"ef-email-metrics-card__num\">Envoy\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Ouverts</th>\n              <th class=\"ef-email-metrics-card__num\">Cliqu\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Rebonds</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__category\">{{ row.category }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.sent }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.opened }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.clicked }}</td>\n              <td class=\"ef-email-metrics-card__num\" [class.ef-email-metrics-card__num--danger]=\"row.bounced > 0\">{{ row.bounced }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n\n    @if (recentEvents().length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">\u00C9v\u00E9nements r\u00E9cents</h4>\n        <p-table [value]=\"recentEvents()\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"240px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Quand</th>\n              <th>Destinataire</th>\n              <th>Cat\u00E9gorie</th>\n              <th>Type</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__when\">{{ row.occurredAt | date: 'dd/MM HH:mm' }}</td>\n              <td class=\"ef-email-metrics-card__recipient\">{{ row.recipient }}</td>\n              <td>{{ row.category || '\u2014' }}</td>\n              <td>\n                <p-tag [severity]=\"kindSeverity(row.kind)\" [value]=\"row.kind\" styleClass=\"ef-email-metrics-card__kind\" />\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n  } @else {\n    <div class=\"ef-email-metrics-card__empty\">\n      <p-button label=\"Aucune donn\u00E9e encore\" [text]=\"true\" icon=\"pi pi-envelope\" [disabled]=\"true\" />\n    </div>\n  }\n</p-card>\n", styles: [":host{display:block}.ef-email-metrics-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem 0;flex-wrap:wrap}.ef-email-metrics-card__title{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--p-text-color)}.ef-email-metrics-card__subtitle{margin:.15rem 0 0;font-size:.8125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__range :global(.p-selectbutton){border-radius:999px}.ef-email-metrics-card__range :global(.p-selectbutton .p-button){border-radius:999px;padding:.25rem .75rem;font-size:.75rem}.ef-email-metrics-card__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;padding:1rem 0}.ef-email-metrics-card__kpi{display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem;border-radius:12px;background:var(--p-surface-50, #f8fafc);border:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__kpi[data-tone=good]{background:color-mix(in srgb,var(--p-green-500, #10b981) 8%,transparent);border-color:color-mix(in srgb,var(--p-green-500, #10b981) 25%,transparent)}.ef-email-metrics-card__kpi[data-tone=warn]{background:color-mix(in srgb,var(--p-orange-500, #f97316) 8%,transparent);border-color:color-mix(in srgb,var(--p-orange-500, #f97316) 25%,transparent)}.ef-email-metrics-card__kpi-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--p-text-muted-color)}.ef-email-metrics-card__kpi-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--p-text-color)}.ef-email-metrics-card__kpi-unit{font-size:.875rem;font-weight:500;margin-left:.125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__section{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__section-title{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:var(--p-text-color)}.ef-email-metrics-card__table{font-size:.8125rem}.ef-email-metrics-card__num{text-align:right;font-variant-numeric:tabular-nums}.ef-email-metrics-card__num--danger{color:var(--p-red-600, #dc2626);font-weight:600}.ef-email-metrics-card__category{text-transform:capitalize;font-weight:500}.ef-email-metrics-card__recipient{font-family:JetBrains Mono,ui-monospace,monospace;font-size:.75rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__when{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.ef-email-metrics-card__kind{border-radius:999px;padding:.1rem .6rem;font-size:.7rem;letter-spacing:.02em}.ef-email-metrics-card__empty{padding:2rem 1.25rem;text-align:center;color:var(--p-text-muted-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i1$9.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }, { kind: "pipe", type: i8.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfEmailMetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfEmailMetricsCardComponent, isStandalone: true, selector: "ef-email-metrics-card", inputs: { metrics: { classPropertyName: "metrics", publicName: "metrics", isSignal: true, isRequired: false, transformFunction: null }, recentEvents: { classPropertyName: "recentEvents", publicName: "recentEvents", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<p-card styleClass=\"ef-email-metrics-card\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"ef-email-metrics-card__header\">\n      <div>\n        <h3 class=\"ef-email-metrics-card__title\">{{ title() }}</h3>\n        @if (metrics(); as m) {\n          <p class=\"ef-email-metrics-card__subtitle\">\n            {{ m.from | date: 'dd MMM' }} \u2013 {{ m.to | date: 'dd MMM yyyy' }}\n          </p>\n        }\n      </div>\n      <p-selectButton\n        [options]=\"rangeOptions\"\n        [(ngModel)]=\"selectedRange\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        styleClass=\"ef-email-metrics-card__range\"\n        (onChange)=\"onRangeChange($event.value)\"\n      />\n    </div>\n  </ng-template>\n\n  @if (metrics(); as m) {\n    <div class=\"ef-email-metrics-card__kpis\">\n      @for (kpi of kpis(); track kpi.label) {\n        <div class=\"ef-email-metrics-card__kpi\" [attr.data-tone]=\"kpi.tone\">\n          <span class=\"ef-email-metrics-card__kpi-label\">{{ kpi.label }}</span>\n          <span class=\"ef-email-metrics-card__kpi-value\">\n            @if (kpi.rate) {\n              {{ kpi.value | number: '1.1-1' : 'fr' }}\n              <span class=\"ef-email-metrics-card__kpi-unit\">%</span>\n            } @else {\n              {{ kpi.value | number: '1.0-0' : 'fr' }}\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (m.categories.length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">Par cat\u00E9gorie</h4>\n        <p-table [value]=\"m.categories\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"180px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Cat\u00E9gorie</th>\n              <th class=\"ef-email-metrics-card__num\">Envoy\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Ouverts</th>\n              <th class=\"ef-email-metrics-card__num\">Cliqu\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Rebonds</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__category\">{{ row.category }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.sent }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.opened }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.clicked }}</td>\n              <td class=\"ef-email-metrics-card__num\" [class.ef-email-metrics-card__num--danger]=\"row.bounced > 0\">{{ row.bounced }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n\n    @if (recentEvents().length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">\u00C9v\u00E9nements r\u00E9cents</h4>\n        <p-table [value]=\"recentEvents()\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"240px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Quand</th>\n              <th>Destinataire</th>\n              <th>Cat\u00E9gorie</th>\n              <th>Type</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__when\">{{ row.occurredAt | date: 'dd/MM HH:mm' }}</td>\n              <td class=\"ef-email-metrics-card__recipient\">{{ row.recipient }}</td>\n              <td>{{ row.category || '\u2014' }}</td>\n              <td>\n                <p-tag [severity]=\"kindSeverity(row.kind)\" [value]=\"row.kind\" styleClass=\"ef-email-metrics-card__kind\" />\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n  } @else {\n    <div class=\"ef-email-metrics-card__empty\">\n      <p-button label=\"Aucune donn\u00E9e encore\" [text]=\"true\" icon=\"pi pi-envelope\" [disabled]=\"true\" />\n    </div>\n  }\n</p-card>\n", styles: [":host{display:block}.ef-email-metrics-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem 0;flex-wrap:wrap}.ef-email-metrics-card__title{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--p-text-color)}.ef-email-metrics-card__subtitle{margin:.15rem 0 0;font-size:.8125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__range :global(.p-selectbutton){border-radius:999px}.ef-email-metrics-card__range :global(.p-selectbutton .p-button){border-radius:999px;padding:.25rem .75rem;font-size:.75rem}.ef-email-metrics-card__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;padding:1rem 0}.ef-email-metrics-card__kpi{display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem;border-radius:12px;background:var(--p-surface-50, #f8fafc);border:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__kpi[data-tone=good]{background:color-mix(in srgb,var(--p-green-500, #10b981) 8%,transparent);border-color:color-mix(in srgb,var(--p-green-500, #10b981) 25%,transparent)}.ef-email-metrics-card__kpi[data-tone=warn]{background:color-mix(in srgb,var(--p-orange-500, #f97316) 8%,transparent);border-color:color-mix(in srgb,var(--p-orange-500, #f97316) 25%,transparent)}.ef-email-metrics-card__kpi-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--p-text-muted-color)}.ef-email-metrics-card__kpi-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--p-text-color)}.ef-email-metrics-card__kpi-unit{font-size:.875rem;font-weight:500;margin-left:.125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__section{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__section-title{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:var(--p-text-color)}.ef-email-metrics-card__table{font-size:.8125rem}.ef-email-metrics-card__num{text-align:right;font-variant-numeric:tabular-nums}.ef-email-metrics-card__num--danger{color:var(--p-red-600, #dc2626);font-weight:600}.ef-email-metrics-card__category{text-transform:capitalize;font-weight:500}.ef-email-metrics-card__recipient{font-family:JetBrains Mono,ui-monospace,monospace;font-size:.75rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__when{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.ef-email-metrics-card__kind{border-radius:999px;padding:.1rem .6rem;font-size:.7rem;letter-spacing:.02em}.ef-email-metrics-card__empty{padding:2rem 1.25rem;text-align:center;color:var(--p-text-muted-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i1$9.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }, { kind: "pipe", type: i8.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EfEmailMetricsCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfEmailMetricsCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-email-metrics-card', standalone: true, imports: [
                         CommonModule,