npm - tickera-angular-components - Versions diffs - 0.0.1-dev.147 → 0.0.1-dev.149 - Mend

tickera-angular-components 0.0.1-dev.147 → 0.0.1-dev.149

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 (4) hide show

package/fesm2022/tickera-angular-components.mjs +79 -55
package/fesm2022/tickera-angular-components.mjs.map +1 -1
package/index.d.ts +7 -2
package/package.json +1 -1

package/fesm2022/tickera-angular-components.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, PLATFORM_ID, Inject, Injectable, signal, LOCALE_ID, computed, inject, EventEmitter, Input, Output, Component, ViewEncapsulation, HostListener, Self, Optional, Injector, forwardRef, effect, untracked, ViewChild } from '@angular/core';
-import * as i1$3 from '@jsverse/transloco';
+import * as i2 from '@jsverse/transloco';
 import { provideTransloco, TranslocoModule, TranslocoService } from '@jsverse/transloco';
 import { from, throwError, BehaviorSubject, Subject, of, takeUntil as takeUntil$1 } from 'rxjs';
 import * as i1$1 from '@angular/common';
@@ -4265,11 +4265,11 @@ class AppButtonComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { disabled: "disabled", loading: "loading", type: "type", variant: "variant", text: "text", size: "size", loadingText: "loadingText", icon: "icon", tooltip: "tooltip" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppButtonComponent, isStandalone: true, selector: "app-button", inputs: { disabled: "disabled", loading: "loading", type: "type", variant: "variant", text: "text", size: "size", loadingText: "loadingText", icon: "icon", tooltip: "tooltip" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#fff}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule, TippyDirective], template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule, TippyDirective], template: "<button\n  [type]=\"type\"\n  [disabled]=\"loading || disabled\"\n  [class]=\"buttonClasses\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n  (click)=\"handleClick()\"\n>\n  @if (icon && !loading) {\n    <i class=\"btn-icon\" [ngClass]=\"icon\"></i>\n  }\n\n  @if (loading) {\n    <i class=\"btn-icon btn-icon-spin ri-refresh-line\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</button>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#fff}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { clicked: [{
                 type: Output
             }], disabled: [{
@@ -4316,11 +4316,11 @@ class AppLinkButtonComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppLinkButtonComponent, isStandalone: true, selector: "app-link-button", inputs: { disabled: "disabled", loading: "loading", target: "target", text: "text", icon: "icon", loadingText: "loadingText", route: "route", queryParams: "queryParams", size: "size", variant: "variant", tooltip: "tooltip" }, ngImport: i0, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AppLinkButtonComponent, isStandalone: true, selector: "app-link-button", inputs: { disabled: "disabled", loading: "loading", target: "target", text: "text", icon: "icon", loadingText: "loadingText", route: "route", queryParams: "queryParams", size: "size", variant: "variant", tooltip: "tooltip" }, ngImport: i0, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#fff}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AppLinkButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-link-button', standalone: true, imports: [CommonModule, RouterLink, RouterModule, TranslocoModule, TippyDirective], encapsulation: ViewEncapsulation.None, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#14532d}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'app-link-button', standalone: true, imports: [CommonModule, RouterLink, RouterModule, TranslocoModule, TippyDirective], encapsulation: ViewEncapsulation.None, template: "<a\n  class=\"{{ buttonClasses }}\"\n  [routerLink]=\"!disabled ? route : null\"\n  [queryParams]=\"queryParams\"\n  [target]=\"target\"\n  [tp]=\"tooltip\"\n  [tpIsEnabled]=\"!!tooltip\"\n>\n  @if (icon) {\n    <i [class]=\"icon\"></i>\n  }\n\n  {{ loading ? loadingText : text }}\n</a>\n", styles: [".btn{width:100%;cursor:pointer;display:flex;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:.375rem;box-shadow:none;font-weight:500;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background-color:#dc2626;color:#fff}.btn-primary:hover:not(:disabled){background-color:#b91c1c}.btn-secondary{background-color:#7c3aed;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#6d28d9}.btn-tertiary{background-color:#6b7280;color:#fff}.btn-tertiary:hover:not(:disabled){background-color:#4b5563}.btn-success{background-color:#16a34a;color:#fff}.btn-success:hover:not(:disabled){background-color:#15803d}.btn-transparent{background-color:transparent;color:#374151}.btn-transparent:hover:not(:disabled){background-color:#f3f4f6}@media(prefers-color-scheme:dark){.btn-transparent{color:#d1d5db}.btn-transparent:hover:not(:disabled){background-color:#1f2937}}.btn-xs{font-size:.75rem;padding:.25rem .5rem}.btn-sm{font-size:.875rem;padding:.5rem 1rem}.btn-md{font-size:1rem;padding:.75rem 1.5rem}.btn-lg{font-size:1.125rem;padding:1rem 2rem}.btn-disabled,.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], loading: [{
@@ -4590,7 +4590,7 @@ class FormInputComponent {
         }
         return baseClasses;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormInputComponent, isStandalone: true, selector: "form-input", inputs: { label: "label", type: "type", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", maxlength: "maxlength", minlength: "minlength", max: "max", min: "min", step: "step", pattern: "pattern", fieldGroupClass: "fieldGroupClass", autocomplete: "autocomplete" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"form-input-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"form-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [type]=\"type\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [minlength]=\"minlength\"\n      [maxlength]=\"maxlength\"\n      [pattern]=\"pattern || ''\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [class.disabled]=\"readonly\"\n      [class.error]=\"showError\"\n      class=\"form-input\"\n      [autocomplete]=\"autocomplete\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n    />\n  </div>\n\n  @if (showError) {\n    <div class=\"form-input-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".form-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-input-label{color:#d1d5db}}.form-input{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;outline:0;padding:.375rem .75rem;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{border-color:#1f2937}.form-input.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.form-input.error{background-color:#374151;outline-color:#ef4444}}.form-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.form-input.disabled{background-color:#374151;color:#d1d5db}}@media screen and (min-width:768px){.form-input{font-size:.875rem}}.form-input-required{color:#ef4444}.form-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormInputComponent, decorators: [{
@@ -4600,7 +4600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i1$3.TranslocoService }], propDecorators: { label: [{
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -4674,8 +4674,8 @@ class DeleteConfirmationComponent {
         this.deleteConfirmationForm.reset();
         this.deleteConfirmationService.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, deps: [{ token: i1$2.FormBuilder }, { token: DeleteConfirmationService }, { token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"title\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n    [interactiveClose]=\"false\"\n  >\n    <form\n      [formGroup]=\"deleteConfirmationForm\"\n      method=\"POST\"\n      class=\"delete-confirmation-content\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <app-alert\n        type=\"warning\"\n        [text]=\"'deleteConfirmation.warning' | transloco\"\n        size=\"sm\"\n        [closeable]=\"false\"\n      />\n\n      <p class=\"delete-confirmation-instructions\">\n        {{ 'deleteConfirmation.instructions' | transloco }}\n\n        <span class=\"delete-confirmation-highlight\">\n          {{ confirmationText }}\n        </span>\n      </p>\n\n      <form-input\n        name=\"confirmationText\"\n        type=\"text\"\n        class=\"delete-confirmation-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirmationText\"\n        [placeholder]=\"\n          transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n        \"\n      />\n\n      <div class=\"delete-confirmation-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'deleteConfirmation.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'deleteConfirmation.delete' | transloco\"\n          [disabled]=\"!isConfirmationValid\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, deps: [{ token: i1$2.FormBuilder }, { token: DeleteConfirmationService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"title\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n    [interactiveClose]=\"false\"\n  >\n    <form\n      [formGroup]=\"deleteConfirmationForm\"\n      method=\"POST\"\n      class=\"delete-confirmation-content\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <app-alert\n        type=\"warning\"\n        [text]=\"'deleteConfirmation.warning' | transloco\"\n        size=\"sm\"\n        [closeable]=\"false\"\n      />\n\n      <p class=\"delete-confirmation-instructions\">\n        {{ 'deleteConfirmation.instructions' | transloco }}\n\n        <span class=\"delete-confirmation-highlight\">\n          {{ confirmationText }}\n        </span>\n      </p>\n\n      <form-input\n        name=\"confirmationText\"\n        type=\"text\"\n        class=\"delete-confirmation-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirmationText\"\n        [placeholder]=\"\n          transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n        \"\n      />\n\n      <div class=\"delete-confirmation-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'deleteConfirmation.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'deleteConfirmation.delete' | transloco\"\n          [disabled]=\"!isConfirmationValid\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, decorators: [{
             type: Component,
@@ -4688,7 +4688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AppModalComponent,
                         AppAlertComponent,
                     ], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"title\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n    [interactiveClose]=\"false\"\n  >\n    <form\n      [formGroup]=\"deleteConfirmationForm\"\n      method=\"POST\"\n      class=\"delete-confirmation-content\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <app-alert\n        type=\"warning\"\n        [text]=\"'deleteConfirmation.warning' | transloco\"\n        size=\"sm\"\n        [closeable]=\"false\"\n      />\n\n      <p class=\"delete-confirmation-instructions\">\n        {{ 'deleteConfirmation.instructions' | transloco }}\n\n        <span class=\"delete-confirmation-highlight\">\n          {{ confirmationText }}\n        </span>\n      </p>\n\n      <form-input\n        name=\"confirmationText\"\n        type=\"text\"\n        class=\"delete-confirmation-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirmationText\"\n        [placeholder]=\"\n          transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n        \"\n      />\n\n      <div class=\"delete-confirmation-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'deleteConfirmation.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'deleteConfirmation.delete' | transloco\"\n          [disabled]=\"!isConfirmationValid\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: DeleteConfirmationService }, { type: i1$3.TranslocoService }] });
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: DeleteConfirmationService }, { type: i2.TranslocoService }] });
 class AppBadgeComponent {
     text = '';
@@ -4857,7 +4857,7 @@ class TextExpandableComponent {
         this.expanded = !this.expanded;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextExpandableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TextExpandableComponent, isStandalone: true, selector: "text-expandable", inputs: { text: "text", maxLength: "maxLength", fontSize: "fontSize", allowHtml: "allowHtml", maxLines: "maxLines" }, usesOnChanges: true, ngImport: i0, template: "@if (allowHtml) {\n  <div class=\"text-expandable__html\" [ngClass]=\"`text-expandable__html--font-size-${fontSize}`\">\n    <div\n      class=\"text-expandable__html__content\"\n      [class.text-expandable__html__content--clamped]=\"truncated && !expanded\"\n      [style.--text-expandable-lines]=\"lines\"\n      [innerHTML]=\"text\"\n    ></div>\n\n    @if (truncated) {\n      <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n        {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n      </button>\n    }\n  </div>\n} @else {\n  <p\n    class=\"text-expandable__paragraph\"\n    [ngClass]=\"`text-expandable__paragraph--font-size-${fontSize}`\"\n  >\n    {{ visibleText }}\n\n    @if (truncated) {\n      <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n        {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n      </button>\n    }\n  </p>\n}\n", styles: [".text-expandable__paragraph{line-height:1.625}.text-expandable__paragraph--font-size-xs{font-size:.75rem}.text-expandable__paragraph--font-size-sm{font-size:.875rem}.text-expandable__paragraph--font-size-base{font-size:1rem}.text-expandable__paragraph--font-size-lg{font-size:1.125rem}.text-expandable__paragraph--font-size-xl{font-size:1.25rem}.text-expandable__paragraph--font-size-2xl{font-size:1.5rem}.text-expandable__paragraph--font-size-3xl{font-size:1.875rem}.text-expandable__paragraph--font-size-4xl{font-size:2.25rem}.text-expandable__paragraph--font-size-5xl{font-size:3rem}.text-expandable__paragraph--font-size-6xl{font-size:3.75rem}.text-expandable__html{line-height:1.625}.text-expandable__html--font-size-xs{font-size:.75rem}.text-expandable__html--font-size-sm{font-size:.875rem}.text-expandable__html--font-size-base{font-size:1rem}.text-expandable__html--font-size-lg{font-size:1.125rem}.text-expandable__html--font-size-xl{font-size:1.25rem}.text-expandable__html--font-size-2xl{font-size:1.5rem}.text-expandable__html--font-size-3xl{font-size:1.875rem}.text-expandable__html--font-size-4xl{font-size:2.25rem}.text-expandable__html--font-size-5xl{font-size:3rem}.text-expandable__html--font-size-6xl{font-size:3.75rem}.text-expandable__html__content--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-expandable-lines);overflow:hidden}.text-expandable__toggle{display:inline;margin-left:.25rem;padding:0;border:0;background:transparent;font-size:.875rem;font-weight:600;color:#2563eb;cursor:pointer;vertical-align:baseline}.text-expandable__toggle:hover{color:#1e40af;text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TextExpandableComponent, isStandalone: true, selector: "text-expandable", inputs: { text: "text", maxLength: "maxLength", fontSize: "fontSize", allowHtml: "allowHtml", maxLines: "maxLines" }, usesOnChanges: true, ngImport: i0, template: "@if (allowHtml) {\n  <div class=\"text-expandable__html\" [ngClass]=\"`text-expandable__html--font-size-${fontSize}`\">\n    <div\n      class=\"text-expandable__html__content\"\n      [class.text-expandable__html__content--clamped]=\"truncated && !expanded\"\n      [style.--text-expandable-lines]=\"lines\"\n      [innerHTML]=\"text\"\n    ></div>\n\n    @if (truncated) {\n      <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n        {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n      </button>\n    }\n  </div>\n} @else {\n  <p\n    class=\"text-expandable__paragraph\"\n    [ngClass]=\"`text-expandable__paragraph--font-size-${fontSize}`\"\n  >\n    {{ visibleText }}\n\n    @if (truncated) {\n      <button type=\"button\" class=\"text-expandable__toggle\" (click)=\"toggleExpanded()\">\n        {{ (expanded ? 'common.showLess' : 'common.showMore') | transloco }}\n      </button>\n    }\n  </p>\n}\n", styles: [".text-expandable__paragraph{line-height:1.625}.text-expandable__paragraph--font-size-xs{font-size:.75rem}.text-expandable__paragraph--font-size-sm{font-size:.875rem}.text-expandable__paragraph--font-size-base{font-size:1rem}.text-expandable__paragraph--font-size-lg{font-size:1.125rem}.text-expandable__paragraph--font-size-xl{font-size:1.25rem}.text-expandable__paragraph--font-size-2xl{font-size:1.5rem}.text-expandable__paragraph--font-size-3xl{font-size:1.875rem}.text-expandable__paragraph--font-size-4xl{font-size:2.25rem}.text-expandable__paragraph--font-size-5xl{font-size:3rem}.text-expandable__paragraph--font-size-6xl{font-size:3.75rem}.text-expandable__html{line-height:1.625}.text-expandable__html--font-size-xs{font-size:.75rem}.text-expandable__html--font-size-sm{font-size:.875rem}.text-expandable__html--font-size-base{font-size:1rem}.text-expandable__html--font-size-lg{font-size:1.125rem}.text-expandable__html--font-size-xl{font-size:1.25rem}.text-expandable__html--font-size-2xl{font-size:1.5rem}.text-expandable__html--font-size-3xl{font-size:1.875rem}.text-expandable__html--font-size-4xl{font-size:2.25rem}.text-expandable__html--font-size-5xl{font-size:3rem}.text-expandable__html--font-size-6xl{font-size:3.75rem}.text-expandable__html__content--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-expandable-lines);overflow:hidden}.text-expandable__toggle{display:inline;margin-left:.25rem;padding:0;border:0;background:transparent;font-size:.875rem;font-weight:600;color:#2563eb;cursor:pointer;vertical-align:baseline}.text-expandable__toggle:hover{color:#1e40af;text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextExpandableComponent, decorators: [{
             type: Component,
@@ -4883,7 +4883,7 @@ class ShowTypeBadgeComponent {
         return this.show.show_type ? SHOW_TYPE_COLORS[this.show.show_type] : SHOW_TYPE_COLORS['DEFAULT'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowTypeBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ShowTypeBadgeComponent, isStandalone: true, selector: "show-type-badge", inputs: { show: "show", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`show.showTypes.${show.show_type}` | transloco\"\n  [backgroundColor]=\"this.showTypeColor.bg\"\n  [textColor]=\"this.showTypeColor.text\"\n  size=\"xs\"\n  class=\"show-card__badge\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ShowTypeBadgeComponent, isStandalone: true, selector: "show-type-badge", inputs: { show: "show", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`show.showTypes.${show.show_type}` | transloco\"\n  [backgroundColor]=\"this.showTypeColor.bg\"\n  [textColor]=\"this.showTypeColor.text\"\n  size=\"xs\"\n  class=\"show-card__badge\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowTypeBadgeComponent, decorators: [{
             type: Component,
@@ -4909,7 +4909,7 @@ class ShowCardComponent {
         return new Date(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowCardComponent, isStandalone: true, selector: "show-card", inputs: { show: "show", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"show-card\">\n  <div class=\"show-card__image\">\n    <show-type-badge [show]=\"show\" class=\"show-card__badge\" />\n\n    @if (show.images && show.images.length > 0) {\n      <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n    } @else {\n      <img\n        [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${show.title}`\"\n        class=\"show-card__image-placeholder\"\n      />\n    }\n  </div>\n\n  <div class=\"show-card__info\">\n    <p class=\"show-card__title\">\n      {{ show.title }}\n    </p>\n\n    @if (show.next_performance) {\n      <div class=\"show-card__datetime\">\n        <span class=\"show-card__datetime-title\">\n          {{ 'show.next_performance' | transloco }}\n        </span>\n\n        <br />\n\n        <span class=\"show-card__date\">\n          {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n          {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n        </span>\n      </div>\n    }\n\n    @if (show.days_of_week && show.days_of_week.length > 0) {\n      <div class=\"show-card__days\">\n        @for (day of show.days_of_week; track $index) {\n          <app-badge\n            [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    @if (show.unique_start_times && show.unique_start_times.length > 0) {\n      <div class=\"show-card__times\">\n        @for (time of show.unique_start_times; track $index) {\n          <app-badge\n            [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    <app-link-button\n      class=\"show-card__link\"\n      [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n      [queryParams]=\"linkQueryParams ?? {}\"\n      [text]=\"linkText\"\n      icon=\"ri-calendar-line\"\n      variant=\"primary\"\n      size=\"sm\"\n    />\n  </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#1f2937;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{color:#a3a3a3;display:flex;flex-flow:row wrap;font-size:.875rem;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant", "tooltip"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: ShowTypeBadgeComponent, selector: "show-type-badge", inputs: ["show", "size"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowCardComponent, isStandalone: true, selector: "show-card", inputs: { show: "show", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"show-card\">\n  <div class=\"show-card__image\">\n    <show-type-badge [show]=\"show\" class=\"show-card__badge\" />\n\n    @if (show.images && show.images.length > 0) {\n      <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n    } @else {\n      <img\n        [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${show.title}`\"\n        class=\"show-card__image-placeholder\"\n      />\n    }\n  </div>\n\n  <div class=\"show-card__info\">\n    <p class=\"show-card__title\">\n      {{ show.title }}\n    </p>\n\n    @if (show.next_performance) {\n      <div class=\"show-card__datetime\">\n        <span class=\"show-card__datetime-title\">\n          {{ 'show.next_performance' | transloco }}\n        </span>\n\n        <br />\n\n        <span class=\"show-card__date\">\n          {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n          {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n        </span>\n      </div>\n    }\n\n    @if (show.days_of_week && show.days_of_week.length > 0) {\n      <div class=\"show-card__days\">\n        @for (day of show.days_of_week; track $index) {\n          <app-badge\n            [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    @if (show.unique_start_times && show.unique_start_times.length > 0) {\n      <div class=\"show-card__times\">\n        @for (time of show.unique_start_times; track $index) {\n          <app-badge\n            [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n            [bordered]=\"false\"\n            size=\"xs\"\n            backgroundColor=\"#525252\"\n            textColor=\"#e5e5e5\"\n          />\n        }\n      </div>\n    }\n\n    <app-link-button\n      class=\"show-card__link\"\n      [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n      [queryParams]=\"linkQueryParams ?? {}\"\n      [text]=\"linkText\"\n      icon=\"ri-calendar-line\"\n      variant=\"primary\"\n      size=\"sm\"\n    />\n  </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#1f2937;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{color:#a3a3a3;display:flex;flex-flow:row wrap;font-size:.875rem;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant", "tooltip"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: ShowTypeBadgeComponent, selector: "show-type-badge", inputs: ["show", "size"] }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowCardComponent, decorators: [{
             type: Component,
@@ -4971,13 +4971,13 @@ class LanguageSwitcherComponent {
         this.transloco.setActiveLang(lang);
         setStoredLanguage(lang);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: LanguageSwitcherComponent, isStandalone: true, selector: "language-switcher", ngImport: i0, template: "<div class=\"lang-switcher\">\n  @for (lang of availableLangs; track lang) {\n    <button\n      (click)=\"switchLang(lang)\"\n      class=\"lang-switcher-btn\"\n      [class.active]=\"activeLang === lang\"\n      [class.inactive]=\"activeLang !== lang\"\n    >\n      {{ lang | uppercase }}\n    </button>\n  }\n</div>\n", styles: [".lang-switcher{display:flex;align-items:center;gap:.25rem}.lang-switcher-btn{cursor:pointer;padding:.25rem .5rem;font-size:.75rem;font-weight:500;border-radius:.125rem;transition:all .15s ease-in-out;border:none;background:transparent}.lang-switcher-btn.active{background-color:#1f2937;color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.active{background-color:#374151}}.lang-switcher-btn.inactive{color:#9ca3af}.lang-switcher-btn.inactive:hover{color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.inactive{color:#6b7280}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'language-switcher', standalone: true, imports: [CommonModule, TranslocoModule], template: "<div class=\"lang-switcher\">\n  @for (lang of availableLangs; track lang) {\n    <button\n      (click)=\"switchLang(lang)\"\n      class=\"lang-switcher-btn\"\n      [class.active]=\"activeLang === lang\"\n      [class.inactive]=\"activeLang !== lang\"\n    >\n      {{ lang | uppercase }}\n    </button>\n  }\n</div>\n", styles: [".lang-switcher{display:flex;align-items:center;gap:.25rem}.lang-switcher-btn{cursor:pointer;padding:.25rem .5rem;font-size:.75rem;font-weight:500;border-radius:.125rem;transition:all .15s ease-in-out;border:none;background:transparent}.lang-switcher-btn.active{background-color:#1f2937;color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.active{background-color:#374151}}.lang-switcher-btn.inactive{color:#9ca3af}.lang-switcher-btn.inactive:hover{color:#fff}@media(prefers-color-scheme:dark){.lang-switcher-btn.inactive{color:#6b7280}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.TranslocoService }] });
+        }], ctorParameters: () => [{ type: i2.TranslocoService }] });
 class FormSelectComponent {
     ngControl;
@@ -5048,8 +5048,8 @@ class FormSelectComponent {
         }
         return baseClasses;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormSelectComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormSelectComponent, isStandalone: true, selector: "form-select", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", disabled: "disabled", readonly: "readonly", options: "options", fieldGroupClass: "fieldGroupClass", showDefaultOption: "showDefaultOption", defaultOptionLabel: "defaultOptionLabel" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"form-select-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"form-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <select\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [required]=\"required\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onSelectChange($event)\"\n      (blur)=\"onTouched()\"\n      class=\"form-select\"\n      [class.disabled]=\"readonly\"\n      [class.error]=\"showError\"\n    >\n      @if (showDefaultOption && this.defaultOptionLabel) {\n        <option [value]=\"null\" disabled selected>{{ this.defaultOptionLabel }}</option>\n      } @else if (showDefaultOption) {\n        <option [value]=\"null\" disabled selected>{{ 'common.selectOption' | transloco }}</option>\n      }\n\n      @for (option of options; track option.value) {\n        <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n          {{ option.label }}\n        </option>\n      }\n    </select>\n  </div>\n\n  @if (showError) {\n    <div class=\"form-select-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".form-select-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-select-label{color:#d1d5db}}.form-select{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;padding:.375rem 2.5rem .375rem .75rem;outline:1px solid #d1d5db;outline-offset:1px;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1em}.form-select::-ms-expand{display:none}@-moz-document url-prefix(){.form-select{text-indent:.01px;text-overflow:\"\";padding-right:.75rem}}.form-select:focus{outline:2px solid #4f46e5;outline-offset:2px}.form-select.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.form-select.error{background-color:#374151;color:#fff;outline-color:#ef4444}}.form-select.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.form-select.disabled{background-color:#374151;color:#d1d5db}}@media(min-width:768px){.form-select{font-size:.875rem}}.form-select-required{color:#ef4444}.form-select-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormSelectComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormSelectComponent, isStandalone: true, selector: "form-select", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", disabled: "disabled", readonly: "readonly", options: "options", fieldGroupClass: "fieldGroupClass", showDefaultOption: "showDefaultOption", defaultOptionLabel: "defaultOptionLabel" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"form-select-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"form-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <select\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [required]=\"required\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onSelectChange($event)\"\n      (blur)=\"onTouched()\"\n      class=\"form-select\"\n      [class.disabled]=\"readonly\"\n      [class.error]=\"showError\"\n    >\n      @if (showDefaultOption && this.defaultOptionLabel) {\n        <option [value]=\"null\" disabled selected>{{ this.defaultOptionLabel }}</option>\n      } @else if (showDefaultOption) {\n        <option [value]=\"null\" disabled selected>{{ 'common.selectOption' | transloco }}</option>\n      }\n\n      @for (option of options; track option.value) {\n        <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n          {{ option.label }}\n        </option>\n      }\n    </select>\n  </div>\n\n  @if (showError) {\n    <div class=\"form-select-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".form-select-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-select-label{color:#d1d5db}}.form-select{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;padding:.375rem 2.5rem .375rem .75rem;outline:1px solid #d1d5db;outline-offset:1px;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1em}.form-select::-ms-expand{display:none}@-moz-document url-prefix(){.form-select{text-indent:.01px;text-overflow:\"\";padding-right:.75rem}}.form-select:focus{outline:2px solid #4f46e5;outline-offset:2px}.form-select.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.form-select.error{background-color:#374151;color:#fff;outline-color:#ef4444}}.form-select.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.form-select.disabled{background-color:#374151;color:#d1d5db}}@media(min-width:768px){.form-select{font-size:.875rem}}.form-select-required{color:#ef4444}.form-select-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormSelectComponent, decorators: [{
             type: Component,
@@ -5058,7 +5058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i1$3.TranslocoService }], propDecorators: { label: [{
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -5162,7 +5162,7 @@ class FormTextareaComponent {
         }
         return baseClasses;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormTextareaComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormTextareaComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormTextareaComponent, isStandalone: true, selector: "form-textarea", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", minlength: "minlength", maxlength: "maxlength", rows: "rows", cols: "cols", fieldGroupClass: "fieldGroupClass" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"form-textarea-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"form-textarea-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <textarea\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [minlength]=\"minlength\"\n      [maxlength]=\"maxlength\"\n      [rows]=\"rows\"\n      [cols]=\"cols\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      class=\"form-textarea\"\n      [class.disabled]=\"readonly\"\n      [class.error]=\"showError\"\n    ></textarea>\n  </div>\n\n  @if (showError) {\n    <div class=\"form-textarea-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".form-textarea-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-textarea-label{color:#d1d5db}}.form-textarea{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;padding:.375rem .75rem;outline:1px solid #d1d5db;outline-offset:1px;width:100%}.form-textarea::placeholder{color:#9ca3af}.form-textarea:focus{outline:2px solid #4f46e5;outline-offset:2px}.form-textarea.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.form-textarea.error{background-color:#374151;color:#fff;outline-color:#ef4444}}.form-textarea.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.form-textarea.disabled{background-color:#374151;color:#d1d5db}}@media(min-width:768px){.form-textarea{font-size:.875rem}}.form-textarea-required{color:#ef4444}.form-textarea-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormTextareaComponent, decorators: [{
@@ -5172,7 +5172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i1$3.TranslocoService }], propDecorators: { label: [{
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -5355,7 +5355,7 @@ class NumberInputComponent {
             return null;
         return num > this.max ? { max: { max: this.max, actual: num } } : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumberInputComponent, deps: [{ token: i1$3.TranslocoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumberInputComponent, deps: [{ token: i2.TranslocoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: NumberInputComponent, isStandalone: true, selector: "number-input", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", min: "min", max: "max", step: "step", fieldGroupClass: "fieldGroupClass" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -5375,7 +5375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => NumberInputComponent), multi: true },
                     ], template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"number-input-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"number-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"number-input-group\" [class.error]=\"showError\">\n    <button\n      type=\"button\"\n      class=\"number-input-button\"\n      [attr.aria-label]=\"transloco.translate('numberInput.decrement')\"\n      [disabled]=\"!canDecrement\"\n      (click)=\"decrement()\"\n    >\n      <i class=\"ri-subtract-line\"></i>\n    </button>\n\n    <input\n      type=\"number\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [value]=\"value ?? ''\"\n      (input)=\"onInput($event.target.value)\"\n      (blur)=\"onTouched()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [class.disabled]=\"readonly\"\n      class=\"number-input\"\n    />\n\n    <button\n      type=\"button\"\n      class=\"number-input-button\"\n      [attr.aria-label]=\"transloco.translate('numberInput.increment')\"\n      [disabled]=\"!canIncrement\"\n      (click)=\"increment()\"\n    >\n      <i class=\"ri-add-line\"></i>\n    </button>\n  </div>\n\n  @if (showError) {\n    <div class=\"number-input-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".number-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.number-input-label{color:#d1d5db}}.number-input-group{display:flex;align-items:stretch}.number-input-group.error .number-input{outline-color:#ef4444}@media(prefers-color-scheme:dark){.number-input-group.error .number-input{background-color:#374151;color:#fff;outline-color:#ef4444}}.number-input-group.error .number-input-button{border-color:#ef4444}@media(prefers-color-scheme:dark){.number-input-group.error .number-input-button{background-color:#374151;color:#fff}}.number-input-button{align-items:center;background-color:#fff;border:1px solid #d1d5db;color:#4b5563;cursor:pointer;display:flex;justify-content:center;padding:0;width:2.5rem;transition:background-color .15s ease}.number-input-button:first-child{border-radius:.375rem 0 0 .375rem;margin-right:-1px}.number-input-button:last-child{border-radius:0 .375rem .375rem 0;margin-left:-1px}.number-input-button i{font-size:1.125rem;line-height:1}.number-input-button:hover:not(:disabled){background-color:#f3f4f6;color:#111827}.number-input-button:disabled{background-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}@media(prefers-color-scheme:dark){.number-input-button{background-color:#1f2937;border-color:#4b5563;color:#d1d5db}.number-input-button:hover:not(:disabled){background-color:#374151;color:#fff}.number-input-button:disabled{background-color:#374151;color:#6b7280}}.number-input{background-color:#fff;border:1px solid #d1d5db;color:#111827;display:block;font-weight:500;outline:1px solid #d1d5db;outline-offset:-1px;padding:.375rem .75rem;text-align:center;width:100%}.number-input::placeholder{color:#9ca3af}.number-input:focus{outline:2px solid #4f46e5;outline-offset:-2px}.number-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.number-input.disabled{background-color:#374151;color:#d1d5db}}.number-input::-webkit-inner-spin-button,.number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield;appearance:textfield}@media(prefers-color-scheme:dark){.number-input{background-color:#1f2937;border-color:#4b5563;color:#f3f4f6}.number-input::placeholder{color:#6b7280}}@media(min-width:768px){.number-input{font-size:.875rem}}.number-input-required{color:#ef4444}.number-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.TranslocoService }, { type: i0.Injector }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i2.TranslocoService }, { type: i0.Injector }], propDecorators: { label: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -5559,7 +5559,7 @@ class PhoneInputComponent {
         const dialDigits = this.dialCode.replace('+', '');
         return digits.startsWith(dialDigits) ? digits.slice(dialDigits.length) : digits;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i1$3.TranslocoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i2.TranslocoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PhoneInputComponent, isStandalone: true, selector: "phone-input", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", maxNationalDigits: "maxNationalDigits", minNationalDigits: "minNationalDigits", defaultCountry: "defaultCountry", fieldGroupClass: "fieldGroupClass" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -5579,7 +5579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => PhoneInputComponent), multi: true },
                     ], template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"phone-input-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"phone-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"phone-input-field\">\n    <div class=\"phone-prefix-wrapper\">\n      <ng-select\n        class=\"phone-prefix-select\"\n        [items]=\"phoneOptions\"\n        bindValue=\"isoCode\"\n        bindLabel=\"search\"\n        [searchable]=\"true\"\n        [clearable]=\"false\"\n        [virtualScroll]=\"true\"\n        placeholder=\"\"\n        [disabled]=\"disabled || readonly\"\n        [ngModel]=\"selectedIso\"\n        (ngModelChange)=\"onCountryChange($event)\"\n      >\n        <ng-template ng-label-tmp let-item=\"item\">\n          {{ flag(item.isoCode) }} {{ item.dialCode }}\n        </ng-template>\n        <ng-template ng-option-tmp let-item=\"item\">\n          {{ flag(item.isoCode) }} {{ item.name }} ({{ item.dialCode }})\n        </ng-template>\n      </ng-select>\n    </div>\n\n    <input\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"effectivePlaceholder\"\n      [required]=\"required\"\n      [attr.minlength]=\"minNationalDigits\"\n      [attr.maxlength]=\"maxNationalDigits\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [value]=\"nationalNumber\"\n      [class.error]=\"showError\"\n      [class.disabled]=\"disabled || readonly\"\n      [attr.inputmode]=\"'numeric'\"\n      [autocomplete]=\"'tel-national'\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      class=\"phone-input form-input\"\n    />\n  </div>\n\n  @if (showError) {\n    <div class=\"phone-input-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".phone-input-group{width:100%}.phone-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}.phone-input-field{position:relative}.phone-prefix-wrapper{align-items:stretch;bottom:0;display:flex;left:0;position:absolute;top:0;z-index:10}.phone-prefix-wrapper .ng-select.phone-prefix-select{width:6rem}.phone-prefix-wrapper .ng-select.phone-prefix-select .ng-select-container{background-color:transparent;border:none;border-radius:0;border-right:1px solid #d1d5db;box-shadow:none;height:100%;min-height:0}.phone-prefix-wrapper .ng-select.phone-prefix-select .ng-select-container .ng-value-container{align-items:center;padding:0 .25rem 0 .5rem;white-space:nowrap}.phone-prefix-wrapper .ng-select.phone-prefix-select .ng-select-container .ng-value-container .ng-placeholder{color:#9ca3af}.phone-prefix-wrapper .ng-select.phone-prefix-select .ng-select-container .ng-value-container .ng-value{color:#374151;display:inline-flex;font-size:.75rem;height:auto;line-height:normal}.phone-prefix-wrapper .ng-select.phone-prefix-select .ng-select-container .ng-value-container .ng-value .ng-value-label{color:#374151;font-size:.75rem;white-space:nowrap}.phone-prefix-wrapper .ng-select.phone-prefix-select .ng-select-container .ng-value-container .ng-input>input{color:#111827;font-size:.75rem;padding-left:.5rem;height:100%}.phone-prefix-wrapper .ng-select.phone-prefix-select .ng-arrow-wrapper{padding-right:.25rem}.phone-prefix-wrapper .ng-select.phone-prefix-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{outline:none}.form-input.phone-input{padding-left:7rem}.phone-input-required{color:#ef4444}.phone-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}.ng-select.ng-select-opened>.ng-select-container{background-color:#fff;border-color:#d1d5db}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-top-color:#6b7280}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#d1d5db;outline:2px solid #4f46e5;outline-offset:2px}.ng-select.ng-select-disabled>.ng-select-container{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}.ng-select.error>.ng-select-container{outline:2px solid #ef4444;outline-offset:2px}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#111827;background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;min-height:0}.ng-select .ng-select-container .ng-value-container{padding:.375rem 0 .375rem .75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#9ca3af}.ng-select.ng-select-single .ng-select-container{display:flex;gap:.25rem;height:auto;height:33px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);left:.75rem}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input>input{font-size:.75rem;height:20px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{height:auto;line-height:100%}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:.75rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{gap:.25rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{font-size:.75rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{align-items:center;background-color:#eef2ff;border-radius:.125rem;display:flex;color:#4338ca;flex-flow:row nowrap;font-size:.75rem;height:22px;line-height:100%;gap:.25rem;overflow:hidden;padding:.25rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:.75rem}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#e0e7ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{color:#6b7280;background-color:#f3f4f6}.ng-select .ng-clear-wrapper{align-items:center;color:#9ca3af;display:flex;flex-flow:column nowrap;justify-content:center}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#ef4444}.ng-select .ng-spinner-loader{border-top-color:#4f46e533;border-right-color:#4f46e533;border-bottom-color:#4f46e533;border-left-color:#4f46e5}.ng-select .ng-arrow-wrapper .ng-arrow{border-top-color:#9ca3af}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#4b5563}@media(prefers-color-scheme:dark){.ng-select.ng-select-opened>.ng-select-container{background-color:#1f2937;border-color:#4b5563}.ng-select.ng-select-disabled>.ng-select-container{background-color:#374151;color:#d1d5db}.ng-select .ng-select-container{color:#fff;background-color:#1f2937;border-color:#4b5563}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#6b7280}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#a5b4fc;background-color:#4f46e533}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{color:#9ca3af;background-color:#374151}}.ng-dropdown-panel{background-color:#fff;border:1px solid #e5e7eb;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.ng-dropdown-panel.ng-select-bottom{margin-top:.25rem}.ng-dropdown-panel.ng-select-top{margin-bottom:.25rem}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{border-color:#e5e7eb;padding:.5rem}.ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:4px;height:4px}.ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:9999px}.ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb:hover{background:#9ca3af}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{font-weight:500;color:#6b7280}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f9fafb;font-size:.75rem}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{color:#374151;background-color:#eef2ff;font-weight:600;font-size:.75rem}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff!important;color:#111827!important;font-size:.75rem!important;padding:.5rem .75rem}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:#4338ca!important;background-color:#eef2ff!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f9fafb!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#d1d5db!important}@media(prefers-color-scheme:dark){.ng-dropdown-panel{background-color:#1f2937;border-color:#374151}.ng-dropdown-panel .ng-dropdown-header,.ng-dropdown-panel .ng-dropdown-footer{border-color:#374151}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{color:#9ca3af}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#374151}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{color:#fff;background-color:#4f46e533}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#1f2937!important;color:#f3f4f6!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{color:#a5b4fc;background-color:#4f46e533}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#374151!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#4b5563!important}}\n", ".form-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-input-label{color:#d1d5db}}.form-input{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;outline:0;padding:.375rem .75rem;width:100%}.form-input::placeholder{color:#9ca3af}.form-input:focus{border-color:#1f2937}.form-input.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.form-input.error{background-color:#374151;outline-color:#ef4444}}.form-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.form-input.disabled{background-color:#374151;color:#d1d5db}}@media screen and (min-width:768px){.form-input{font-size:.875rem}}.form-input-required{color:#ef4444}.form-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.TranslocoService }, { type: i0.Injector }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i2.TranslocoService }, { type: i0.Injector }], propDecorators: { label: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -5697,7 +5697,7 @@ class FormEditorComponent {
         }
         return baseClasses;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormEditorComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$3.TranslocoService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormEditorComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2.TranslocoService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormEditorComponent, isStandalone: true, selector: "form-editor", inputs: { label: "label", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", toolbar: "toolbar", fieldGroupClass: "fieldGroupClass" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"form-editor-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"form-editor-required\">*</span>\n      }\n    </label>\n  }\n\n  @if (isBrowser) {\n    <div class=\"form-editor-wrapper\" [class.disabled]=\"disabled\">\n      <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholder\">\n        <ngx-editor-menu\n          [editor]=\"editor\"\n          [toolbar]=\"toolbar\"\n          [disabled]=\"disabled\"\n        ></ngx-editor-menu>\n      </ngx-editor>\n    </div>\n  }\n\n  @if (showError) {\n    <div class=\"form-editor-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".form-editor-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.form-editor-label{color:#d1d5db}}.form-editor-wrapper{position:relative}.form-editor-wrapper.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.form-editor-required{color:#ef4444}.form-editor-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormEditorComponent, decorators: [{
@@ -5713,7 +5713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i1$3.TranslocoService }, { type: undefined, decorators: [{
+                }] }, { type: i2.TranslocoService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }], propDecorators: { label: [{
@@ -5989,7 +5989,7 @@ class DateInputComponent {
         }
         return baseClasses;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DateInputComponent, isStandalone: true, selector: "date-input", inputs: { label: "label", type: "type", includeTime: "includeTime", name: "name", id: "id", placeholder: "placeholder", required: "required", readonly: "readonly", min: "min", max: "max", fieldGroupClass: "fieldGroupClass", dateFormat: "dateFormat" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"date-input-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"date-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [type]=\"includeTime ? 'datetime-local' : type\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [disabled]=\"disabled\"\n      class=\"date-input\"\n      [class.disabled]=\"readonly\"\n      [class.error]=\"showError\"\n      [readonly]=\"readonly\"\n    />\n  </div>\n\n  @if (showError) {\n    <div class=\"date-input-error-message\">\n      {{ errorMessage }}\n    </div>\n  }\n</div>\n", styles: [".date-input-label{color:#374151;display:block;font-size:.875rem;font-weight:600;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.date-input-label{color:#d1d5db}}.date-input{background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;color:#111827;display:block;padding:.375rem .75rem;outline:1px solid #d1d5db;outline-offset:1px;width:100%}.date-input::placeholder{color:#9ca3af}.date-input:focus{outline:2px solid #4f46e5;outline-offset:2px}.date-input.error{outline-color:#ef4444}@media(prefers-color-scheme:dark){.date-input.error{background-color:#374151;color:#fff;outline-color:#ef4444}}.date-input.disabled{background-color:#e5e7eb;color:#6b7280;cursor:not-allowed}@media(prefers-color-scheme:dark){.date-input.disabled{background-color:#374151;color:#d1d5db}}@media(min-width:768px){.date-input{font-size:.875rem}}.date-input-required{color:#ef4444}.date-input-error-message{color:#ef4444;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateInputComponent, decorators: [{
@@ -5999,7 +5999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i1$3.TranslocoService }], propDecorators: { label: [{
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -6403,8 +6403,8 @@ class FileUploadComponent {
         }
         return baseClasses;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadComponent, isStandalone: true, selector: "file-upload", inputs: { label: "label", name: "name", id: "id", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", config: "config", accept: "accept" }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"file-upload-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"file-upload-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Upload Area -->\n  <div\n    class=\"file-upload-container\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n  >\n    <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n      <input\n        [id]=\"inputId\"\n        [name]=\"name\"\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"config.multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileSelect($event)\"\n        (blur)=\"onTouched()\"\n        class=\"file-upload-hidden\"\n      />\n\n      <div class=\"file-upload-content\">\n        <i class=\"ri-upload-cloud-2-line file-upload-icon\"></i>\n        <div class=\"file-upload-text\">\n          <p class=\"file-upload-primary-text\">\n            @if (config.multiple) {\n              {{ 'fileUpload.dropMultiple' | transloco }}\n            } @else {\n              {{ 'fileUpload.dropSingle' | transloco }}\n            }\n          </p>\n          <p class=\"file-upload-secondary-text\">\n            @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n              {{ 'fileUpload.allowedExtensions' | transloco }}\n              {{ config.allowedExtensions.join(', ') }}\n            }\n            @if (config.maxFileSize) {\n              \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Files Preview -->\n  @if (files.length > 0) {\n    <div class=\"file-upload-list\">\n      @for (file of files; track file; let i = $index) {\n        <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n      }\n    </div>\n  }\n\n  <!-- Validation Error -->\n  @if (showError) {\n    <div class=\"file-upload-error\">\n      {{ errorMessage }}\n    </div>\n  }\n\n  <!-- File Type Legend -->\n  @if (files.length === 0) {\n    <div class=\"file-upload-legend\">\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-image-line file-upload-legend-icon-blue\"></i>\n        <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-pdf-line file-upload-legend-icon-red\"></i>\n        <span>PDF</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-excel-line file-upload-legend-icon-green\"></i>\n        <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-word-line file-upload-legend-icon-word\"></i>\n        <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-text-line file-upload-legend-icon-gray\"></i>\n        <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-line file-upload-legend-icon-muted\"></i>\n        <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".file-upload-label{display:block;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.file-upload-label{color:#d1d5db}}.file-upload-required{color:#ef4444}.file-upload-container{position:relative;width:100%}.file-upload-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.file-upload-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload-icon{font-size:1.875rem;color:#9ca3af}.file-upload-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;color:#4b5563}.file-upload-primary-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;margin:0}.file-upload-secondary-text{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem;margin-bottom:0}.file-upload-area{border:2px dashed #d1d5db;border-radius:.5rem;padding:1.5rem;text-align:center;transition:all .2s ease-in-out;cursor:pointer}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#9ca3af;background-color:#f9fafb}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.file-upload-error{color:#ef4444;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem}.file-upload-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.75rem;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;color:#6b7280}@media(prefers-color-scheme:dark){.file-upload-legend{color:#9ca3af}}.file-upload-legend-item{display:flex;align-items:center;gap:.25rem}.file-upload-legend-icon-blue{color:#3b82f6}.file-upload-legend-icon-red{color:#ef4444}.file-upload-legend-icon-green{color:#10b981}.file-upload-legend-icon-word{color:#2563eb}.file-upload-legend-icon-gray{color:#6b7280}.file-upload-legend-icon-muted{color:#9ca3af}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload-drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload-file-list{max-height:15rem;overflow-y:auto}.file-upload-file-list::-webkit-scrollbar{width:.5rem}.file-upload-file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload-area{padding:1rem}.file-upload-icon{font-size:1.25rem}.file-upload-text{font-size:.75rem}}@media(prefers-color-scheme:dark){.file-upload-area{border-color:#4b5563;background-color:#1f2937}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#6b7280;background-color:#374151}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#374151;background-color:#111827}.file-upload-text{color:#d1d5db}.file-upload-primary-text{color:#f3f4f6}.file-upload-secondary-text{color:#9ca3af}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: FileUploadPreviewComponent, selector: "file-upload-preview", inputs: ["file"], outputs: ["remove"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileUploadComponent, isStandalone: true, selector: "file-upload", inputs: { label: "label", name: "name", id: "id", required: "required", readonly: "readonly", fieldGroupClass: "fieldGroupClass", config: "config", accept: "accept" }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved", validationError: "validationError" }, ngImport: i0, template: "<div [class]=\"fieldGroupClasses\">\n  @if (label) {\n    <label [for]=\"inputId\" class=\"file-upload-label\">\n      {{ label }}\n\n      @if (required) {\n        <span class=\"file-upload-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Upload Area -->\n  <div\n    class=\"file-upload-container\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n  >\n    <div [class]=\"uploadAreaClasses\" (click)=\"!disabled && triggerFileInput()\">\n      <input\n        [id]=\"inputId\"\n        [name]=\"name\"\n        type=\"file\"\n        [accept]=\"accept\"\n        [multiple]=\"config.multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileSelect($event)\"\n        (blur)=\"onTouched()\"\n        class=\"file-upload-hidden\"\n      />\n\n      <div class=\"file-upload-content\">\n        <i class=\"ri-upload-cloud-2-line file-upload-icon\"></i>\n        <div class=\"file-upload-text\">\n          <p class=\"file-upload-primary-text\">\n            @if (config.multiple) {\n              {{ 'fileUpload.dropMultiple' | transloco }}\n            } @else {\n              {{ 'fileUpload.dropSingle' | transloco }}\n            }\n          </p>\n          <p class=\"file-upload-secondary-text\">\n            @if (config.allowedExtensions && config.allowedExtensions.length > 0) {\n              {{ 'fileUpload.allowedExtensions' | transloco }}\n              {{ config.allowedExtensions.join(', ') }}\n            }\n            @if (config.maxFileSize) {\n              \u2022 {{ 'fileUpload.maxSize' | transloco }} {{ formatFileSize(config.maxFileSize) }}\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Files Preview -->\n  @if (files.length > 0) {\n    <div class=\"file-upload-list\">\n      @for (file of files; track file; let i = $index) {\n        <file-upload-preview [file]=\"file\" (remove)=\"removeFile(i)\" />\n      }\n    </div>\n  }\n\n  <!-- Validation Error -->\n  @if (showError) {\n    <div class=\"file-upload-error\">\n      {{ errorMessage }}\n    </div>\n  }\n\n  <!-- File Type Legend -->\n  @if (files.length === 0) {\n    <div class=\"file-upload-legend\">\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-image-line file-upload-legend-icon-blue\"></i>\n        <span>{{ 'fileUpload.fileTypeImages' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-pdf-line file-upload-legend-icon-red\"></i>\n        <span>PDF</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-excel-line file-upload-legend-icon-green\"></i>\n        <span>{{ 'fileUpload.fileTypeExcel' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-word-line file-upload-legend-icon-word\"></i>\n        <span>{{ 'fileUpload.fileTypeWord' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-text-line file-upload-legend-icon-gray\"></i>\n        <span>{{ 'fileUpload.fileTypeText' | transloco }}</span>\n      </div>\n      <div class=\"file-upload-legend-item\">\n        <i class=\"ri-file-line file-upload-legend-icon-muted\"></i>\n        <span>{{ 'fileUpload.fileTypeOther' | transloco }}</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".file-upload-label{display:block;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}@media(prefers-color-scheme:dark){.file-upload-label{color:#d1d5db}}.file-upload-required{color:#ef4444}.file-upload-container{position:relative;width:100%}.file-upload-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.file-upload-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.file-upload-icon{font-size:1.875rem;color:#9ca3af}.file-upload-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.875rem;color:#4b5563}.file-upload-primary-text{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;margin:0}.file-upload-secondary-text{color:#6b7280;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem;margin-bottom:0}.file-upload-area{border:2px dashed #d1d5db;border-radius:.5rem;padding:1.5rem;text-align:center;transition:all .2s ease-in-out;cursor:pointer}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#9ca3af;background-color:#f9fafb}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#e5e7eb;background-color:#f9fafb;cursor:not-allowed}.file-upload-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.file-upload-error{color:#ef4444;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;margin-top:.25rem}.file-upload-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.75rem;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.75rem;color:#6b7280}@media(prefers-color-scheme:dark){.file-upload-legend{color:#9ca3af}}.file-upload-legend-item{display:flex;align-items:center;gap:.25rem}.file-upload-legend-icon-blue{color:#3b82f6}.file-upload-legend-icon-red{color:#ef4444}.file-upload-legend-icon-green{color:#10b981}.file-upload-legend-icon-word{color:#2563eb}.file-upload-legend-icon-gray{color:#6b7280}.file-upload-legend-icon-muted{color:#9ca3af}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.file-upload-drag-active{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.file-upload-file-list{max-height:15rem;overflow-y:auto}.file-upload-file-list::-webkit-scrollbar{width:.5rem}.file-upload-file-list::-webkit-scrollbar-track{background-color:#f3f4f6;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:9999px}.file-upload-file-list::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.file-type-icon--image{color:#3b82f6}.file-type-icon--pdf{color:#ef4444}.file-type-icon--excel{color:#10b981}.file-type-icon--word{color:#2563eb}.file-type-icon--text{color:#6b7280}.file-type-icon--default{color:#9ca3af}@media(max-width:640px){.file-upload-area{padding:1rem}.file-upload-icon{font-size:1.25rem}.file-upload-text{font-size:.75rem}}@media(prefers-color-scheme:dark){.file-upload-area{border-color:#4b5563;background-color:#1f2937}.file-upload-area:hover:not(.disabled):not(.drag-over){border-color:#6b7280;background-color:#374151}.file-upload-area.drag-over{border-color:#60a5fa;background-color:#eff6ff}.file-upload-area.disabled{border-color:#374151;background-color:#111827}.file-upload-text{color:#d1d5db}.file-upload-primary-text{color:#f3f4f6}.file-upload-secondary-text{color:#9ca3af}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: FileUploadPreviewComponent, selector: "file-upload-preview", inputs: ["file"], outputs: ["remove"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -6419,7 +6419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i1$3.TranslocoService }], propDecorators: { label: [{
+                }] }, { type: i2.TranslocoService }], propDecorators: { label: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -6697,8 +6697,8 @@ class ChangePasswordFormComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: ChangePasswordFormService }, { token: CustomerService }, { token: AdminService }, { token: ToastService }, { token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChangePasswordFormComponent, isStandalone: true, selector: "change-password-form", providers: [AdminService, CustomerService], ngImport: i0, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"'changePassword.title' | transloco\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n  >\n    <form\n      [formGroup]=\"changePasswordForm\"\n      method=\"POST\"\n      class=\"change-password-form-body\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <form-input\n        [label]=\"'changePassword.newPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.newPasswordPlaceholder' | transloco\"\n        name=\"password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"password\"\n      />\n\n      <form-input\n        [label]=\"'changePassword.confirmPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.confirmPasswordPlaceholder' | transloco\"\n        name=\"confirm_password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirm_password\"\n      />\n\n      <div class=\"change-password-form-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'changePassword.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          [disabled]=\"loading() || changePasswordForm.invalid || changePasswordForm.pristine\"\n          [loading]=\"loading()\"\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'changePassword.save' | transloco\"\n          [loadingText]=\"'changePassword.saving' | transloco\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".change-password-form-body{display:flex;flex-direction:column;gap:1rem}.change-password-form-field{flex:1}.change-password-form-actions{display:flex;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: ChangePasswordFormService }, { token: CustomerService }, { token: AdminService }, { token: ToastService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ChangePasswordFormComponent, isStandalone: true, selector: "change-password-form", providers: [AdminService, CustomerService], ngImport: i0, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"'changePassword.title' | transloco\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n  >\n    <form\n      [formGroup]=\"changePasswordForm\"\n      method=\"POST\"\n      class=\"change-password-form-body\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <form-input\n        [label]=\"'changePassword.newPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.newPasswordPlaceholder' | transloco\"\n        name=\"password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"password\"\n      />\n\n      <form-input\n        [label]=\"'changePassword.confirmPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.confirmPasswordPlaceholder' | transloco\"\n        name=\"confirm_password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirm_password\"\n      />\n\n      <div class=\"change-password-form-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'changePassword.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          [disabled]=\"loading() || changePasswordForm.invalid || changePasswordForm.pristine\"\n          [loading]=\"loading()\"\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'changePassword.save' | transloco\"\n          [loadingText]=\"'changePassword.saving' | transloco\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".change-password-form-body{display:flex;flex-direction:column;gap:1rem}.change-password-form-field{flex:1}.change-password-form-actions{display:flex;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChangePasswordFormComponent, decorators: [{
             type: Component,
@@ -6710,7 +6710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         FormInputComponent,
                         AppModalComponent,
                     ], providers: [AdminService, CustomerService], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <app-modal\n    [title]=\"'changePassword.title' | transloco\"\n    [isOpen]=\"isOpen\"\n    (closeModal)=\"onCloseModal()\"\n  >\n    <form\n      [formGroup]=\"changePasswordForm\"\n      method=\"POST\"\n      class=\"change-password-form-body\"\n      (ngSubmit)=\"onConfirmDelete()\"\n    >\n      <form-input\n        [label]=\"'changePassword.newPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.newPasswordPlaceholder' | transloco\"\n        name=\"password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"password\"\n      />\n\n      <form-input\n        [label]=\"'changePassword.confirmPasswordLabel' | transloco\"\n        [placeholder]=\"'changePassword.confirmPasswordPlaceholder' | transloco\"\n        name=\"confirm_password\"\n        type=\"password\"\n        class=\"change-password-form-field\"\n        [required]=\"true\"\n        [autocomplete]=\"false\"\n        formControlName=\"confirm_password\"\n      />\n\n      <div class=\"change-password-form-actions\">\n        <app-button\n          variant=\"tertiary\"\n          [text]=\"'changePassword.cancel' | transloco\"\n          (click)=\"onCloseModal()\"\n          size=\"sm\"\n        />\n\n        <app-button\n          [disabled]=\"loading() || changePasswordForm.invalid || changePasswordForm.pristine\"\n          [loading]=\"loading()\"\n          type=\"submit\"\n          variant=\"primary\"\n          [text]=\"'changePassword.save' | transloco\"\n          [loadingText]=\"'changePassword.saving' | transloco\"\n          size=\"sm\"\n        />\n      </div>\n    </form>\n  </app-modal>\n}\n", styles: [".change-password-form-body{display:flex;flex-direction:column;gap:1rem}.change-password-form-field{flex:1}.change-password-form-actions{display:flex;gap:.75rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ChangePasswordFormService }, { type: CustomerService }, { type: AdminService }, { type: ToastService }, { type: i1$3.TranslocoService }] });
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ChangePasswordFormService }, { type: CustomerService }, { type: AdminService }, { type: ToastService }, { type: i2.TranslocoService }] });
 class AdminSelectComponent {
     platformId;
@@ -8206,7 +8206,7 @@ class PerformanceTicketStatusBadgeComponent {
         return PERFORMANCE_TICKET_STATUS_COLORS[this.ticket.status];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceTicketStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PerformanceTicketStatusBadgeComponent, isStandalone: true, selector: "performance-ticket-status-badge", inputs: { ticket: "ticket", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`performance.ticketStatus.${ticket.status}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PerformanceTicketStatusBadgeComponent, isStandalone: true, selector: "performance-ticket-status-badge", inputs: { ticket: "ticket", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`performance.ticketStatus.${ticket.status}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceTicketStatusBadgeComponent, decorators: [{
             type: Component,
@@ -8225,7 +8225,7 @@ class PerformanceStatusBadgeComponent {
         return PERFORMANCE_STATUS_COLORS[this.performance.status];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PerformanceStatusBadgeComponent, isStandalone: true, selector: "performance-status-badge", inputs: { performance: "performance", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`performance.status.${performance.status}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PerformanceStatusBadgeComponent, isStandalone: true, selector: "performance-status-badge", inputs: { performance: "performance", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`performance.status.${performance.status}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceStatusBadgeComponent, decorators: [{
             type: Component,
@@ -9110,13 +9110,13 @@ class OrderStatusBadgeComponent {
     get statusColors() {
         return ORDER_STATUS_COLORS[this.order.status] ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderStatusBadgeComponent, deps: [{ token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: OrderStatusBadgeComponent, isStandalone: true, selector: "order-status-badge", inputs: { order: "order", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`order.status.${order.status}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderStatusBadgeComponent, deps: [{ token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: OrderStatusBadgeComponent, isStandalone: true, selector: "order-status-badge", inputs: { order: "order", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`order.status.${order.status}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderStatusBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'order-status-badge', standalone: true, imports: [CommonModule, TranslocoModule, AppBadgeComponent], template: "<app-badge\n  [text]=\"`order.status.${order.status}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.TranslocoService }], propDecorators: { order: [{
+        }], ctorParameters: () => [{ type: i2.TranslocoService }], propDecorators: { order: [{
                 type: Input,
                 args: [{ required: true }]
             }], size: [{
@@ -9160,8 +9160,8 @@ class OrderInformationComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderInformationComponent, deps: [{ token: i1$3.TranslocoService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderInformationComponent, isStandalone: true, selector: "order-information", inputs: { order: "order", showPayButton: "showPayButton", createMpPreference: "createMpPreference" }, outputs: { paymentLinkCreated: "paymentLinkCreated" }, ngImport: i0, template: "@if (!!order) {\n  <div class=\"order-information\">\n    <div class=\"order-information__header\">\n      <div>\n        <p class=\"order-information__header-id\">Orden #{{ order.id }}</p>\n        <p class=\"order-information__header-uuid\">{{ order.uuid }}</p>\n      </div>\n\n      <div class=\"order-information__header-actions\">\n        <order-status-badge [order]=\"order\" size=\"xs\" />\n\n        @if (showMpButton) {\n          <app-button\n            [text]=\"'order.mpPayButton' | transloco\"\n            [loadingText]=\"'order.mpPayButtonLoading' | transloco\"\n            [loading]=\"isLoading\"\n            variant=\"secondary\"\n            size=\"xs\"\n            icon=\"ri-wallet-3-line\"\n            (clicked)=\"payWithMercadoPago()\"\n          />\n        }\n      </div>\n    </div>\n\n    <div class=\"order-information__content\">\n      @if (order.show_snapshot && order.show_snapshot['title']) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Evento</p>\n          <p class=\"order-information__content-item-value\">\n            {{ order.show_snapshot['title'] }}\n          </p>\n        </div>\n      }\n\n      @if (order.performance_snapshot && order.performance_snapshot['start_time']) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Fecha de la funci\u00F3n</p>\n          <p class=\"order-information__content-item-value\">\n            {{ order.performance_snapshot['start_time'] | date: 'dd/MM/yyyy hh:mm a' }}\n          </p>\n        </div>\n      }\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Fecha de la compra</p>\n        <p class=\"order-information__content-item-value\">\n          {{ order.created_at | date: 'dd/MM/yyyy hh:mm a' }}\n        </p>\n      </div>\n\n      @if (order.payment_method) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">M\u00E9todo de pago</p>\n          <p class=\"order-information__content-item-value\">\n            {{ `order.paymentMethods.${order.payment_method}` | transloco }}\n          </p>\n        </div>\n      }\n\n      @if (order.service_fee && order.service_fee > 0) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Tarifa de servicio</p>\n          <p class=\"order-information__content-item-value\">\n            ${{ order.service_fee | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        </div>\n      }\n\n      @if (!!order.discount_amount && order.discount_amount > 0) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Descuento</p>\n          <p class=\"order-information__content-item-value\">\n            ${{ order.discount_amount | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        </div>\n      }\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Total</p>\n        @if (order.total_discounted && order.total_discounted >= 0) {\n          <p class=\"order-information__content-item-total_discounted\">\n            <span class=\"discounted\">\n              ${{ order.total_discounted | currency: 'COP' : '' : '1.0-2' }}\n            </span>\n            <span class=\"order-information__content-item-value total\">\n              ${{ order.total | currency: 'COP' : '' : '1.0-2' }}\n            </span>\n          </p>\n        } @else {\n          <p class=\"order-information__content-item-value total\">\n            ${{ order.total | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        }\n      </div>\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">T\u00E9rminos aceptados</p>\n        <app-badge\n          [text]=\"order.terms_accepted ? 'Aceptado' : 'No aceptado'\"\n          [backgroundColor]=\"order.terms_accepted ? '#dcfce7' : '#fee2e2'\"\n          [textColor]=\"order.terms_accepted ? '#16a34a' : '#dc2626'\"\n          size=\"xs\"\n        />\n      </div>\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Procesamiento de datos aceptado</p>\n        <app-badge\n          [text]=\"order.data_processing_accepted ? 'Aceptado' : 'No aceptado'\"\n          [backgroundColor]=\"order.data_processing_accepted ? '#dcfce7' : '#fee2e2'\"\n          [textColor]=\"order.data_processing_accepted ? '#16a34a' : '#dc2626'\"\n          size=\"xs\"\n        />\n      </div>\n\n      @if (order.comments) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Comentarios</p>\n          <p class=\"order-information__content-item-value\">{{ order.comments }}</p>\n        </div>\n      }\n\n      @if (order.address_notes) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Notas de direcci\u00F3n</p>\n          <p class=\"order-information__content-item-value\">{{ order.address_notes }}</p>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".order-information{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-information__header{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;flex-flow:row wrap;gap:.75rem;justify-content:space-between;padding:1rem;width:100%}.order-information__header-id{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-information__header-uuid{color:#9ca3af;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;margin:0;word-break:break-all}.order-information__header-actions{display:inline-flex;flex-flow:row wrap;gap:1rem}.order-information__content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1rem}@media(min-width:768px){.order-information__content{grid-template-columns:repeat(3,minmax(0,1fr))}}.order-information__content-item{align-items:flex-start;display:flex;flex-flow:column nowrap;position:relative;width:100%}.order-information__content-item-title{color:#9ca3af;font-size:.75rem;margin:0;text-transform:uppercase}.order-information__content-item-value{color:#111827;font-weight:500;font-size:.875rem;margin:0}.order-information__content-item-value.total{font-weight:700}.order-information__content-item-total_discounted{display:flex;flex-flow:row nowrap;gap:.25rem;margin:0;width:100%}.order-information__content-item-total_discounted .discounted{color:#111827;font-size:.875rem;font-weight:700}.order-information__content-item-total_discounted .total{color:#9ca3af;margin:0;text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OrderStatusBadgeComponent, selector: "order-status-badge", inputs: ["order", "size"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderInformationComponent, deps: [{ token: i2.TranslocoService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderInformationComponent, isStandalone: true, selector: "order-information", inputs: { order: "order", showPayButton: "showPayButton", createMpPreference: "createMpPreference" }, outputs: { paymentLinkCreated: "paymentLinkCreated" }, ngImport: i0, template: "@if (!!order) {\n  <div class=\"order-information\">\n    <div class=\"order-information__header\">\n      <div>\n        <p class=\"order-information__header-id\">Orden #{{ order.id }}</p>\n        <p class=\"order-information__header-uuid\">{{ order.uuid }}</p>\n      </div>\n\n      <div class=\"order-information__header-actions\">\n        <order-status-badge [order]=\"order\" size=\"xs\" />\n\n        @if (showMpButton) {\n          <app-button\n            [text]=\"'order.mpPayButton' | transloco\"\n            [loadingText]=\"'order.mpPayButtonLoading' | transloco\"\n            [loading]=\"isLoading\"\n            variant=\"secondary\"\n            size=\"xs\"\n            icon=\"ri-wallet-3-line\"\n            (clicked)=\"payWithMercadoPago()\"\n          />\n        }\n      </div>\n    </div>\n\n    <div class=\"order-information__content\">\n      @if (order.show_snapshot && order.show_snapshot['title']) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Evento</p>\n          <p class=\"order-information__content-item-value\">\n            {{ order.show_snapshot['title'] }}\n          </p>\n        </div>\n      }\n\n      @if (order.performance_snapshot && order.performance_snapshot['start_time']) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Fecha de la funci\u00F3n</p>\n          <p class=\"order-information__content-item-value\">\n            {{ order.performance_snapshot['start_time'] | date: 'dd/MM/yyyy hh:mm a' }}\n          </p>\n        </div>\n      }\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Fecha de la compra</p>\n        <p class=\"order-information__content-item-value\">\n          {{ order.created_at | date: 'dd/MM/yyyy hh:mm a' }}\n        </p>\n      </div>\n\n      @if (order.payment_method) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">M\u00E9todo de pago</p>\n          <p class=\"order-information__content-item-value\">\n            {{ `order.paymentMethods.${order.payment_method}` | transloco }}\n          </p>\n        </div>\n      }\n\n      @if (order.service_fee && order.service_fee > 0) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Tarifa de servicio</p>\n          <p class=\"order-information__content-item-value\">\n            ${{ order.service_fee | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        </div>\n      }\n\n      @if (!!order.discount_amount && order.discount_amount > 0) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Descuento</p>\n          <p class=\"order-information__content-item-value\">\n            ${{ order.discount_amount | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        </div>\n      }\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Total</p>\n        @if (order.total_discounted && order.total_discounted >= 0) {\n          <p class=\"order-information__content-item-total_discounted\">\n            <span class=\"discounted\">\n              ${{ order.total_discounted | currency: 'COP' : '' : '1.0-2' }}\n            </span>\n            <span class=\"order-information__content-item-value total\">\n              ${{ order.total | currency: 'COP' : '' : '1.0-2' }}\n            </span>\n          </p>\n        } @else {\n          <p class=\"order-information__content-item-value total\">\n            ${{ order.total | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        }\n      </div>\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">T\u00E9rminos aceptados</p>\n        <app-badge\n          [text]=\"order.terms_accepted ? 'Aceptado' : 'No aceptado'\"\n          [backgroundColor]=\"order.terms_accepted ? '#dcfce7' : '#fee2e2'\"\n          [textColor]=\"order.terms_accepted ? '#16a34a' : '#dc2626'\"\n          size=\"xs\"\n        />\n      </div>\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Procesamiento de datos aceptado</p>\n        <app-badge\n          [text]=\"order.data_processing_accepted ? 'Aceptado' : 'No aceptado'\"\n          [backgroundColor]=\"order.data_processing_accepted ? '#dcfce7' : '#fee2e2'\"\n          [textColor]=\"order.data_processing_accepted ? '#16a34a' : '#dc2626'\"\n          size=\"xs\"\n        />\n      </div>\n\n      @if (order.comments) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Comentarios</p>\n          <p class=\"order-information__content-item-value\">{{ order.comments }}</p>\n        </div>\n      }\n\n      @if (order.address_notes) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Notas de direcci\u00F3n</p>\n          <p class=\"order-information__content-item-value\">{{ order.address_notes }}</p>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".order-information{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-information__header{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;flex-flow:row wrap;gap:.75rem;justify-content:space-between;padding:1rem;width:100%}.order-information__header-id{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-information__header-uuid{color:#9ca3af;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;margin:0;word-break:break-all}.order-information__header-actions{display:inline-flex;flex-flow:row wrap;gap:1rem}.order-information__content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1rem}@media(min-width:768px){.order-information__content{grid-template-columns:repeat(3,minmax(0,1fr))}}.order-information__content-item{align-items:flex-start;display:flex;flex-flow:column nowrap;position:relative;width:100%}.order-information__content-item-title{color:#9ca3af;font-size:.75rem;margin:0;text-transform:uppercase}.order-information__content-item-value{color:#111827;font-weight:500;font-size:.875rem;margin:0}.order-information__content-item-value.total{font-weight:700}.order-information__content-item-total_discounted{display:flex;flex-flow:row nowrap;gap:.25rem;margin:0;width:100%}.order-information__content-item-total_discounted .discounted{color:#111827;font-size:.875rem;font-weight:700}.order-information__content-item-total_discounted .total{color:#9ca3af;margin:0;text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OrderStatusBadgeComponent, selector: "order-status-badge", inputs: ["order", "size"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderInformationComponent, decorators: [{
             type: Component,
@@ -9172,7 +9172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AppBadgeComponent,
                         AppButtonComponent,
                     ], encapsulation: ViewEncapsulation.None, template: "@if (!!order) {\n  <div class=\"order-information\">\n    <div class=\"order-information__header\">\n      <div>\n        <p class=\"order-information__header-id\">Orden #{{ order.id }}</p>\n        <p class=\"order-information__header-uuid\">{{ order.uuid }}</p>\n      </div>\n\n      <div class=\"order-information__header-actions\">\n        <order-status-badge [order]=\"order\" size=\"xs\" />\n\n        @if (showMpButton) {\n          <app-button\n            [text]=\"'order.mpPayButton' | transloco\"\n            [loadingText]=\"'order.mpPayButtonLoading' | transloco\"\n            [loading]=\"isLoading\"\n            variant=\"secondary\"\n            size=\"xs\"\n            icon=\"ri-wallet-3-line\"\n            (clicked)=\"payWithMercadoPago()\"\n          />\n        }\n      </div>\n    </div>\n\n    <div class=\"order-information__content\">\n      @if (order.show_snapshot && order.show_snapshot['title']) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Evento</p>\n          <p class=\"order-information__content-item-value\">\n            {{ order.show_snapshot['title'] }}\n          </p>\n        </div>\n      }\n\n      @if (order.performance_snapshot && order.performance_snapshot['start_time']) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Fecha de la funci\u00F3n</p>\n          <p class=\"order-information__content-item-value\">\n            {{ order.performance_snapshot['start_time'] | date: 'dd/MM/yyyy hh:mm a' }}\n          </p>\n        </div>\n      }\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Fecha de la compra</p>\n        <p class=\"order-information__content-item-value\">\n          {{ order.created_at | date: 'dd/MM/yyyy hh:mm a' }}\n        </p>\n      </div>\n\n      @if (order.payment_method) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">M\u00E9todo de pago</p>\n          <p class=\"order-information__content-item-value\">\n            {{ `order.paymentMethods.${order.payment_method}` | transloco }}\n          </p>\n        </div>\n      }\n\n      @if (order.service_fee && order.service_fee > 0) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Tarifa de servicio</p>\n          <p class=\"order-information__content-item-value\">\n            ${{ order.service_fee | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        </div>\n      }\n\n      @if (!!order.discount_amount && order.discount_amount > 0) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Descuento</p>\n          <p class=\"order-information__content-item-value\">\n            ${{ order.discount_amount | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        </div>\n      }\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Total</p>\n        @if (order.total_discounted && order.total_discounted >= 0) {\n          <p class=\"order-information__content-item-total_discounted\">\n            <span class=\"discounted\">\n              ${{ order.total_discounted | currency: 'COP' : '' : '1.0-2' }}\n            </span>\n            <span class=\"order-information__content-item-value total\">\n              ${{ order.total | currency: 'COP' : '' : '1.0-2' }}\n            </span>\n          </p>\n        } @else {\n          <p class=\"order-information__content-item-value total\">\n            ${{ order.total | currency: 'COP' : '' : '1.0-2' }}\n          </p>\n        }\n      </div>\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">T\u00E9rminos aceptados</p>\n        <app-badge\n          [text]=\"order.terms_accepted ? 'Aceptado' : 'No aceptado'\"\n          [backgroundColor]=\"order.terms_accepted ? '#dcfce7' : '#fee2e2'\"\n          [textColor]=\"order.terms_accepted ? '#16a34a' : '#dc2626'\"\n          size=\"xs\"\n        />\n      </div>\n\n      <div class=\"order-information__content-item\">\n        <p class=\"order-information__content-item-title\">Procesamiento de datos aceptado</p>\n        <app-badge\n          [text]=\"order.data_processing_accepted ? 'Aceptado' : 'No aceptado'\"\n          [backgroundColor]=\"order.data_processing_accepted ? '#dcfce7' : '#fee2e2'\"\n          [textColor]=\"order.data_processing_accepted ? '#16a34a' : '#dc2626'\"\n          size=\"xs\"\n        />\n      </div>\n\n      @if (order.comments) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Comentarios</p>\n          <p class=\"order-information__content-item-value\">{{ order.comments }}</p>\n        </div>\n      }\n\n      @if (order.address_notes) {\n        <div class=\"order-information__content-item\">\n          <p class=\"order-information__content-item-title\">Notas de direcci\u00F3n</p>\n          <p class=\"order-information__content-item-value\">{{ order.address_notes }}</p>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".order-information{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-information__header{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;flex-flow:row wrap;gap:.75rem;justify-content:space-between;padding:1rem;width:100%}.order-information__header-id{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-information__header-uuid{color:#9ca3af;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;margin:0;word-break:break-all}.order-information__header-actions{display:inline-flex;flex-flow:row wrap;gap:1rem}.order-information__content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1rem}@media(min-width:768px){.order-information__content{grid-template-columns:repeat(3,minmax(0,1fr))}}.order-information__content-item{align-items:flex-start;display:flex;flex-flow:column nowrap;position:relative;width:100%}.order-information__content-item-title{color:#9ca3af;font-size:.75rem;margin:0;text-transform:uppercase}.order-information__content-item-value{color:#111827;font-weight:500;font-size:.875rem;margin:0}.order-information__content-item-value.total{font-weight:700}.order-information__content-item-total_discounted{display:flex;flex-flow:row nowrap;gap:.25rem;margin:0;width:100%}.order-information__content-item-total_discounted .discounted{color:#111827;font-size:.875rem;font-weight:700}.order-information__content-item-total_discounted .total{color:#9ca3af;margin:0;text-decoration:line-through}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.TranslocoService }, { type: ToastService }], propDecorators: { order: [{
+        }], ctorParameters: () => [{ type: i2.TranslocoService }, { type: ToastService }], propDecorators: { order: [{
                 type: Input,
                 args: [{ required: true }]
             }], showPayButton: [{
@@ -9193,13 +9193,13 @@ class OrderItemTypeBadgeComponent {
     get statusColors() {
         return ORDER_ITEM_TYPES_COLORS[this.item.item_type] ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderItemTypeBadgeComponent, deps: [{ token: i1$3.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: OrderItemTypeBadgeComponent, isStandalone: true, selector: "order-item-type-badge", inputs: { item: "item", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`order.itemType.${item.item_type}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderItemTypeBadgeComponent, deps: [{ token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: OrderItemTypeBadgeComponent, isStandalone: true, selector: "order-item-type-badge", inputs: { item: "item", size: "size" }, ngImport: i0, template: "<app-badge\n  [text]=\"`order.itemType.${item.item_type}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderItemTypeBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'order-item-type-badge', standalone: true, imports: [CommonModule, TranslocoModule, AppBadgeComponent], template: "<app-badge\n  [text]=\"`order.itemType.${item.item_type}` | transloco\"\n  [backgroundColor]=\"statusColors.bg\"\n  [textColor]=\"statusColors.text\"\n  [size]=\"size\"\n/>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.TranslocoService }], propDecorators: { item: [{
+        }], ctorParameters: () => [{ type: i2.TranslocoService }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
             }], size: [{
@@ -9445,7 +9445,7 @@ class OrderDiscountAppliedComponent {
     get hasDiscount() {
         return this.discountInfo.type !== null && this.discountInfo.value > 0;
     }
-    get discountPct() {
+    get discountPercentage() {
         if (this.discountInfo.discountType !== 'percentage')
             return null;
         return this.order.coupon_snapshot?.['discount_value'] ?? null;
@@ -9456,7 +9456,7 @@ class OrderDiscountAppliedComponent {
         return ORDER_DISCOUNT_COLORS[this.discountInfo.type] ?? { text: '', bg: '' };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderDiscountAppliedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderDiscountAppliedComponent, isStandalone: true, selector: "order-discount-applied", inputs: { order: "order" }, ngImport: i0, template: "@if (hasDiscount) {\n  <div class=\"order-discount-applied\">\n    <div class=\"order-discount-applied__content\">\n      <div class=\"order-discount-applied__content-item discount-icon\">\n        <div class=\"order-discount-applied__content-item-icon-wrapper\">\n          <i class=\"order-discount-applied__content-item-icon\" [class]=\"discountInfo.icon\"></i>\n        </div>\n      </div>\n\n      <div class=\"order-discount-applied__content-item\">\n        <p class=\"order-discount-applied__content-item-title\">Tipo de descuento</p>\n        <app-badge\n          [text]=\"'order.discountTypes.' + discountInfo.type | transloco\"\n          [backgroundColor]=\"badgeColors.bg\"\n          [textColor]=\"badgeColors.text\"\n          size=\"xs\"\n        />\n      </div>\n\n      @if (discountInfo.code) {\n        <div class=\"order-discount-applied__content-item\">\n          <p class=\"order-discount-applied__content-item-title\">C\u00F3digo</p>\n          <p class=\"order-discount-applied__content-item-value\">{{ discountInfo.code }}</p>\n        </div>\n      }\n\n      @if (discountInfo.name && discountInfo.name !== discountInfo.code) {\n        <div class=\"order-discount-applied__content-item\">\n          <p class=\"order-discount-applied__content-item-title\">Nombre</p>\n          <p class=\"order-discount-applied__content-item-value\">{{ discountInfo.name }}</p>\n        </div>\n      }\n\n      <div class=\"order-discount-applied__content-item\">\n        <p class=\"order-discount-applied__content-item-title\">Valor del descuento</p>\n        <p class=\"order-discount-applied__content-item-value\">\n          ${{ discountInfo.value | currency: 'COP' : '' : '1.0-2' }}\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".order-discount-applied{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-discount-applied__content{display:flex;flex-flow:row wrap;gap:1rem;padding:1rem}.order-discount-applied__content-item{align-items:flex-start;display:flex;flex-flow:column nowrap;flex:1 1 calc(50% - 1rem);position:relative}@media(min-width:768px){.order-discount-applied__content-item{flex:1 1 0}}.order-discount-applied__content-item.discount-icon{flex:0 0 auto;justify-content:center;width:auto}@media(min-width:768px){.order-discount-applied__content-item.discount-icon{flex:0 0 auto}}.order-discount-applied__content-item-title{color:#9ca3af;font-size:.75rem;margin:0;text-transform:uppercase}.order-discount-applied__content-item-value{color:#111827;font-weight:500;font-size:.875rem;margin:0}.order-discount-applied__content-item-icon-wrapper{align-items:center;border-radius:.375rem;border:1px solid #e5e7eb;display:flex;height:2.5rem;justify-content:center;width:2.5rem}.order-discount-applied__content-item-icon-wrapper i{font-size:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderDiscountAppliedComponent, isStandalone: true, selector: "order-discount-applied", inputs: { order: "order" }, ngImport: i0, template: "@if (hasDiscount) {\n  <div class=\"order-discount-applied\">\n    <div class=\"order-discount-applied__content\">\n      <div class=\"order-discount-applied__content-item discount-icon\">\n        <div class=\"order-discount-applied__content-item-icon-wrapper\">\n          <i class=\"order-discount-applied__content-item-icon\" [class]=\"discountInfo.icon\"></i>\n        </div>\n      </div>\n\n      <div class=\"order-discount-applied__content-item\">\n        <p class=\"order-discount-applied__content-item-title\">Tipo de descuento</p>\n        <app-badge\n          [text]=\"'order.discountTypes.' + discountInfo.type | transloco\"\n          [backgroundColor]=\"badgeColors.bg\"\n          [textColor]=\"badgeColors.text\"\n          size=\"xs\"\n        />\n      </div>\n\n      @if (discountInfo.code) {\n        <div class=\"order-discount-applied__content-item\">\n          <p class=\"order-discount-applied__content-item-title\">C\u00F3digo</p>\n          <p class=\"order-discount-applied__content-item-value\">{{ discountInfo.code }}</p>\n        </div>\n      }\n\n      @if (discountInfo.name && discountInfo.name !== discountInfo.code) {\n        <div class=\"order-discount-applied__content-item\">\n          <p class=\"order-discount-applied__content-item-title\">Nombre</p>\n          <p class=\"order-discount-applied__content-item-value\">{{ discountInfo.name }}</p>\n        </div>\n      }\n\n      <div class=\"order-discount-applied__content-item\">\n        <p class=\"order-discount-applied__content-item-title\">Valor del descuento</p>\n        <p class=\"order-discount-applied__content-item-value\">\n          ${{ discountInfo.value | currency: 'COP' : '' : '1.0-2' }}\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".order-discount-applied{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-discount-applied__content{display:flex;flex-flow:row wrap;gap:1rem;padding:1rem}.order-discount-applied__content-item{align-items:flex-start;display:flex;flex-flow:column nowrap;flex:1 1 calc(50% - 1rem);position:relative}@media(min-width:768px){.order-discount-applied__content-item{flex:1 1 0}}.order-discount-applied__content-item.discount-icon{flex:0 0 auto;justify-content:center;width:auto}@media(min-width:768px){.order-discount-applied__content-item.discount-icon{flex:0 0 auto}}.order-discount-applied__content-item-title{color:#9ca3af;font-size:.75rem;margin:0;text-transform:uppercase}.order-discount-applied__content-item-value{color:#111827;font-weight:500;font-size:.875rem;margin:0}.order-discount-applied__content-item-icon-wrapper{align-items:center;border-radius:.375rem;border:1px solid #e5e7eb;display:flex;height:2.5rem;justify-content:center;width:2.5rem}.order-discount-applied__content-item-icon-wrapper i{font-size:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderDiscountAppliedComponent, decorators: [{
             type: Component,
@@ -9556,7 +9556,7 @@ class OrderTransactionDetailsModalComponent {
         this.modalService.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderTransactionDetailsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderTransactionDetailsModalComponent, isStandalone: true, selector: "order-transaction-details-modal", inputs: { isOpen: "isOpen", transaction: "transaction" }, ngImport: i0, template: "<app-modal\n  [isOpen]=\"modalIsOpen\"\n  (closeModal)=\"onClose()\"\n  [title]=\"'order.transactionDetails.title' | transloco\"\n  size=\"lg\"\n>\n  @if (selectedTransaction(); as tx) {\n    <div class=\"order-transaction-details\">\n      <div class=\"order-transaction-details__grid\">\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.id' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.id }}</span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.paymentMethod' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">\n            {{ 'order.paymentMethods.' + tx.payment_gateway | transloco }}\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.status' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">\n            <app-badge\n              [text]=\"'order.transactionStatus.' + tx.status | transloco\"\n              [backgroundColor]=\"txColors[tx.status].bg\"\n              [textColor]=\"txColors[tx.status].text\"\n              size=\"xs\"\n            />\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.amount' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">\n            ${{ tx.amount | number: '1.0-2' }} {{ tx.currency }}\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.currency' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.currency }}</span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.gatewayId' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value gateway-id\">\n            {{ tx.gateway_transaction_id }}\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.createdAt' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.created_at | date: 'medium' }}</span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.updatedAt' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.updated_at | date: 'medium' }}</span>\n        </div>\n      </div>\n\n      <div class=\"order-transaction-details__item\">\n        <span class=\"order-transaction-details__label\">\n          {{ 'order.transactionDetails.labels.gatewayResponse' | transloco }}\n        </span>\n        @if (gatewayResponse) {\n          <pre class=\"order-transaction-details__json\">{{ gatewayResponse }}</pre>\n        } @else {\n          <span class=\"order-transaction-details__value\">\u2014</span>\n        }\n      </div>\n    </div>\n  }\n</app-modal>\n", styles: [".order-transaction-details{display:flex;flex-direction:column;gap:1.5rem}.order-transaction-details__grid{display:grid;gap:1rem 1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}.order-transaction-details__item{display:flex;flex-direction:column;gap:.25rem}.order-transaction-details__label{color:#6b7280;font-size:.75rem;font-weight:700;text-transform:uppercase}.order-transaction-details__value{color:#374151;font-size:.875rem}@media(prefers-color-scheme:dark){.order-transaction-details__value{color:#d1d5db}}.order-transaction-details__json{background-color:#f9fafb;border:1px solid #f3f4f6;border-radius:.375rem;color:#374151;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.625;margin:0;max-height:20rem;overflow:auto;padding:.75rem 1rem;white-space:pre-wrap;word-break:break-word}@media(prefers-color-scheme:dark){.order-transaction-details__json{background-color:#111827}}@media(prefers-color-scheme:dark){.order-transaction-details__json{border-color:#374151}}@media(prefers-color-scheme:dark){.order-transaction-details__json{color:#d1d5db}}.order-transaction-details .gateway-id{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderTransactionDetailsModalComponent, isStandalone: true, selector: "order-transaction-details-modal", inputs: { isOpen: "isOpen", transaction: "transaction" }, ngImport: i0, template: "<app-modal\n  [isOpen]=\"modalIsOpen\"\n  (closeModal)=\"onClose()\"\n  [title]=\"'order.transactionDetails.title' | transloco\"\n  size=\"lg\"\n>\n  @if (selectedTransaction(); as tx) {\n    <div class=\"order-transaction-details\">\n      <div class=\"order-transaction-details__grid\">\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.id' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.id }}</span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.paymentMethod' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">\n            {{ 'order.paymentMethods.' + tx.payment_gateway | transloco }}\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.status' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">\n            <app-badge\n              [text]=\"'order.transactionStatus.' + tx.status | transloco\"\n              [backgroundColor]=\"txColors[tx.status].bg\"\n              [textColor]=\"txColors[tx.status].text\"\n              size=\"xs\"\n            />\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.amount' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">\n            ${{ tx.amount | number: '1.0-2' }} {{ tx.currency }}\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.currency' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.currency }}</span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.gatewayId' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value gateway-id\">\n            {{ tx.gateway_transaction_id }}\n          </span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.createdAt' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.created_at | date: 'medium' }}</span>\n        </div>\n\n        <div class=\"order-transaction-details__item\">\n          <span class=\"order-transaction-details__label\">\n            {{ 'order.transactionDetails.labels.updatedAt' | transloco }}\n          </span>\n          <span class=\"order-transaction-details__value\">{{ tx.updated_at | date: 'medium' }}</span>\n        </div>\n      </div>\n\n      <div class=\"order-transaction-details__item\">\n        <span class=\"order-transaction-details__label\">\n          {{ 'order.transactionDetails.labels.gatewayResponse' | transloco }}\n        </span>\n        @if (gatewayResponse) {\n          <pre class=\"order-transaction-details__json\">{{ gatewayResponse }}</pre>\n        } @else {\n          <span class=\"order-transaction-details__value\">\u2014</span>\n        }\n      </div>\n    </div>\n  }\n</app-modal>\n", styles: [".order-transaction-details{display:flex;flex-direction:column;gap:1.5rem}.order-transaction-details__grid{display:grid;gap:1rem 1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}.order-transaction-details__item{display:flex;flex-direction:column;gap:.25rem}.order-transaction-details__label{color:#6b7280;font-size:.75rem;font-weight:700;text-transform:uppercase}.order-transaction-details__value{color:#374151;font-size:.875rem}@media(prefers-color-scheme:dark){.order-transaction-details__value{color:#d1d5db}}.order-transaction-details__json{background-color:#f9fafb;border:1px solid #f3f4f6;border-radius:.375rem;color:#374151;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.625;margin:0;max-height:20rem;overflow:auto;padding:.75rem 1rem;white-space:pre-wrap;word-break:break-word}@media(prefers-color-scheme:dark){.order-transaction-details__json{background-color:#111827}}@media(prefers-color-scheme:dark){.order-transaction-details__json{border-color:#374151}}@media(prefers-color-scheme:dark){.order-transaction-details__json{color:#d1d5db}}.order-transaction-details .gateway-id{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderTransactionDetailsModalComponent, decorators: [{
             type: Component,
@@ -9586,7 +9586,7 @@ class OrderTransactionsComponent {
         this.transactionDetailsModalService.open(transaction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderTransactionsComponent, deps: [{ token: OrderTransactionDetailsModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderTransactionsComponent, isStandalone: true, selector: "order-transactions", inputs: { order: "order" }, ngImport: i0, template: "@if (hasTransactions) {\n  <div class=\"order-transactions\">\n    <div class=\"order-transactions__header\">\n      <p class=\"order-transactions__header-title\">\n        Transacciones ({{ transactions.length | number: '1.0' }})\n      </p>\n    </div>\n    <div class=\"order-transactions__table-container\">\n      <table class=\"order-transactions__table\">\n        <thead class=\"order-transactions__table-head\">\n          <tr class=\"order-transactions__table-head-row\">\n            <th class=\"order-transactions__table-head-cell\">Medio de pago</th>\n            <th class=\"order-transactions__table-head-cell\">Estado</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Valor</th>\n            <th class=\"order-transactions__table-head-cell\">ID transacci\u00F3n</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Acciones</th>\n          </tr>\n        </thead>\n        <tbody class=\"order-transactions__table-body\">\n          @for (tx of transactions; track tx.id) {\n            <tr class=\"order-transactions__table-body-row\">\n              <td class=\"order-transactions__table-body-cell\">\n                {{ 'order.paymentMethods.' + tx.payment_gateway | transloco }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                <app-badge\n                  [text]=\"'order.transactionStatus.' + tx.status | transloco\"\n                  [backgroundColor]=\"txColors[tx.status].bg\"\n                  [textColor]=\"txColors[tx.status].text\"\n                  size=\"xs\"\n                />\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                ${{ tx.amount | number: '1.0-2' }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                {{ tx.gateway_transaction_id }}\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                <app-button\n                  icon=\"ri-eye-line\"\n                  variant=\"tertiary\"\n                  size=\"xs\"\n                  (clicked)=\"openTransaction(tx)\"\n                  [title]=\"'order.transactionDetails.actions.view' | transloco\"\n                />\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </div>\n\n  <order-transaction-details-modal />\n}\n", styles: [".order-transactions{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-transactions__header{align-items:center;display:flex;padding:1rem;width:100%}.order-transactions__header-title{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-transactions__table-container{overflow-x:auto}.order-transactions__table{border-collapse:collapse;font-size:.875rem;width:100%}.order-transactions__table-head-row{background-color:#f9fafb;text-align:left}.order-transactions__table-head-cell{color:#6b7280;font-size:.75rem;font-weight:700;padding:.75rem 1.5rem;text-transform:uppercase}.order-transactions__table-head-cell.text-right{text-align:right}.order-transactions__table-body>:not(:last-child){border-bottom:1px solid #f9fafb}.order-transactions__table-body-row{transition:all .4s ease}.order-transactions__table-body-row:hover{background-color:#f9fafb}.order-transactions__table-body-cell{color:#374151;padding:.75rem 1.5rem;white-space:nowrap}.order-transactions__table-body-cell.text-right{text-align:right}.order-transactions__table-body-cell .gateway-id{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: OrderTransactionDetailsModalComponent, selector: "order-transaction-details-modal", inputs: ["isOpen", "transaction"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OrderTransactionsComponent, isStandalone: true, selector: "order-transactions", inputs: { order: "order" }, ngImport: i0, template: "@if (hasTransactions) {\n  <div class=\"order-transactions\">\n    <div class=\"order-transactions__header\">\n      <p class=\"order-transactions__header-title\">\n        Transacciones ({{ transactions.length | number: '1.0' }})\n      </p>\n    </div>\n    <div class=\"order-transactions__table-container\">\n      <table class=\"order-transactions__table\">\n        <thead class=\"order-transactions__table-head\">\n          <tr class=\"order-transactions__table-head-row\">\n            <th class=\"order-transactions__table-head-cell\">Medio de pago</th>\n            <th class=\"order-transactions__table-head-cell\">Estado</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Valor</th>\n            <th class=\"order-transactions__table-head-cell\">ID transacci\u00F3n</th>\n            <th class=\"order-transactions__table-head-cell text-right\">Acciones</th>\n          </tr>\n        </thead>\n        <tbody class=\"order-transactions__table-body\">\n          @for (tx of transactions; track tx.id) {\n            <tr class=\"order-transactions__table-body-row\">\n              <td class=\"order-transactions__table-body-cell\">\n                {{ 'order.paymentMethods.' + tx.payment_gateway | transloco }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                <app-badge\n                  [text]=\"'order.transactionStatus.' + tx.status | transloco\"\n                  [backgroundColor]=\"txColors[tx.status].bg\"\n                  [textColor]=\"txColors[tx.status].text\"\n                  size=\"xs\"\n                />\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                ${{ tx.amount | number: '1.0-2' }}\n              </td>\n              <td class=\"order-transactions__table-body-cell\">\n                {{ tx.gateway_transaction_id }}\n              </td>\n              <td class=\"order-transactions__table-body-cell text-right\">\n                <app-button\n                  icon=\"ri-eye-line\"\n                  variant=\"tertiary\"\n                  size=\"xs\"\n                  (clicked)=\"openTransaction(tx)\"\n                  [title]=\"'order.transactionDetails.actions.view' | transloco\"\n                />\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </div>\n\n  <order-transaction-details-modal />\n}\n", styles: [".order-transactions{background-color:#fff;border-radius:.5rem;border:1px solid #f3f4f6;box-sizing:border-box;overflow:hidden;position:relative;width:100%}.order-transactions__header{align-items:center;display:flex;padding:1rem;width:100%}.order-transactions__header-title{color:#6b7280;font-size:.875rem;font-weight:700;margin:0}.order-transactions__table-container{overflow-x:auto}.order-transactions__table{border-collapse:collapse;font-size:.875rem;width:100%}.order-transactions__table-head-row{background-color:#f9fafb;text-align:left}.order-transactions__table-head-cell{color:#6b7280;font-size:.75rem;font-weight:700;padding:.75rem 1.5rem;text-transform:uppercase}.order-transactions__table-head-cell.text-right{text-align:right}.order-transactions__table-body>:not(:last-child){border-bottom:1px solid #f9fafb}.order-transactions__table-body-row{transition:all .4s ease}.order-transactions__table-body-row:hover{background-color:#f9fafb}.order-transactions__table-body-cell{color:#374151;padding:.75rem 1.5rem;white-space:nowrap}.order-transactions__table-body-cell.text-right{text-align:right}.order-transactions__table-body-cell .gateway-id{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: OrderTransactionDetailsModalComponent, selector: "order-transaction-details-modal", inputs: ["isOpen", "transaction"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OrderTransactionsComponent, decorators: [{
             type: Component,
@@ -9623,7 +9623,7 @@ class VipCardStatusBadgeComponent {
         return `vipCard.status.${this.card.status}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VipCardStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VipCardStatusBadgeComponent, isStandalone: true, selector: "vip-card-status-badge", inputs: { card: "card" }, ngImport: i0, template: "<app-badge [text]=\"statusTranslationKey | transloco\" [color]=\"statusColor\" size=\"xs\" />\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VipCardStatusBadgeComponent, isStandalone: true, selector: "vip-card-status-badge", inputs: { card: "card" }, ngImport: i0, template: "<app-badge [text]=\"statusTranslationKey | transloco\" [color]=\"statusColor\" size=\"xs\" />\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VipCardStatusBadgeComponent, decorators: [{
             type: Component,
@@ -9647,6 +9647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class VipRechargeModalComponent {
     fb;
+    transloco;
     title = 'Recargar tarjeta VIP';
     submitLabel = 'Recargar';
     loading = false;
@@ -9655,11 +9656,33 @@ class VipRechargeModalComponent {
     closeModal = new EventEmitter();
     confirm = new EventEmitter();
     rechargeForm;
-    constructor(fb) {
+    paymentMethodOptions = [];
+    constructor(fb, transloco) {
         this.fb = fb;
+        this.transloco = transloco;
         this.rechargeForm = this.fb.group({
             amount: ['', [Validators.required, Validators.min(this.minAmount)]],
         });
+        this.paymentMethodOptions = [
+            {
+                label: this.transloco.translate('order.paymentMethods.payroll'),
+                value: PaymentMethod.PAYROLL,
+            },
+            { label: this.transloco.translate('order.paymentMethods.cash'), value: PaymentMethod.CASH },
+            {
+                label: this.transloco.translate('order.paymentMethods.datafono'),
+                value: PaymentMethod.DATAFONO,
+            },
+            {
+                label: this.transloco.translate('order.paymentMethods.internal_exchange'),
+                value: PaymentMethod.INTERNAL_EXCHANGE,
+            },
+            {
+                label: this.transloco.translate('order.paymentMethods.customer_exchange'),
+                value: PaymentMethod.CLIENT_EXCHANGE,
+            },
+            { label: 'Mercado Pago', value: PaymentMethod.MERCADO_PAGO },
+        ];
     }
     onClose() {
         this.rechargeForm.reset();
@@ -9670,8 +9693,8 @@ class VipRechargeModalComponent {
             return;
         this.confirm.emit({ amount: Number(this.rechargeForm.value.amount) });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VipRechargeModalComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VipRechargeModalComponent, isStandalone: true, selector: "vip-recharge-modal", inputs: { title: "title", submitLabel: "submitLabel", loading: "loading", minAmount: "minAmount", isOpen: "isOpen" }, outputs: { closeModal: "closeModal", confirm: "confirm" }, ngImport: i0, template: "<app-modal [isOpen]=\"isOpen\" [title]=\"title\" size=\"md\" (closeModal)=\"onClose()\">\n  <form [formGroup]=\"rechargeForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"vip-recharge-modal\">\n      <form-input\n        formControlName=\"amount\"\n        label=\"Monto\"\n        type=\"number\"\n        [min]=\"minAmount\"\n        [step]=\"1000\"\n        [required]=\"true\"\n        placeholder=\"Ingresa el monto a recargar\"\n      />\n\n      <p class=\"vip-recharge-modal-hint\">\n        Monto m\u00EDnimo: {{ minAmount | currency: 'COP' : 'symbol-narrow' : '1.0-0' }}\n      </p>\n    </div>\n\n    <div class=\"vip-recharge-modal-actions\">\n      <app-button\n        type=\"button\"\n        variant=\"tertiary\"\n        text=\"Cancelar\"\n        size=\"sm\"\n        (clicked)=\"onClose()\"\n      />\n\n      <app-button\n        type=\"submit\"\n        size=\"sm\"\n        variant=\"primary\"\n        [text]=\"submitLabel\"\n        [loading]=\"loading\"\n        [disabled]=\"rechargeForm.invalid\"\n      />\n    </div>\n  </form>\n</app-modal>\n", styles: [".vip-recharge-modal-hint{display:inline-flex;margin-top:1rem;font-size:12px;color:#6b7280}.vip-recharge-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VipRechargeModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VipRechargeModalComponent, isStandalone: true, selector: "vip-recharge-modal", inputs: { title: "title", submitLabel: "submitLabel", loading: "loading", minAmount: "minAmount", isOpen: "isOpen" }, outputs: { closeModal: "closeModal", confirm: "confirm" }, ngImport: i0, template: "<app-modal [isOpen]=\"isOpen\" [title]=\"title\" size=\"md\" (closeModal)=\"onClose()\">\n  <form [formGroup]=\"rechargeForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"vip-recharge-modal\">\n      <async-select\n        label=\"M\u00E9todo de pago\"\n        placeholder=\"Selecciona un m\u00E9todo de pago\"\n        name=\"payment_method\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [items]=\"paymentMethodOptions\"\n        formControlName=\"payment_method\"\n      />\n\n      <div>\n        <form-input\n          formControlName=\"amount\"\n          label=\"Monto\"\n          type=\"number\"\n          [min]=\"minAmount\"\n          [step]=\"1000\"\n          [required]=\"true\"\n          placeholder=\"Ingresa el monto a recargar\"\n        />\n\n        <p class=\"vip-recharge-modal-hint\">\n          Monto m\u00EDnimo: {{ minAmount | currency: 'COP' : 'symbol-narrow' : '1.0-0' }}\n        </p>\n      </div>\n    </div>\n\n    <div class=\"vip-recharge-modal-actions\">\n      <app-button\n        type=\"button\"\n        variant=\"tertiary\"\n        text=\"Cancelar\"\n        size=\"sm\"\n        (clicked)=\"onClose()\"\n      />\n\n      <app-button\n        type=\"submit\"\n        size=\"sm\"\n        variant=\"primary\"\n        [text]=\"submitLabel\"\n        [loading]=\"loading\"\n        [disabled]=\"rechargeForm.invalid\"\n      />\n    </div>\n  </form>\n</app-modal>\n", styles: [".vip-recharge-modal{display:flex;flex-flow:column;gap:1rem;width:100%}.vip-recharge-modal-hint{display:inline-flex;margin-top:1rem;font-size:12px;color:#6b7280}.vip-recharge-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: AsyncSelectComponent, selector: "async-select", inputs: ["config", "items", "parentId", "label", "placeholder", "name", "required", "multiple", "clearable", "searchable", "loading", "virtualScroll", "notFoundText", "bindLabel", "bindValue", "disabled"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VipRechargeModalComponent, decorators: [{
             type: Component,
@@ -9681,8 +9704,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AppModalComponent,
                         FormInputComponent,
                         AppButtonComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "<app-modal [isOpen]=\"isOpen\" [title]=\"title\" size=\"md\" (closeModal)=\"onClose()\">\n  <form [formGroup]=\"rechargeForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"vip-recharge-modal\">\n      <form-input\n        formControlName=\"amount\"\n        label=\"Monto\"\n        type=\"number\"\n        [min]=\"minAmount\"\n        [step]=\"1000\"\n        [required]=\"true\"\n        placeholder=\"Ingresa el monto a recargar\"\n      />\n\n      <p class=\"vip-recharge-modal-hint\">\n        Monto m\u00EDnimo: {{ minAmount | currency: 'COP' : 'symbol-narrow' : '1.0-0' }}\n      </p>\n    </div>\n\n    <div class=\"vip-recharge-modal-actions\">\n      <app-button\n        type=\"button\"\n        variant=\"tertiary\"\n        text=\"Cancelar\"\n        size=\"sm\"\n        (clicked)=\"onClose()\"\n      />\n\n      <app-button\n        type=\"submit\"\n        size=\"sm\"\n        variant=\"primary\"\n        [text]=\"submitLabel\"\n        [loading]=\"loading\"\n        [disabled]=\"rechargeForm.invalid\"\n      />\n    </div>\n  </form>\n</app-modal>\n", styles: [".vip-recharge-modal-hint{display:inline-flex;margin-top:1rem;font-size:12px;color:#6b7280}.vip-recharge-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { title: [{
+                        AsyncSelectComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<app-modal [isOpen]=\"isOpen\" [title]=\"title\" size=\"md\" (closeModal)=\"onClose()\">\n  <form [formGroup]=\"rechargeForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"vip-recharge-modal\">\n      <async-select\n        label=\"M\u00E9todo de pago\"\n        placeholder=\"Selecciona un m\u00E9todo de pago\"\n        name=\"payment_method\"\n        class=\"flex-1\"\n        [required]=\"true\"\n        [items]=\"paymentMethodOptions\"\n        formControlName=\"payment_method\"\n      />\n\n      <div>\n        <form-input\n          formControlName=\"amount\"\n          label=\"Monto\"\n          type=\"number\"\n          [min]=\"minAmount\"\n          [step]=\"1000\"\n          [required]=\"true\"\n          placeholder=\"Ingresa el monto a recargar\"\n        />\n\n        <p class=\"vip-recharge-modal-hint\">\n          Monto m\u00EDnimo: {{ minAmount | currency: 'COP' : 'symbol-narrow' : '1.0-0' }}\n        </p>\n      </div>\n    </div>\n\n    <div class=\"vip-recharge-modal-actions\">\n      <app-button\n        type=\"button\"\n        variant=\"tertiary\"\n        text=\"Cancelar\"\n        size=\"sm\"\n        (clicked)=\"onClose()\"\n      />\n\n      <app-button\n        type=\"submit\"\n        size=\"sm\"\n        variant=\"primary\"\n        [text]=\"submitLabel\"\n        [loading]=\"loading\"\n        [disabled]=\"rechargeForm.invalid\"\n      />\n    </div>\n  </form>\n</app-modal>\n", styles: [".vip-recharge-modal{display:flex;flex-flow:column;gap:1rem;width:100%}.vip-recharge-modal-hint{display:inline-flex;margin-top:1rem;font-size:12px;color:#6b7280}.vip-recharge-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:1rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2.TranslocoService }], propDecorators: { title: [{
                 type: Input
             }], submitLabel: [{
                 type: Input