@haloduck/ui 2.0.38 → 2.0.40

package/fesm2022/haloduck-ui.mjs

@@ -37,8 +37,7 @@ class NotificationService {
                 timeout: timeout,
             }));
         }
-        else if ('Notification' in window &&
-            Notification.permission === 'granted') {
+        else if ('Notification' in window && Notification.permission === 'granted') {
             // 웹브라우저에서 실행될 때는 기본 브라우저 알림 사용
             new Notification(title, { body: body });
         }
@@ -86,11 +85,11 @@ class ButtonComponent {
     disabled = false;
     variant = 'primary';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ButtonComponent, isStandalone: true, selector: "haloduck-button", inputs: { disabled: "disabled", variant: "variant" }, ngImport: i0, template: "<button type=\"button\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"{\n            'bg-light-primary text-light-on-primary dark:bg-dark-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n            'bg-light-primary-light text-light-on-primary-light dark:bg-dark-primary-light dark:text-dark-on-primary-light': variant === 'secondary' && !disabled,\n            'bg-light-danger text-light-on-danger dark:bg-dark-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n            'bg-light-background text-light-on-background dark:bg-dark-background dark:text-dark-on-background border border-light-on-background dark:border-dark-on-background' : variant === 'none' && !disabled,\n            'bg-light-inactive text-light-on-inactive dark:bg-dark-inactive dark:text-dark-on-inactive active:animate-bounce hover:cursor-not-allowed': disabled,\n            'active:scale-95 transition-transform': !disabled,\n            'hover:cursor-pointer': !disabled\n        }\"\n        class=\"px-4 py-1.5 rounded-lg text-sm/6 w-full text-nowrap\">\n    <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ButtonComponent, isStandalone: true, selector: "haloduck-button", inputs: { disabled: "disabled", variant: "variant" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    'bg-light-primary text-light-on-primary dark:bg-dark-primary dark:text-dark-on-primary':\n      variant === 'primary' && !disabled,\n    'bg-light-primary-light text-light-on-primary-light dark:bg-dark-primary-light dark:text-dark-on-primary-light':\n      variant === 'secondary' && !disabled,\n    'bg-light-danger text-light-on-danger dark:bg-dark-danger dark:text-dark-on-danger':\n      variant === 'danger' && !disabled,\n    'bg-light-background text-light-on-background dark:bg-dark-background dark:text-dark-on-background border border-light-on-background dark:border-dark-on-background':\n      variant === 'none' && !disabled,\n    'bg-light-inactive text-light-on-inactive dark:bg-dark-inactive dark:text-dark-on-inactive active:animate-bounce hover:cursor-not-allowed':\n      disabled,\n    'active:scale-95 transition-transform': !disabled,\n    'hover:cursor-pointer': !disabled,\n  }\"\n  class=\"px-4 py-1.5 rounded-lg text-sm/6 w-full text-nowrap\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-button', imports: [CommonModule], template: "<button type=\"button\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"{\n            'bg-light-primary text-light-on-primary dark:bg-dark-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n            'bg-light-primary-light text-light-on-primary-light dark:bg-dark-primary-light dark:text-dark-on-primary-light': variant === 'secondary' && !disabled,\n            'bg-light-danger text-light-on-danger dark:bg-dark-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n            'bg-light-background text-light-on-background dark:bg-dark-background dark:text-dark-on-background border border-light-on-background dark:border-dark-on-background' : variant === 'none' && !disabled,\n            'bg-light-inactive text-light-on-inactive dark:bg-dark-inactive dark:text-dark-on-inactive active:animate-bounce hover:cursor-not-allowed': disabled,\n            'active:scale-95 transition-transform': !disabled,\n            'hover:cursor-pointer': !disabled\n        }\"\n        class=\"px-4 py-1.5 rounded-lg text-sm/6 w-full text-nowrap\">\n    <ng-content></ng-content>\n</button>\n" }]
+            args: [{ selector: 'haloduck-button', imports: [CommonModule], template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    'bg-light-primary text-light-on-primary dark:bg-dark-primary dark:text-dark-on-primary':\n      variant === 'primary' && !disabled,\n    'bg-light-primary-light text-light-on-primary-light dark:bg-dark-primary-light dark:text-dark-on-primary-light':\n      variant === 'secondary' && !disabled,\n    'bg-light-danger text-light-on-danger dark:bg-dark-danger dark:text-dark-on-danger':\n      variant === 'danger' && !disabled,\n    'bg-light-background text-light-on-background dark:bg-dark-background dark:text-dark-on-background border border-light-on-background dark:border-dark-on-background':\n      variant === 'none' && !disabled,\n    'bg-light-inactive text-light-on-inactive dark:bg-dark-inactive dark:text-dark-on-inactive active:animate-bounce hover:cursor-not-allowed':\n      disabled,\n    'active:scale-95 transition-transform': !disabled,\n    'hover:cursor-pointer': !disabled,\n  }\"\n  class=\"px-4 py-1.5 rounded-lg text-sm/6 w-full text-nowrap\"\n>\n  <ng-content></ng-content>\n</button>\n" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], variant: [{
@@ -163,7 +162,7 @@ class InputComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n  @if (rows > 1) {\n  <textarea #input\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [rows]=\"rows\"\n            (keydown)=\"onKeydown($event)\"\n            class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\"></textarea>\n  }\n  @else {\n  <input #input\n         [type]=\"type\"\n         [value]=\"value\"\n         (input)=\"onInput($event)\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder\"\n         (keydown)=\"onKeydown($event)\"\n         class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\">\n  }\n</div>\n", styles: [""] });
+        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n  @if (rows > 1) {\n    <textarea\n      #input\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [rows]=\"rows\"\n      (keydown)=\"onKeydown($event)\"\n      class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\"\n    ></textarea>\n  } @else {\n    <input\n      #input\n      [type]=\"type\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      (keydown)=\"onKeydown($event)\"\n      class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\"\n    />\n  }\n</div>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -174,7 +173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n  @if (rows > 1) {\n  <textarea #input\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [rows]=\"rows\"\n            (keydown)=\"onKeydown($event)\"\n            class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\"></textarea>\n  }\n  @else {\n  <input #input\n         [type]=\"type\"\n         [value]=\"value\"\n         (input)=\"onInput($event)\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder\"\n         (keydown)=\"onKeydown($event)\"\n         class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\">\n  }\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n  @if (rows > 1) {\n    <textarea\n      #input\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [rows]=\"rows\"\n      (keydown)=\"onKeydown($event)\"\n      class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\"\n    ></textarea>\n  } @else {\n    <input\n      #input\n      [type]=\"type\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      (keydown)=\"onKeydown($event)\"\n      class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-3 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary sm:text-sm/6\"\n    />\n  }\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: ViewChild,
                 args: ['label']
@@ -323,7 +322,11 @@ class AuthenticateComponent {
         return /[^A-Za-z0-9]/.test(this.passwordValue);
     }
     get isPasswordValid() {
-        return this.isMinLength && this.hasUppercase && this.hasLowercase && this.hasNumber && this.hasSpecialChar;
+        return (this.isMinLength &&
+            this.hasUppercase &&
+            this.hasLowercase &&
+            this.hasNumber &&
+            this.hasSpecialChar);
     }
     get passwordRules() {
         return [
@@ -335,11 +338,11 @@ class AuthenticateComponent {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AuthenticateComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: AuthenticateComponent, isStandalone: true, selector: "haloduck-authenticate", ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center h-full\">\n  <!-- auth.component.html -->\n  <div class=\"w-full max-w-md mx-auto mt-20 p-8 shadow-lg rounded-2xl bg-light-background dark:bg-dark-background\">\n\n    @switch (stage) {\n    @case ('login') {\n    <!-- \uB85C\uADF8\uC778 -->\n    <form [formGroup]=\"loginForm\"\n          (ngSubmit)=\"login()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-login-email\"\n                      type=\"email\"\n                      formControlName=\"email\"\n                      placeholder=\"Email\" />\n      <haloduck-input data-testid=\"authenticate-login-password\"\n                      type=\"password\"\n                      formControlName=\"password\"\n                      placeholder=\"Password\" />\n      <haloduck-button data-testid=\"authenticate-login-submit\"\n                       type=\"submit\"\n                       variant=\"primary\"\n                       (click)=\"login()\">Sign In</haloduck-button>\n    </form>\n    }\n    @case ('signup') {\n    <!-- \uD68C\uC6D0\uAC00\uC785 -->\n    <form [formGroup]=\"signupForm\"\n          (ngSubmit)=\"signup()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-signup-email\"\n                      type=\"email\"\n                      formControlName=\"email\"\n                      placeholder=\"Email\" />\n      <haloduck-input data-testid=\"authenticate-signup-password\"\n                      type=\"password\"\n                      formControlName=\"password\"\n                      placeholder=\"Password\" />\n      <haloduck-button data-testid=\"authenticate-signup-submit\"\n                       type=\"submit\"\n                       variant=\"primary\">Sign Up</haloduck-button>\n    </form>\n    }\n    @case ('reset') {\n    <!-- \uBE44\uBC00\uBC88\uD638 \uC7AC\uC124\uC815 \uC694\uCCAD -->\n    <form [formGroup]=\"resetForm\"\n          (ngSubmit)=\"reset()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-reset-email\"\n                      type=\"email\"\n                      formControlName=\"email\"\n                      placeholder=\"Email\" />\n      <haloduck-button data-testid=\"authenticate-reset-submit\"\n                       type=\"submit\"\n                       variant=\"primary\"\n                       (click)=\"reset()\">Send Verification Code</haloduck-button>\n    </form>\n    }\n    @case ('otpVerify') {\n    <!-- OTP \uC778\uC99D \uD6C4 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uC785\uB825 -->\n    <form [formGroup]=\"otpForm\"\n          (ngSubmit)=\"verifyOtp()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-otp-code\"\n                      type=\"text\"\n                      formControlName=\"code\"\n                      placeholder=\"Verification Code\" />\n      <haloduck-input data-testid=\"authenticate-otp-password\"\n                      type=\"password\"\n                      formControlName=\"newPassword\"\n                      placeholder=\"New password\" />\n      <haloduck-button data-testid=\"authenticate-otp-submit\"\n                       type=\"submit\"\n                       variant=\"primary\"\n                       (click)=\"verifyOtp()\">Reset Password</haloduck-button>\n    </form>\n\n    }\n    @case ('newPassword') {\n    <!-- \uC784\uC2DC \uBE44\uBC00\uBC88\uD638 \u2192 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uBCC0\uACBD -->\n    <form [formGroup]=\"newPasswordForm\"\n          (ngSubmit)=\"confirmNewPassword()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-new-password-password\"\n                      type=\"password\"\n                      formControlName=\"newPassword\"\n                      placeholder=\"New password\">\n      </haloduck-input>\n      <div class=\"text-sm flex flex-col\">\n        @for (rule of passwordRules; track rule.label) {\n        <span [class.text-light-secondary]=\"rule.valid && passwordValue !== ''\"\n              [class.line-through]=\"rule.valid && passwordValue !== ''\"\n              [class.text-light-danger]=\"!rule.valid && passwordValue !== ''\"\n              [class.text-light-inactive]=\"passwordValue === ''\">\n          {{ rule.valid ? '\u2714' : '\u2717' }} {{ rule.label }}\n        </span>\n        }\n      </div>\n      <haloduck-button data-testid=\"authenticate-new-password-submit\"\n                       type=\"submit\"\n                       (click)=\"confirmNewPassword()\"\n                       variant=\"primary\"\n                       [disabled]=\"!isPasswordValid\">Change Password</haloduck-button>\n    </form>\n    }\n    }\n\n    <!-- \uB2E8\uACC4 \uC804\uD658 \uD0ED -->\n    <div class=\"flex justify-center mt-6 gap-4\">\n      @if (stage !== 'login') {\n      <haloduck-button data-testid=\"authenticate-to-signin\"\n                       variant=\"none\"\n                       (click)=\"switchStage('login')\">to Sign In</haloduck-button>\n      }\n      <!-- <haloduck-button class=\"text-sm text-blue-600 hover:underline\"\n              (click)=\"switchStage('signup')\">\uD68C\uC6D0\uAC00\uC785</haloduck-button> -->\n      @if (stage !== 'reset' && stage !== 'otpVerify' && stage !== 'newPassword') {\n      <haloduck-button data-testid=\"authenticate-to-reset-password\"\n                       variant=\"secondary\"\n                       (click)=\"switchStage('reset')\">Reset Password</haloduck-button>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "haloduck-input", inputs: ["placeholder", "type", "disabled", "rows", "autofocus", "value"] }, { kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: AuthenticateComponent, isStandalone: true, selector: "haloduck-authenticate", ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center h-full\">\n  <!-- auth.component.html -->\n  <div\n    class=\"w-full max-w-md mx-auto mt-20 p-8 shadow-lg rounded-2xl bg-light-background dark:bg-dark-background\"\n  >\n    @switch (stage) {\n      @case ('login') {\n        <!-- \uB85C\uADF8\uC778 -->\n        <form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-login-email\"\n            type=\"email\"\n            formControlName=\"email\"\n            placeholder=\"Email\"\n          />\n          <haloduck-input\n            data-testid=\"authenticate-login-password\"\n            type=\"password\"\n            formControlName=\"password\"\n            placeholder=\"Password\"\n          />\n          <haloduck-button\n            data-testid=\"authenticate-login-submit\"\n            type=\"submit\"\n            variant=\"primary\"\n            (click)=\"login()\"\n            >Sign In</haloduck-button\n          >\n        </form>\n      }\n      @case ('signup') {\n        <!-- \uD68C\uC6D0\uAC00\uC785 -->\n        <form [formGroup]=\"signupForm\" (ngSubmit)=\"signup()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-signup-email\"\n            type=\"email\"\n            formControlName=\"email\"\n            placeholder=\"Email\"\n          />\n          <haloduck-input\n            data-testid=\"authenticate-signup-password\"\n            type=\"password\"\n            formControlName=\"password\"\n            placeholder=\"Password\"\n          />\n          <haloduck-button data-testid=\"authenticate-signup-submit\" type=\"submit\" variant=\"primary\"\n            >Sign Up</haloduck-button\n          >\n        </form>\n      }\n      @case ('reset') {\n        <!-- \uBE44\uBC00\uBC88\uD638 \uC7AC\uC124\uC815 \uC694\uCCAD -->\n        <form [formGroup]=\"resetForm\" (ngSubmit)=\"reset()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-reset-email\"\n            type=\"email\"\n            formControlName=\"email\"\n            placeholder=\"Email\"\n          />\n          <haloduck-button\n            data-testid=\"authenticate-reset-submit\"\n            type=\"submit\"\n            variant=\"primary\"\n            (click)=\"reset()\"\n            >Send Verification Code</haloduck-button\n          >\n        </form>\n      }\n      @case ('otpVerify') {\n        <!-- OTP \uC778\uC99D \uD6C4 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uC785\uB825 -->\n        <form [formGroup]=\"otpForm\" (ngSubmit)=\"verifyOtp()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-otp-code\"\n            type=\"text\"\n            formControlName=\"code\"\n            placeholder=\"Verification Code\"\n          />\n          <haloduck-input\n            data-testid=\"authenticate-otp-password\"\n            type=\"password\"\n            formControlName=\"newPassword\"\n            placeholder=\"New password\"\n          />\n          <haloduck-button\n            data-testid=\"authenticate-otp-submit\"\n            type=\"submit\"\n            variant=\"primary\"\n            (click)=\"verifyOtp()\"\n            >Reset Password</haloduck-button\n          >\n        </form>\n      }\n      @case ('newPassword') {\n        <!-- \uC784\uC2DC \uBE44\uBC00\uBC88\uD638 \u2192 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uBCC0\uACBD -->\n        <form\n          [formGroup]=\"newPasswordForm\"\n          (ngSubmit)=\"confirmNewPassword()\"\n          class=\"flex flex-col gap-4\"\n        >\n          <haloduck-input\n            data-testid=\"authenticate-new-password-password\"\n            type=\"password\"\n            formControlName=\"newPassword\"\n            placeholder=\"New password\"\n          >\n          </haloduck-input>\n          <div class=\"text-sm flex flex-col\">\n            @for (rule of passwordRules; track rule.label) {\n              <span\n                [class.text-light-secondary]=\"rule.valid && passwordValue !== ''\"\n                [class.line-through]=\"rule.valid && passwordValue !== ''\"\n                [class.text-light-danger]=\"!rule.valid && passwordValue !== ''\"\n                [class.text-light-inactive]=\"passwordValue === ''\"\n              >\n                {{ rule.valid ? '\u2714' : '\u2717' }} {{ rule.label }}\n              </span>\n            }\n          </div>\n          <haloduck-button\n            data-testid=\"authenticate-new-password-submit\"\n            type=\"submit\"\n            (click)=\"confirmNewPassword()\"\n            variant=\"primary\"\n            [disabled]=\"!isPasswordValid\"\n            >Change Password</haloduck-button\n          >\n        </form>\n      }\n    }\n\n    <!-- \uB2E8\uACC4 \uC804\uD658 \uD0ED -->\n    <div class=\"flex justify-center mt-6 gap-4\">\n      @if (stage !== 'login') {\n        <haloduck-button\n          data-testid=\"authenticate-to-signin\"\n          variant=\"none\"\n          (click)=\"switchStage('login')\"\n          >to Sign In</haloduck-button\n        >\n      }\n      <!-- <haloduck-button class=\"text-sm text-blue-600 hover:underline\"\n              (click)=\"switchStage('signup')\">\uD68C\uC6D0\uAC00\uC785</haloduck-button> -->\n      @if (stage !== 'reset' && stage !== 'otpVerify' && stage !== 'newPassword') {\n        <haloduck-button\n          data-testid=\"authenticate-to-reset-password\"\n          variant=\"secondary\"\n          (click)=\"switchStage('reset')\"\n          >Reset Password</haloduck-button\n        >\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "haloduck-input", inputs: ["placeholder", "type", "disabled", "rows", "autofocus", "value"] }, { kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AuthenticateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-authenticate', imports: [FormsModule, ReactiveFormsModule, InputComponent, ButtonComponent], template: "<div class=\"flex flex-col items-center justify-center h-full\">\n  <!-- auth.component.html -->\n  <div class=\"w-full max-w-md mx-auto mt-20 p-8 shadow-lg rounded-2xl bg-light-background dark:bg-dark-background\">\n\n    @switch (stage) {\n    @case ('login') {\n    <!-- \uB85C\uADF8\uC778 -->\n    <form [formGroup]=\"loginForm\"\n          (ngSubmit)=\"login()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-login-email\"\n                      type=\"email\"\n                      formControlName=\"email\"\n                      placeholder=\"Email\" />\n      <haloduck-input data-testid=\"authenticate-login-password\"\n                      type=\"password\"\n                      formControlName=\"password\"\n                      placeholder=\"Password\" />\n      <haloduck-button data-testid=\"authenticate-login-submit\"\n                       type=\"submit\"\n                       variant=\"primary\"\n                       (click)=\"login()\">Sign In</haloduck-button>\n    </form>\n    }\n    @case ('signup') {\n    <!-- \uD68C\uC6D0\uAC00\uC785 -->\n    <form [formGroup]=\"signupForm\"\n          (ngSubmit)=\"signup()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-signup-email\"\n                      type=\"email\"\n                      formControlName=\"email\"\n                      placeholder=\"Email\" />\n      <haloduck-input data-testid=\"authenticate-signup-password\"\n                      type=\"password\"\n                      formControlName=\"password\"\n                      placeholder=\"Password\" />\n      <haloduck-button data-testid=\"authenticate-signup-submit\"\n                       type=\"submit\"\n                       variant=\"primary\">Sign Up</haloduck-button>\n    </form>\n    }\n    @case ('reset') {\n    <!-- \uBE44\uBC00\uBC88\uD638 \uC7AC\uC124\uC815 \uC694\uCCAD -->\n    <form [formGroup]=\"resetForm\"\n          (ngSubmit)=\"reset()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-reset-email\"\n                      type=\"email\"\n                      formControlName=\"email\"\n                      placeholder=\"Email\" />\n      <haloduck-button data-testid=\"authenticate-reset-submit\"\n                       type=\"submit\"\n                       variant=\"primary\"\n                       (click)=\"reset()\">Send Verification Code</haloduck-button>\n    </form>\n    }\n    @case ('otpVerify') {\n    <!-- OTP \uC778\uC99D \uD6C4 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uC785\uB825 -->\n    <form [formGroup]=\"otpForm\"\n          (ngSubmit)=\"verifyOtp()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-otp-code\"\n                      type=\"text\"\n                      formControlName=\"code\"\n                      placeholder=\"Verification Code\" />\n      <haloduck-input data-testid=\"authenticate-otp-password\"\n                      type=\"password\"\n                      formControlName=\"newPassword\"\n                      placeholder=\"New password\" />\n      <haloduck-button data-testid=\"authenticate-otp-submit\"\n                       type=\"submit\"\n                       variant=\"primary\"\n                       (click)=\"verifyOtp()\">Reset Password</haloduck-button>\n    </form>\n\n    }\n    @case ('newPassword') {\n    <!-- \uC784\uC2DC \uBE44\uBC00\uBC88\uD638 \u2192 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uBCC0\uACBD -->\n    <form [formGroup]=\"newPasswordForm\"\n          (ngSubmit)=\"confirmNewPassword()\"\n          class=\"flex flex-col gap-4\">\n      <haloduck-input data-testid=\"authenticate-new-password-password\"\n                      type=\"password\"\n                      formControlName=\"newPassword\"\n                      placeholder=\"New password\">\n      </haloduck-input>\n      <div class=\"text-sm flex flex-col\">\n        @for (rule of passwordRules; track rule.label) {\n        <span [class.text-light-secondary]=\"rule.valid && passwordValue !== ''\"\n              [class.line-through]=\"rule.valid && passwordValue !== ''\"\n              [class.text-light-danger]=\"!rule.valid && passwordValue !== ''\"\n              [class.text-light-inactive]=\"passwordValue === ''\">\n          {{ rule.valid ? '\u2714' : '\u2717' }} {{ rule.label }}\n        </span>\n        }\n      </div>\n      <haloduck-button data-testid=\"authenticate-new-password-submit\"\n                       type=\"submit\"\n                       (click)=\"confirmNewPassword()\"\n                       variant=\"primary\"\n                       [disabled]=\"!isPasswordValid\">Change Password</haloduck-button>\n    </form>\n    }\n    }\n\n    <!-- \uB2E8\uACC4 \uC804\uD658 \uD0ED -->\n    <div class=\"flex justify-center mt-6 gap-4\">\n      @if (stage !== 'login') {\n      <haloduck-button data-testid=\"authenticate-to-signin\"\n                       variant=\"none\"\n                       (click)=\"switchStage('login')\">to Sign In</haloduck-button>\n      }\n      <!-- <haloduck-button class=\"text-sm text-blue-600 hover:underline\"\n              (click)=\"switchStage('signup')\">\uD68C\uC6D0\uAC00\uC785</haloduck-button> -->\n      @if (stage !== 'reset' && stage !== 'otpVerify' && stage !== 'newPassword') {\n      <haloduck-button data-testid=\"authenticate-to-reset-password\"\n                       variant=\"secondary\"\n                       (click)=\"switchStage('reset')\">Reset Password</haloduck-button>\n      }\n    </div>\n\n  </div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-authenticate', imports: [FormsModule, ReactiveFormsModule, InputComponent, ButtonComponent], template: "<div class=\"flex flex-col items-center justify-center h-full\">\n  <!-- auth.component.html -->\n  <div\n    class=\"w-full max-w-md mx-auto mt-20 p-8 shadow-lg rounded-2xl bg-light-background dark:bg-dark-background\"\n  >\n    @switch (stage) {\n      @case ('login') {\n        <!-- \uB85C\uADF8\uC778 -->\n        <form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-login-email\"\n            type=\"email\"\n            formControlName=\"email\"\n            placeholder=\"Email\"\n          />\n          <haloduck-input\n            data-testid=\"authenticate-login-password\"\n            type=\"password\"\n            formControlName=\"password\"\n            placeholder=\"Password\"\n          />\n          <haloduck-button\n            data-testid=\"authenticate-login-submit\"\n            type=\"submit\"\n            variant=\"primary\"\n            (click)=\"login()\"\n            >Sign In</haloduck-button\n          >\n        </form>\n      }\n      @case ('signup') {\n        <!-- \uD68C\uC6D0\uAC00\uC785 -->\n        <form [formGroup]=\"signupForm\" (ngSubmit)=\"signup()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-signup-email\"\n            type=\"email\"\n            formControlName=\"email\"\n            placeholder=\"Email\"\n          />\n          <haloduck-input\n            data-testid=\"authenticate-signup-password\"\n            type=\"password\"\n            formControlName=\"password\"\n            placeholder=\"Password\"\n          />\n          <haloduck-button data-testid=\"authenticate-signup-submit\" type=\"submit\" variant=\"primary\"\n            >Sign Up</haloduck-button\n          >\n        </form>\n      }\n      @case ('reset') {\n        <!-- \uBE44\uBC00\uBC88\uD638 \uC7AC\uC124\uC815 \uC694\uCCAD -->\n        <form [formGroup]=\"resetForm\" (ngSubmit)=\"reset()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-reset-email\"\n            type=\"email\"\n            formControlName=\"email\"\n            placeholder=\"Email\"\n          />\n          <haloduck-button\n            data-testid=\"authenticate-reset-submit\"\n            type=\"submit\"\n            variant=\"primary\"\n            (click)=\"reset()\"\n            >Send Verification Code</haloduck-button\n          >\n        </form>\n      }\n      @case ('otpVerify') {\n        <!-- OTP \uC778\uC99D \uD6C4 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uC785\uB825 -->\n        <form [formGroup]=\"otpForm\" (ngSubmit)=\"verifyOtp()\" class=\"flex flex-col gap-4\">\n          <haloduck-input\n            data-testid=\"authenticate-otp-code\"\n            type=\"text\"\n            formControlName=\"code\"\n            placeholder=\"Verification Code\"\n          />\n          <haloduck-input\n            data-testid=\"authenticate-otp-password\"\n            type=\"password\"\n            formControlName=\"newPassword\"\n            placeholder=\"New password\"\n          />\n          <haloduck-button\n            data-testid=\"authenticate-otp-submit\"\n            type=\"submit\"\n            variant=\"primary\"\n            (click)=\"verifyOtp()\"\n            >Reset Password</haloduck-button\n          >\n        </form>\n      }\n      @case ('newPassword') {\n        <!-- \uC784\uC2DC \uBE44\uBC00\uBC88\uD638 \u2192 \uC0C8 \uBE44\uBC00\uBC88\uD638 \uBCC0\uACBD -->\n        <form\n          [formGroup]=\"newPasswordForm\"\n          (ngSubmit)=\"confirmNewPassword()\"\n          class=\"flex flex-col gap-4\"\n        >\n          <haloduck-input\n            data-testid=\"authenticate-new-password-password\"\n            type=\"password\"\n            formControlName=\"newPassword\"\n            placeholder=\"New password\"\n          >\n          </haloduck-input>\n          <div class=\"text-sm flex flex-col\">\n            @for (rule of passwordRules; track rule.label) {\n              <span\n                [class.text-light-secondary]=\"rule.valid && passwordValue !== ''\"\n                [class.line-through]=\"rule.valid && passwordValue !== ''\"\n                [class.text-light-danger]=\"!rule.valid && passwordValue !== ''\"\n                [class.text-light-inactive]=\"passwordValue === ''\"\n              >\n                {{ rule.valid ? '\u2714' : '\u2717' }} {{ rule.label }}\n              </span>\n            }\n          </div>\n          <haloduck-button\n            data-testid=\"authenticate-new-password-submit\"\n            type=\"submit\"\n            (click)=\"confirmNewPassword()\"\n            variant=\"primary\"\n            [disabled]=\"!isPasswordValid\"\n            >Change Password</haloduck-button\n          >\n        </form>\n      }\n    }\n\n    <!-- \uB2E8\uACC4 \uC804\uD658 \uD0ED -->\n    <div class=\"flex justify-center mt-6 gap-4\">\n      @if (stage !== 'login') {\n        <haloduck-button\n          data-testid=\"authenticate-to-signin\"\n          variant=\"none\"\n          (click)=\"switchStage('login')\"\n          >to Sign In</haloduck-button\n        >\n      }\n      <!-- <haloduck-button class=\"text-sm text-blue-600 hover:underline\"\n              (click)=\"switchStage('signup')\">\uD68C\uC6D0\uAC00\uC785</haloduck-button> -->\n      @if (stage !== 'reset' && stage !== 'otpVerify' && stage !== 'newPassword') {\n        <haloduck-button\n          data-testid=\"authenticate-to-reset-password\"\n          variant=\"secondary\"\n          (click)=\"switchStage('reset')\"\n          >Reset Password</haloduck-button\n        >\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2.HttpClient }] });
 
 class SelectDropdownComponent {
@@ -473,7 +476,9 @@ class SelectDropdownComponent {
             const isActive = this.activeManualKey === key;
             if (prefix) {
                 // selected if there exists a value with more than prefix, OR if it's currently active
-                const hasValueWithPrefix = this._selectedOptionIds.some((selectedId) => typeof selectedId === 'string' && selectedId.startsWith(prefix) && selectedId.length > prefix.length);
+                const hasValueWithPrefix = this._selectedOptionIds.some((selectedId) => typeof selectedId === 'string' &&
+                    selectedId.startsWith(prefix) &&
+                    selectedId.length > prefix.length);
                 return hasValueWithPrefix || isActive;
             }
             // no prefix: consider selected if any selected id equals current typed value (non-empty) OR if it's active
@@ -497,7 +502,7 @@ class SelectDropdownComponent {
         return false;
     }
     getManualKey(option) {
-        return option.manualPrefix || (option.id || option.value);
+        return option.manualPrefix || option.id || option.value;
     }
     seedManualInputs() {
         const manualOptions = this._options.filter((o) => o.shouldManualInput);
@@ -505,9 +510,7 @@ class SelectDropdownComponent {
             const prefix = opt.manualPrefix || '';
             const key = this.getManualKey(opt);
             const existingWithPrefix = this._selectedOptionIds.find((id) => prefix ? id?.startsWith(prefix) : false);
-            const value = existingWithPrefix
-                ? existingWithPrefix.substring(prefix.length)
-                : '';
+            const value = existingWithPrefix ? existingWithPrefix.substring(prefix.length) : '';
             this.manualInputValues[key] = value;
         }
     }
@@ -607,11 +610,11 @@ class SelectDropdownComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange", closeDropdown: "closeDropdown" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         [class.cursor-pointer]=\"!option.shouldManualInput\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( isOptionSelected(option)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      @if(option.shouldManualInput && (isOptionSelected(option) || (activeManualKey === (option.manualPrefix ? option.manualPrefix : (option.id || option.value))))) {\n        <input type=\"text\"\n               [(ngModel)]=\"manualInputValues[option.manualPrefix ? option.manualPrefix : (option.id || option.value)]\"\n               [attr.data-manual-key]=\"option.manualPrefix ? option.manualPrefix : (option.id || option.value)\"\n               (ngModelChange)=\"onManualInputChange(option, $event)\"\n               (click)=\"$event.stopPropagation()\"\n               (blur)=\"onManualInputBlur(option)\"\n               (keydown.enter)=\"onManualInputConfirm(option)\"\n               class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\" />\n      } @else {\n        {{ option.value }}\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange", closeDropdown: "closeDropdown" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div\n  id=\"dropdown\"\n  class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\"\n>\n  @if (useFilter && _options.length >= 5) {\n    <input\n      #inputFilter\n      id=\"inputFilter\"\n      type=\"text\"\n      [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n      (input)=\"onFilterInput($event)\"\n      class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\"\n    />\n  }\n  <div class=\"overflow-y-auto\">\n    @for (option of _filteredOptions(); track option.id ? option.id : option.value) {\n      <div\n        class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n        [class.cursor-pointer]=\"!option.shouldManualInput\"\n        (click)=\"onToggleOption(option)\"\n      >\n        @if (!asButton) {\n          @if (isOptionSelected(option)) {\n            <svg\n              class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <div class=\"w-4 h-4 inline-block mr-2\"></div>\n          }\n        }\n        @if (\n          option.shouldManualInput &&\n          (isOptionSelected(option) ||\n            activeManualKey ===\n              (option.manualPrefix ? option.manualPrefix : option.id || option.value))\n        ) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"\n              manualInputValues[\n                option.manualPrefix ? option.manualPrefix : option.id || option.value\n              ]\n            \"\n            [attr.data-manual-key]=\"\n              option.manualPrefix ? option.manualPrefix : option.id || option.value\n            \"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown.enter)=\"onManualInputConfirm(option)\"\n            class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\"\n          />\n        } @else {\n          {{ option.value }}\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-select-dropdown', imports: [TranslocoModule, FormsModule], providers: [provideTranslocoScope('haloduck')], template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         [class.cursor-pointer]=\"!option.shouldManualInput\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( isOptionSelected(option)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      @if(option.shouldManualInput && (isOptionSelected(option) || (activeManualKey === (option.manualPrefix ? option.manualPrefix : (option.id || option.value))))) {\n        <input type=\"text\"\n               [(ngModel)]=\"manualInputValues[option.manualPrefix ? option.manualPrefix : (option.id || option.value)]\"\n               [attr.data-manual-key]=\"option.manualPrefix ? option.manualPrefix : (option.id || option.value)\"\n               (ngModelChange)=\"onManualInputChange(option, $event)\"\n               (click)=\"$event.stopPropagation()\"\n               (blur)=\"onManualInputBlur(option)\"\n               (keydown.enter)=\"onManualInputConfirm(option)\"\n               class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\" />\n      } @else {\n        {{ option.value }}\n      }\n    </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-select-dropdown', imports: [TranslocoModule, FormsModule], providers: [provideTranslocoScope('haloduck')], template: "<div\n  id=\"dropdown\"\n  class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\"\n>\n  @if (useFilter && _options.length >= 5) {\n    <input\n      #inputFilter\n      id=\"inputFilter\"\n      type=\"text\"\n      [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n      (input)=\"onFilterInput($event)\"\n      class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\"\n    />\n  }\n  <div class=\"overflow-y-auto\">\n    @for (option of _filteredOptions(); track option.id ? option.id : option.value) {\n      <div\n        class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n        [class.cursor-pointer]=\"!option.shouldManualInput\"\n        (click)=\"onToggleOption(option)\"\n      >\n        @if (!asButton) {\n          @if (isOptionSelected(option)) {\n            <svg\n              class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <div class=\"w-4 h-4 inline-block mr-2\"></div>\n          }\n        }\n        @if (\n          option.shouldManualInput &&\n          (isOptionSelected(option) ||\n            activeManualKey ===\n              (option.manualPrefix ? option.manualPrefix : option.id || option.value))\n        ) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"\n              manualInputValues[\n                option.manualPrefix ? option.manualPrefix : option.id || option.value\n              ]\n            \"\n            [attr.data-manual-key]=\"\n              option.manualPrefix ? option.manualPrefix : option.id || option.value\n            \"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown.enter)=\"onManualInputConfirm(option)\"\n            class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\"\n          />\n        } @else {\n          {{ option.value }}\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { selectedChange: [{
                 type: Output
             }], closeDropdown: [{
@@ -647,6 +650,7 @@ class SelectComponent {
     placeholder = '';
     atLeastOne = false;
     showAll = false;
+    showAllItems = false;
     options = null;
     layout = 'vertical';
     labelWidth = '';
@@ -671,8 +675,12 @@ class SelectComponent {
     selectedOptionIds = [];
     displayedSelectedOptions = [];
     selectedIdToDisplayOption = {};
+    // Manual input support for inline mode
+    manualInputValues = {};
+    activeManualKey = null;
+    isComposing = false; // IME 조합 중 여부
     onClick(event) {
-        if (this.disabled) {
+        if (this.disabled || this.showAllItems) {
             return;
         }
         const originWidth = this.origin?.nativeElement?.offsetWidth || 0;
@@ -720,6 +728,23 @@ class SelectComponent {
                     : selectedOptionIds;
                 setTimeout(() => {
                     this.selectedOptionIds = payload;
+                    // Clear manual input values when selecting different options in dropdown mode
+                    if (!this.showAllItems) {
+                        const manualOptions = (this.options || []).filter((o) => o.shouldManualInput);
+                        for (const manualOpt of manualOptions) {
+                            const key = this.getManualKey(manualOpt);
+                            const prefix = manualOpt.manualPrefix || '';
+                            const sentinel = manualOpt.id || manualOpt.value;
+                            // Check if this manual option is still selected
+                            const isStillSelected = prefix
+                                ? this.selectedOptionIds.some((id) => typeof id === 'string' && id.startsWith(prefix))
+                                : this.selectedOptionIds.includes(sentinel);
+                            // If not selected, clear the manual input value
+                            if (!isStillSelected) {
+                                this.manualInputValues[key] = '';
+                            }
+                        }
+                    }
                     this.recomputeSelectedOptions();
                     this.onChange(this.getSelectedValue());
                     this.selectedChange.emit(payload);
@@ -762,6 +787,186 @@ class SelectComponent {
         this.selectedChange.emit(this.selectedOptionIds);
         this.isDropdownOpen.set(false);
     }
+    onToggleOption(option) {
+        if (this.disabled) {
+            return;
+        }
+        // Handle manual input option
+        if (option.shouldManualInput && this.showAllItems) {
+            const key = this.getManualKey(option);
+            const prefix = option.manualPrefix || '';
+            const sentinel = option.id || option.value;
+            const typed = (this.manualInputValues[key] || '').trim();
+            const isSelected = this.isOptionSelected(option);
+            if (isSelected) {
+                // Already selected - handle toggle based on mode
+                if (this.multiselect) {
+                    // Checkbox: always deselect when clicked again
+                    let next;
+                    if (prefix) {
+                        // Remove all IDs that start with prefix AND the sentinel
+                        next = this.selectedOptionIds.filter((id) => !id.startsWith(prefix) && id !== sentinel);
+                    }
+                    else {
+                        // Remove typed value AND the sentinel
+                        next = this.selectedOptionIds.filter((id) => id !== typed && id !== sentinel);
+                    }
+                    this.selectedOptionIds = next;
+                    // Clear input text when deselected
+                    this.manualInputValues[key] = '';
+                    // Hide input
+                    this.activeManualKey = null;
+                }
+                else {
+                    // Radio: deselect only if there's no typed content
+                    if (typed === '') {
+                        this.selectedOptionIds = [];
+                        this.manualInputValues[key] = '';
+                        this.activeManualKey = null;
+                    }
+                    else {
+                        // Has typed content - keep selected, do nothing
+                        return;
+                    }
+                }
+            }
+            else {
+                // Open manual input
+                this.activeManualKey = key;
+                // In single select mode, clear existing selections first
+                if (!this.multiselect) {
+                    this.selectedOptionIds = [sentinel];
+                }
+                else {
+                    // In multiselect mode, add sentinel if not already present
+                    if (!this.selectedOptionIds.includes(sentinel)) {
+                        this.selectedOptionIds = [sentinel, ...this.selectedOptionIds];
+                    }
+                }
+                // Ensure there is an entry in manualInputValues
+                if (this.manualInputValues[key] === undefined) {
+                    this.manualInputValues[key] = '';
+                }
+                // Focus input on next tick
+                setTimeout(() => {
+                    const selector = `input[data-manual-key="${key}"]`;
+                    const el = document.querySelector(selector);
+                    el?.focus();
+                    el?.select();
+                });
+            }
+            this.recomputeSelectedOptions();
+            this.onChange(this.getSelectedValue());
+            const selectedValue = this.getSelectedValue();
+            if (selectedValue !== null) {
+                this.selectedChange.emit(selectedValue);
+            }
+            this.cdr.markForCheck();
+            return;
+        }
+        const id = option.id || option.value;
+        if (this.multiselect) {
+            if (option.isExclusive) {
+                // Exclusive option: toggle between only this option or none
+                if (this.selectedOptionIds.includes(id)) {
+                    this.selectedOptionIds = [];
+                }
+                else {
+                    this.selectedOptionIds = [id];
+                    // Clear all manual input values when selecting exclusive option
+                    const manualOptions = (this.options || []).filter((o) => o.shouldManualInput);
+                    for (const manualOpt of manualOptions) {
+                        const key = this.getManualKey(manualOpt);
+                        this.manualInputValues[key] = '';
+                    }
+                    this.activeManualKey = null;
+                }
+            }
+            else {
+                // Non-exclusive option: remove any exclusive selections first
+                let next = this.selectedOptionIds.filter((selectedId) => !this.isIdExclusive(selectedId));
+                if (next.includes(id)) {
+                    // Deselect
+                    next = next.filter((selected) => selected !== id);
+                }
+                else {
+                    // Select
+                    next = [id, ...next];
+                }
+                this.selectedOptionIds = next;
+            }
+        }
+        else {
+            // Single select mode
+            // Clear manual input values when selecting different option
+            const manualOptions = (this.options || []).filter((o) => o.shouldManualInput);
+            for (const manualOpt of manualOptions) {
+                const manualKey = this.getManualKey(manualOpt);
+                const manualSentinel = manualOpt.id || manualOpt.value;
+                const manualPrefix = manualOpt.manualPrefix || '';
+                // Check if selecting a different option (not the manual input option itself)
+                const isSelectingDifferent = id !== manualSentinel && !(manualPrefix && id.startsWith(manualPrefix));
+                if (isSelectingDifferent) {
+                    this.manualInputValues[manualKey] = '';
+                    this.activeManualKey = null;
+                }
+            }
+            if (this.atLeastOne) {
+                this.selectedOptionIds = [id];
+            }
+            else {
+                if (this.selectedOptionIds.includes(id)) {
+                    this.selectedOptionIds = [];
+                }
+                else {
+                    this.selectedOptionIds = [id];
+                }
+            }
+        }
+        this.recomputeSelectedOptions();
+        this.onChange(this.getSelectedValue());
+        const selectedValue = this.getSelectedValue();
+        if (selectedValue !== null) {
+            this.selectedChange.emit(selectedValue);
+        }
+        this.cdr.markForCheck();
+    }
+    isOptionSelected(option) {
+        const id = option.id || option.value;
+        if (option.shouldManualInput && this.showAllItems) {
+            const key = this.getManualKey(option);
+            const prefix = option.manualPrefix;
+            const sentinel = option.id || option.value;
+            if (prefix) {
+                const hasValueWithPrefix = this.selectedOptionIds.some((selectedId) => typeof selectedId === 'string' &&
+                    selectedId.startsWith(prefix) &&
+                    selectedId.length > prefix.length);
+                return hasValueWithPrefix;
+            }
+            const typed = (this.manualInputValues[key] || '').trim();
+            // Only consider selected if there's actual typed value, not just sentinel
+            if (typed !== '') {
+                return this.selectedOptionIds.includes(typed);
+            }
+            // If no typed value, check if there's only sentinel (which means just activated but not typed yet)
+            const hasSentinel = this.selectedOptionIds.includes(sentinel);
+            const hasOnlySentinel = hasSentinel &&
+                !this.selectedOptionIds.some((id) => id !== sentinel && (prefix ? id.startsWith(prefix) : false));
+            return hasOnlySentinel;
+        }
+        return this.selectedOptionIds.includes(id);
+    }
+    isIdExclusive(id) {
+        const options = this.options || [];
+        for (const o of options) {
+            if (!o.isExclusive)
+                continue;
+            const refId = o.id || o.value;
+            if (refId === id)
+                return true;
+        }
+        return false;
+    }
     getSelectedValue() {
         if (!this.multiselect) {
             if (this.selectedOptionIds.length > 0) {
@@ -779,10 +984,10 @@ class SelectComponent {
     onTouched = () => { };
     writeValue(value) {
         if (Array.isArray(value)) {
-            this.selectedOptionIds = value.filter(id => id !== null && id !== undefined && id !== '');
+            this.selectedOptionIds = value.filter((id) => id !== null && id !== undefined && id !== '');
         }
         else {
-            this.selectedOptionIds = (value !== null && value !== undefined && value !== '') ? [value] : [];
+            this.selectedOptionIds = value !== null && value !== undefined && value !== '' ? [value] : [];
         }
         this.recomputeSelectedOptions();
     }
@@ -816,6 +1021,9 @@ class SelectComponent {
     ngOnChanges(changes) {
         if (changes['options']) {
             this.recomputeSelectedOptions();
+            if (this.showAllItems) {
+                this.seedManualInputs();
+            }
         }
     }
     recomputeSelectedOptions() {
@@ -912,26 +1120,134 @@ class SelectComponent {
         }
         return false;
     }
+    getManualKey(option) {
+        // Use option.id or option.value as the unique key
+        // This ensures each manual input option has a unique key
+        // even if they have the same manualPrefix
+        return option.id || option.value;
+    }
+    seedManualInputs() {
+        const options = this.options || [];
+        const manualOptions = options.filter((o) => o.shouldManualInput);
+        for (const opt of manualOptions) {
+            const prefix = opt.manualPrefix || '';
+            const key = this.getManualKey(opt);
+            const existingWithPrefix = this.selectedOptionIds.find((id) => prefix ? id?.startsWith(prefix) : false);
+            const value = existingWithPrefix ? existingWithPrefix.substring(prefix.length) : '';
+            this.manualInputValues[key] = value;
+        }
+    }
+    onManualInputChange(option, value) {
+        // IME 조합 중이면 업데이트하지 않음
+        if (this.isComposing) {
+            return;
+        }
+        const key = this.getManualKey(option);
+        this.manualInputValues[key] = value;
+        const prefix = option.manualPrefix || '';
+        const sentinel = option.id || option.value;
+        const trimmed = (value || '').trim();
+        if (this.multiselect) {
+            if (option.isExclusive) {
+                if (trimmed === '') {
+                    this.selectedOptionIds = [sentinel];
+                }
+                else {
+                    this.selectedOptionIds = [`${prefix}${trimmed}`];
+                }
+            }
+            else {
+                let next = this.selectedOptionIds.filter((id) => !this.isIdExclusive(id));
+                next = next.filter((id) => (prefix ? !id.startsWith(prefix) : id !== sentinel));
+                if (trimmed !== '') {
+                    const toAdd = `${prefix}${trimmed}`;
+                    if (!next.includes(toAdd)) {
+                        next = [toAdd, ...next];
+                    }
+                }
+                else {
+                    if (!next.includes(sentinel)) {
+                        next = [sentinel, ...next];
+                    }
+                }
+                this.selectedOptionIds = next;
+            }
+        }
+        else {
+            if (trimmed === '') {
+                this.selectedOptionIds = [sentinel];
+            }
+            else {
+                this.selectedOptionIds = [`${prefix}${trimmed}`];
+            }
+        }
+        this.recomputeSelectedOptions();
+        this.onChange(this.getSelectedValue());
+        const selectedValue = this.getSelectedValue();
+        if (selectedValue !== null) {
+            this.selectedChange.emit(selectedValue);
+        }
+        this.cdr.markForCheck();
+    }
+    onCompositionStart() {
+        this.isComposing = true;
+    }
+    onCompositionEnd(option, event) {
+        this.isComposing = false;
+        // 조합이 끝나면 최종 값으로 업데이트
+        const target = event.target;
+        this.onManualInputChange(option, target.value);
+    }
+    onManualInputBlur(option) {
+        const key = this.getManualKey(option);
+        const raw = (this.manualInputValues[key] || '').trim();
+        if (raw === '') {
+            this.activeManualKey = null;
+            const prefix = option.manualPrefix || '';
+            const sentinel = option.id || option.value;
+            if (this.multiselect) {
+                let next = [...this.selectedOptionIds];
+                next = next.filter((id) => {
+                    if (id === sentinel)
+                        return false;
+                    if (prefix && id.startsWith(prefix))
+                        return false;
+                    return true;
+                });
+                this.selectedOptionIds = next;
+            }
+            else {
+                this.selectedOptionIds = [];
+            }
+            this.recomputeSelectedOptions();
+            this.onChange(this.getSelectedValue());
+            const selectedValue = this.getSelectedValue();
+            if (selectedValue !== null) {
+                this.selectedChange.emit(selectedValue);
+            }
+            this.cdr.markForCheck();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectComponent, isStandalone: true, selector: "haloduck-select", inputs: { disabled: "disabled", loading: "loading", variant: "variant", asButton: "asButton", useIcon: "useIcon", useFilter: "useFilter", multiselect: "multiselect", placeholder: "placeholder", atLeastOne: "atLeastOne", showAll: "showAll", options: "options", layout: "layout", labelWidth: "labelWidth", value: "value" }, outputs: { selectedChange: "selectedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectComponent, isStandalone: true, selector: "haloduck-select", inputs: { disabled: "disabled", loading: "loading", variant: "variant", asButton: "asButton", useIcon: "useIcon", useFilter: "useFilter", multiselect: "multiselect", placeholder: "placeholder", atLeastOne: "atLeastOne", showAll: "showAll", showAllItems: "showAllItems", options: "options", layout: "layout", labelWidth: "labelWidth", value: "value" }, outputs: { selectedChange: "selectedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of displayedSelectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && displayedSelectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ displayedSelectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ displayedSelectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex gap-2 items-center w-full\"\n  [ngClass]=\"{ 'flex-col items-start': layout === 'vertical' }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n\n  @if (showAllItems) {\n    <!-- Inline options display -->\n    <div class=\"w-full flex-1\">\n      @if (loading) {\n        <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n          <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">\n            &nbsp;\n          </div>\n        </div>\n      } @else {\n        <div class=\"flex flex-col gap-2\">\n          @for (option of options; track option.id || option.value) {\n            <label\n              class=\"flex items-center gap-2 text-sm/6 text-light-on-control dark:text-dark-on-control cursor-pointer\"\n              [ngClass]=\"{\n                'opacity-60 cursor-not-allowed': disabled,\n              }\"\n            >\n              @if (multiselect) {\n                <!-- Checkbox for multiselect -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  class=\"appearance-none w-5 h-5 rounded bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-0 before:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgNEw0LjUgNy41TDExIDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+')] before:bg-center before:bg-no-repeat before:opacity-0 checked:before:opacity-100\"\n                />\n              } @else {\n                <!-- Radio button for single select -->\n                <input\n                  type=\"radio\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  name=\"radio-group\"\n                  class=\"appearance-none w-5 h-5 rounded-full bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-[4px] before:rounded-full before:bg-light-on-primary before:dark:bg-dark-on-primary before:opacity-0 checked:before:opacity-100\"\n                />\n              }\n              @if (\n                option.shouldManualInput &&\n                (isOptionSelected(option) || activeManualKey === (option.id || option.value))\n              ) {\n                <input\n                  type=\"text\"\n                  [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n                  [attr.data-manual-key]=\"option.id || option.value\"\n                  (ngModelChange)=\"onManualInputChange(option, $event)\"\n                  (compositionstart)=\"onCompositionStart()\"\n                  (compositionend)=\"onCompositionEnd(option, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (blur)=\"onManualInputBlur(option)\"\n                  (keydown.enter)=\"$event.preventDefault(); onManualInputBlur(option)\"\n                  [disabled]=\"!!disabled\"\n                  class=\"flex-1 text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control\"\n                />\n              } @else {\n                <span (click)=\"!disabled && onToggleOption(option)\">{{ option.value }}</span>\n              }\n            </label>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Original dropdown display -->\n    <div\n      #origin\n      class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n      [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary':\n          !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n          variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n          variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n          variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n          disabled,\n      }\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"onClick($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div\n        class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\"\n      >\n        @if (loading) {\n          <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n            <div\n              class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\"\n            >\n              &nbsp;\n            </div>\n          </div>\n        } @else {\n          <div class=\"flex-1\">\n            @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n              @if (multiselect) {\n                <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n                  @for (option of displayedSelectedOptions; track option; let i = $index) {\n                    @if (showAll || i === 0) {\n                      <span\n                        class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                        [ngClass]=\"{ 'w-full h-full px-4': !multiselect, 'px-1': multiselect }\"\n                      >\n                        {{ option.value }}\n                        @if (showAll || i === 0) {\n                          <div\n                            (click)=\"onDeselectOption($event, option)\"\n                            class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\"\n                          >\n                            <svg\n                              class=\"w-3 h-3\"\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 20 20\"\n                              fill=\"currentColor\"\n                              aria-hidden=\"true\"\n                            >\n                              <path\n                                fill-rule=\"evenodd\"\n                                d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                                clip-rule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        }\n                      </span>\n                      @if (!showAll && displayedSelectedOptions.length > 1) {\n                        <span\n                          class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\"\n                        >\n                          +{{ displayedSelectedOptions.length - 1 }}\n                        </span>\n                      }\n                    }\n                  }\n                </div>\n              } @else {\n                <span\n                  class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n                  [ngClass]=\"{\n                    'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                    'text-light-on-primary dark:text-dark-on-primary':\n                      variant === 'primary' && !disabled,\n                    'text-light-on-secondary dark:text-dark-on-secondary':\n                      variant === 'secondary' && !disabled,\n                    'text-light-on-danger dark:text-dark-on-danger':\n                      variant === 'danger' && !disabled,\n                  }\"\n                  >{{ displayedSelectedOptions[0].value }}</span\n                >\n              }\n            } @else {\n              <span\n                class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n                [ngClass]=\"{\n                  'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                  'text-light-on-primary/80 dark:text-dark-on-primary/80':\n                    variant === 'primary' && !disabled,\n                  'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n                    variant === 'secondary' && !disabled,\n                  'text-light-on-danger/80 dark:text-dark-on-danger/80':\n                    variant === 'danger' && !disabled,\n                }\"\n              >\n                @if (useIcon) {\n                  <ng-content select=\"buttonIcon\"></ng-content>\n                } @else {\n                  {{ placeholder }}\n                }\n              </span>\n            }\n          </div>\n        }\n        <div\n          class=\"text-light-on-control dark:text-dark-on-control\"\n          [ngClass]=\"{\n            'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n            'text-light-on-primary/80 dark:text-dark-on-primary/80':\n              variant === 'primary' && !disabled,\n            'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n              variant === 'secondary' && !disabled,\n            'text-light-on-danger/80 dark:text-dark-on-danger/80':\n              variant === 'danger' && !disabled,\n          }\"\n        >\n          @if (isDropdownOpen()) {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-select', imports: [CommonModule], providers: [
+            args: [{ selector: 'haloduck-select', imports: [CommonModule, FormsModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"flex gap-2 items-center w-full\"\n     [ngClass]=\"{'flex-col items-start': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n  <div #origin\n       class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n       [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary': !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary' : variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary' : variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger' : variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n        }\"\n       [tabindex]=\"(disabled) ? -1 : 0\"\n       (click)=\"onClick($event)\"\n       (keydown)=\"onKeyDown($event)\">\n    <div class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\">\n      @if(loading){\n      <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n        <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">&nbsp;</div>\n      </div>\n      }\n      @else{\n      <div class=\"flex-1\">\n        @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of displayedSelectedOptions; track option; let i = $index) {\n          @if (showAll || i === 0) {\n          <span class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                [ngClass]=\"{'w-full h-full px-4': !multiselect, 'px-1': multiselect}\">\n            {{ option.value }}\n            @if (showAll || i === 0) {\n            <div (click)=\"onDeselectOption($event, option)\"\n                 class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\">\n              <svg class=\"w-3 h-3\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            }\n          </span>\n          @if (!showAll && displayedSelectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ displayedSelectedOptions.length - 1 }}\n          </span>\n          }\n          }\n          }\n        </div>\n        } @else {\n        <span class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary dark:text-dark-on-primary': variant === 'primary' && !disabled,\n                'text-light-on-secondary dark:text-dark-on-secondary': variant === 'secondary' && !disabled,\n                'text-light-on-danger dark:text-dark-on-danger': variant === 'danger' && !disabled,\n        }\">{{ displayedSelectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n              [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n        }\">\n          @if (useIcon) {\n          <ng-content select=\"buttonIcon\"></ng-content>\n          } @else {\n          {{ placeholder }}\n          }\n        </span>\n        }\n      </div>\n      }\n      <div class=\"text-light-on-control dark:text-dark-on-control\"\n           [ngClass]=\"{\n                'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                'text-light-on-primary/80 dark:text-dark-on-primary/80': variant === 'primary' && !disabled,\n                'text-light-on-secondary/80 dark:text-dark-on-secondary/80': variant === 'secondary' && !disabled,\n                'text-light-on-danger/80 dark:text-dark-on-danger/80': variant === 'danger' && !disabled,\n      }\">\n        @if (isDropdownOpen()) {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        } @else {\n        <svg class=\"w-4 h-4 ml-2 inline-block\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 20 20\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\" />\n        </svg>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex gap-2 items-center w-full\"\n  [ngClass]=\"{ 'flex-col items-start': layout === 'vertical' }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n\n  @if (showAllItems) {\n    <!-- Inline options display -->\n    <div class=\"w-full flex-1\">\n      @if (loading) {\n        <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n          <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">\n            &nbsp;\n          </div>\n        </div>\n      } @else {\n        <div class=\"flex flex-col gap-2\">\n          @for (option of options; track option.id || option.value) {\n            <label\n              class=\"flex items-center gap-2 text-sm/6 text-light-on-control dark:text-dark-on-control cursor-pointer\"\n              [ngClass]=\"{\n                'opacity-60 cursor-not-allowed': disabled,\n              }\"\n            >\n              @if (multiselect) {\n                <!-- Checkbox for multiselect -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  class=\"appearance-none w-5 h-5 rounded bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-0 before:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgNEw0LjUgNy41TDExIDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+')] before:bg-center before:bg-no-repeat before:opacity-0 checked:before:opacity-100\"\n                />\n              } @else {\n                <!-- Radio button for single select -->\n                <input\n                  type=\"radio\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  name=\"radio-group\"\n                  class=\"appearance-none w-5 h-5 rounded-full bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-[4px] before:rounded-full before:bg-light-on-primary before:dark:bg-dark-on-primary before:opacity-0 checked:before:opacity-100\"\n                />\n              }\n              @if (\n                option.shouldManualInput &&\n                (isOptionSelected(option) || activeManualKey === (option.id || option.value))\n              ) {\n                <input\n                  type=\"text\"\n                  [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n                  [attr.data-manual-key]=\"option.id || option.value\"\n                  (ngModelChange)=\"onManualInputChange(option, $event)\"\n                  (compositionstart)=\"onCompositionStart()\"\n                  (compositionend)=\"onCompositionEnd(option, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (blur)=\"onManualInputBlur(option)\"\n                  (keydown.enter)=\"$event.preventDefault(); onManualInputBlur(option)\"\n                  [disabled]=\"!!disabled\"\n                  class=\"flex-1 text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control\"\n                />\n              } @else {\n                <span (click)=\"!disabled && onToggleOption(option)\">{{ option.value }}</span>\n              }\n            </label>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Original dropdown display -->\n    <div\n      #origin\n      class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n      [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary':\n          !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n          variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n          variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n          variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n          disabled,\n      }\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"onClick($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div\n        class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\"\n      >\n        @if (loading) {\n          <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n            <div\n              class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\"\n            >\n              &nbsp;\n            </div>\n          </div>\n        } @else {\n          <div class=\"flex-1\">\n            @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n              @if (multiselect) {\n                <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n                  @for (option of displayedSelectedOptions; track option; let i = $index) {\n                    @if (showAll || i === 0) {\n                      <span\n                        class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                        [ngClass]=\"{ 'w-full h-full px-4': !multiselect, 'px-1': multiselect }\"\n                      >\n                        {{ option.value }}\n                        @if (showAll || i === 0) {\n                          <div\n                            (click)=\"onDeselectOption($event, option)\"\n                            class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\"\n                          >\n                            <svg\n                              class=\"w-3 h-3\"\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 20 20\"\n                              fill=\"currentColor\"\n                              aria-hidden=\"true\"\n                            >\n                              <path\n                                fill-rule=\"evenodd\"\n                                d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                                clip-rule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        }\n                      </span>\n                      @if (!showAll && displayedSelectedOptions.length > 1) {\n                        <span\n                          class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\"\n                        >\n                          +{{ displayedSelectedOptions.length - 1 }}\n                        </span>\n                      }\n                    }\n                  }\n                </div>\n              } @else {\n                <span\n                  class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n                  [ngClass]=\"{\n                    'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                    'text-light-on-primary dark:text-dark-on-primary':\n                      variant === 'primary' && !disabled,\n                    'text-light-on-secondary dark:text-dark-on-secondary':\n                      variant === 'secondary' && !disabled,\n                    'text-light-on-danger dark:text-dark-on-danger':\n                      variant === 'danger' && !disabled,\n                  }\"\n                  >{{ displayedSelectedOptions[0].value }}</span\n                >\n              }\n            } @else {\n              <span\n                class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n                [ngClass]=\"{\n                  'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                  'text-light-on-primary/80 dark:text-dark-on-primary/80':\n                    variant === 'primary' && !disabled,\n                  'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n                    variant === 'secondary' && !disabled,\n                  'text-light-on-danger/80 dark:text-dark-on-danger/80':\n                    variant === 'danger' && !disabled,\n                }\"\n              >\n                @if (useIcon) {\n                  <ng-content select=\"buttonIcon\"></ng-content>\n                } @else {\n                  {{ placeholder }}\n                }\n              </span>\n            }\n          </div>\n        }\n        <div\n          class=\"text-light-on-control dark:text-dark-on-control\"\n          [ngClass]=\"{\n            'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n            'text-light-on-primary/80 dark:text-dark-on-primary/80':\n              variant === 'primary' && !disabled,\n            'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n              variant === 'secondary' && !disabled,\n            'text-light-on-danger/80 dark:text-dark-on-danger/80':\n              variant === 'danger' && !disabled,\n          }\"\n        >\n          @if (isDropdownOpen()) {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], disabled: [{
@@ -954,6 +1270,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }], showAll: [{
                 type: Input
+            }], showAllItems: [{
+                type: Input
             }], options: [{
                 type: Input
             }], layout: [{
@@ -1040,9 +1358,7 @@ class CalendarComponent {
         else {
             const dateRange = value;
             currentDate =
-                dateRange && dateRange.from && dateRange.to
-                    ? dateRange.from
-                    : dateToString(new Date());
+                dateRange && dateRange.from && dateRange.to ? dateRange.from : dateToString(new Date());
         }
         this.currentYear = parseInt(currentDate.slice(0, 4), 10);
         this.currentMonth = parseInt(currentDate.slice(5, 7), 10) - 1;
@@ -1059,8 +1375,7 @@ class CalendarComponent {
         if (lastOfCalendar.getDate() > 6) {
             lastOfCalendar.setDate(lastOfCalendar.getDate() - 7);
         }
-        const dateDiff = Math.ceil((lastOfCalendar.getTime() - firstOfCalendar.getTime()) /
-            (1000 * 60 * 60 * 24)) + 1;
+        const dateDiff = Math.ceil((lastOfCalendar.getTime() - firstOfCalendar.getTime()) / (1000 * 60 * 60 * 24)) + 1;
         this.listCalendarDate = [];
         for (let i = 0; i < dateDiff; i++) {
             const datetime = dateToString(firstOfCalendar);
@@ -1175,11 +1490,11 @@ class CalendarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CalendarComponent, isStandalone: true, selector: "haloduck-calendar", inputs: { singleDate: "singleDate", firstDayOfWeek: "firstDayOfWeek", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange" }, outputs: { dateChange: "dateChange", dateRangeChange: "dateRangeChange" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "monthSelect", first: true, predicate: ["monthSelect"], descendants: true }], ngImport: i0, template: "<div id=\"dateRangeCalendar\"\n     class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n     tabindex=\"1\">\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(-1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"yearList\"\n                         [value]=\"currentYear + ''\"\n                         (selectedChange)=\"onSelectYear($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(-1)\">\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"monthList\"\n                         [value]=\"currentMonth + ''\"\n                         (selectedChange)=\"onSelectMonth($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(1)\">\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n         class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\">\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n      <button type=\"button\"\n              (click)=\"onSelectCalendarDate(date)\"\n              class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n              [ngClass]=\"{'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control' : date.isCurrentMonth}\">\n        <time [ngClass]=\"{'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light': date.isToday && date.datetime !== selectedDateRange?.from,\n           'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': date.datetime === selectedDateRange?.from,\n           'bg-gray-500 font-semibold text-white' : date.isTheDate}\"\n              class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\">{{date.date}}</time>\n      </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CalendarComponent, isStandalone: true, selector: "haloduck-calendar", inputs: { singleDate: "singleDate", firstDayOfWeek: "firstDayOfWeek", selectedDate: "selectedDate", selectedDateRange: "selectedDateRange" }, outputs: { dateChange: "dateChange", dateRangeChange: "dateRangeChange" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "monthSelect", first: true, predicate: ["monthSelect"], descendants: true }], ngImport: i0, template: "<div\n  id=\"dateRangeCalendar\"\n  class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n  tabindex=\"1\"\n>\n  <div class=\"flex items-center\">\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustYear(-1)\"\n    >\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select\n          [multiselect]=\"false\"\n          [atLeastOne]=\"true\"\n          [options]=\"yearList\"\n          [value]=\"currentYear + ''\"\n          (selectedChange)=\"onSelectYear($event)\"\n        >\n        </haloduck-select>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustYear(1)\"\n    >\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustMonth(-1)\"\n    >\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select\n          [multiselect]=\"false\"\n          [atLeastOne]=\"true\"\n          [options]=\"monthList\"\n          [value]=\"currentMonth + ''\"\n          (selectedChange)=\"onSelectMonth($event)\"\n        >\n        </haloduck-select>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustMonth(1)\"\n    >\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n      class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\"\n    >\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n        <button\n          type=\"button\"\n          (click)=\"onSelectCalendarDate(date)\"\n          class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n          [ngClass]=\"{\n            'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control':\n              date.isCurrentMonth,\n          }\"\n        >\n          <time\n            [ngClass]=\"{\n              'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light':\n                date.isToday && date.datetime !== selectedDateRange?.from,\n              'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n                date.datetime === selectedDateRange?.from,\n              'bg-gray-500 font-semibold text-white': date.isTheDate,\n            }\"\n            class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\"\n            >{{ date.date }}</time\n          >\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "showAllItems", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-calendar', imports: [CommonModule, SelectComponent, FormsModule, TranslocoModule], providers: [provideTranslocoScope('haloduck')], template: "<div id=\"dateRangeCalendar\"\n     class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n     tabindex=\"1\">\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(-1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"yearList\"\n                         [value]=\"currentYear + ''\"\n                         (selectedChange)=\"onSelectYear($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n            (click)=\"onAdjustYear(1)\">\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(-1)\">\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select [multiselect]=\"false\"\n                         [atLeastOne]=\"true\"\n                         [options]=\"monthList\"\n                         [value]=\"currentMonth + ''\"\n                         (selectedChange)=\"onSelectMonth($event)\">\n        </haloduck-select>\n      </div>\n    </div>\n    <button type=\"button\"\n            class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\n\"\n            (click)=\"onAdjustMonth(1)\">\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg class=\"size-5\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path fill-rule=\"evenodd\"\n              d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n         class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\">\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n      <button type=\"button\"\n              (click)=\"onSelectCalendarDate(date)\"\n              class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n              [ngClass]=\"{'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control' : date.isCurrentMonth}\">\n        <time [ngClass]=\"{'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light': date.isToday && date.datetime !== selectedDateRange?.from,\n           'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': date.datetime === selectedDateRange?.from,\n           'bg-gray-500 font-semibold text-white' : date.isTheDate}\"\n              class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\">{{date.date}}</time>\n      </button>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-calendar', imports: [CommonModule, SelectComponent, FormsModule, TranslocoModule], providers: [provideTranslocoScope('haloduck')], template: "<div\n  id=\"dateRangeCalendar\"\n  class=\"min-w-96 brightness-125 bg-light-background dark:bg-dark-background border border-light-inactive dark:border-dark-inactive rounded text-center p-4 flex flex-col gap-4\"\n  tabindex=\"1\"\n>\n  <div class=\"flex items-center\">\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustYear(-1)\"\n    >\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select\n          [multiselect]=\"false\"\n          [atLeastOne]=\"true\"\n          [options]=\"yearList\"\n          [value]=\"currentYear + ''\"\n          (selectedChange)=\"onSelectYear($event)\"\n        >\n        </haloduck-select>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustYear(1)\"\n    >\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"flex items-center\">\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustMonth(-1)\"\n    >\n      <span class=\"sr-only\">\uC774\uC804 \uB2EC</span>\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div class=\"flex-auto text-sm font-semibold flex justify-center\">\n      <div class=\"w-32\">\n        <haloduck-select\n          [multiselect]=\"false\"\n          [atLeastOne]=\"true\"\n          [options]=\"monthList\"\n          [value]=\"currentMonth + ''\"\n          (selectedChange)=\"onSelectMonth($event)\"\n        >\n        </haloduck-select>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"-m-1.5 flex flex-none items-center justify-center p-1.5 text-light-on-background dark:text-dark-on-background hover:scale-105 hover:cursor-pointer active:scale-95\"\n      (click)=\"onAdjustMonth(1)\"\n    >\n      <span class=\"sr-only\">\uB2E4\uC74C \uB2EC</span>\n      <svg\n        class=\"size-5\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        data-slot=\"icon\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <div>\n    <div\n      class=\"grid grid-cols-7 gap-[1px] text-xs/6 font-semibold text-light-on-background dark:text-dark-on-background\"\n    >\n      <div>{{ 'haloduck.ui.calendar.Mon' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Tue' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Wed' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Thu' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Fri' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sat' | transloco }}</div>\n      <div>{{ 'haloduck.ui.calendar.Sun' | transloco }}</div>\n    </div>\n\n    <div class=\"isolate mt-2 grid grid-cols-7 gap-[1px] rounded-lg text-sm shadow overflow-hidden\">\n      @for (date of listCalendarDate; track date.datetime) {\n        <button\n          type=\"button\"\n          (click)=\"onSelectCalendarDate(date)\"\n          class=\"py-1.5 hover:cursor-pointer bg-light-alternative dark:bg-dark-alternative text-light-on-alternative dark:text-dark-on-alternative\"\n          [ngClass]=\"{\n            'bg-light-control dark:bg-dark-control text-light-on-control dark:text-dark-on-control':\n              date.isCurrentMonth,\n          }\"\n        >\n          <time\n            [ngClass]=\"{\n              'font-semibold bg-light-primary-light dark:bg-dark-primary-light text-on-light-primary-light dark:text-dark-on-primary-light':\n                date.isToday && date.datetime !== selectedDateRange?.from,\n              'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n                date.datetime === selectedDateRange?.from,\n              'bg-gray-500 font-semibold text-white': date.isTheDate,\n            }\"\n            class=\"mx-auto flex size-7 items-center justify-center rounded-full hover:font-bold\"\n            >{{ date.date }}</time\n          >\n        </button>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { monthSelect: [{
                 type: ViewChild,
                 args: ['monthSelect', { static: false }]
@@ -1237,11 +1552,11 @@ class DialogContainerComponent {
         this.close.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DialogContainerComponent, isStandalone: true, selector: "haloduck-dialog-container", inputs: { childComponent: "childComponent", data: "data" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"h-full w-full max-h-full max-w-full fixed inset-0 bg-black/50 flex items-center justify-center overflow-hidden\">\n    <!-- <div class=\"w-full h-full max-w-full max-h-full bg-white p-5 rounded-lg overflow-y-auto\"\n         (click)=\"$event.stopPropagation()\"> -->\n        <ng-container id=\"dialogContainer\"\n                      #dialogContainer></ng-container>\n    <!-- </div> -->\n</div>\n", styles: [".custom-dialog-panel{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DialogContainerComponent, isStandalone: true, selector: "haloduck-dialog-container", inputs: { childComponent: "childComponent", data: "data" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\n  class=\"h-full w-full max-h-full max-w-full fixed inset-0 bg-black/50 flex items-center justify-center overflow-hidden\"\n>\n  <!-- <div class=\"w-full h-full max-w-full max-h-full bg-white p-5 rounded-lg overflow-y-auto\"\n         (click)=\"$event.stopPropagation()\"> -->\n  <ng-container id=\"dialogContainer\" #dialogContainer></ng-container>\n  <!-- </div> -->\n</div>\n", styles: [".custom-dialog-panel{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-dialog-container', template: "<div class=\"h-full w-full max-h-full max-w-full fixed inset-0 bg-black/50 flex items-center justify-center overflow-hidden\">\n    <!-- <div class=\"w-full h-full max-w-full max-h-full bg-white p-5 rounded-lg overflow-y-auto\"\n         (click)=\"$event.stopPropagation()\"> -->\n        <ng-container id=\"dialogContainer\"\n                      #dialogContainer></ng-container>\n    <!-- </div> -->\n</div>\n", styles: [".custom-dialog-panel{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0}\n"] }]
+            args: [{ selector: 'haloduck-dialog-container', template: "<div\n  class=\"h-full w-full max-h-full max-w-full fixed inset-0 bg-black/50 flex items-center justify-center overflow-hidden\"\n>\n  <!-- <div class=\"w-full h-full max-w-full max-h-full bg-white p-5 rounded-lg overflow-y-auto\"\n         (click)=\"$event.stopPropagation()\"> -->\n  <ng-container id=\"dialogContainer\" #dialogContainer></ng-container>\n  <!-- </div> -->\n</div>\n", styles: [".custom-dialog-panel{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0}\n"] }]
         }], propDecorators: { childComponent: [{
                 type: Input
             }], data: [{
@@ -1278,7 +1593,7 @@ class DialogService {
     close(overlayRef) {
         if (overlayRef) {
             overlayRef.dispose();
-            this.dialogStack = this.dialogStack.filter(ref => ref !== overlayRef);
+            this.dialogStack = this.dialogStack.filter((ref) => ref !== overlayRef);
         }
         else {
             // 마지막 다이얼로그 닫기
@@ -1307,16 +1622,14 @@ class ConfirmDialogComponent {
         this.context.clickedButton$.complete();
         this.dialogService.close(this.context.overlayRef);
     }
-    ngOnInit() {
-    }
-    constructor() {
-    }
+    ngOnInit() { }
+    constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ConfirmDialogComponent, isStandalone: true, selector: "haloduck-confirm-dialog", inputs: { context: "context" }, ngImport: i0, template: "<div class=\"w-120 max-w-full flex flex-col gap-4 text-light-on-background dark:text-dark-on-background bg-light-background dark:bg-dark-background\">\n    <div class=\"font-bold\">{{ context.title }}</div>\n    <p>{{ context.message }}</p>\n    <div class=\"flex items-center justify-center gap-4\">\n        @for (button of context.buttons; track button.id) {\n        <haloduck-button [variant]=\"button.variant\"\n                    (click)=\"onButtonClicked(button.id)\">{{ button.label }}</haloduck-button>\n        }\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ConfirmDialogComponent, isStandalone: true, selector: "haloduck-confirm-dialog", inputs: { context: "context" }, ngImport: i0, template: "<div\n  class=\"w-120 max-w-full flex flex-col gap-4 text-light-on-background dark:text-dark-on-background bg-light-background dark:bg-dark-background\"\n>\n  <div class=\"font-bold\">{{ context.title }}</div>\n  <p>{{ context.message }}</p>\n  <div class=\"flex items-center justify-center gap-4\">\n    @for (button of context.buttons; track button.id) {\n      <haloduck-button [variant]=\"button.variant\" (click)=\"onButtonClicked(button.id)\">{{\n        button.label\n      }}</haloduck-button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-confirm-dialog', imports: [ButtonComponent], template: "<div class=\"w-120 max-w-full flex flex-col gap-4 text-light-on-background dark:text-dark-on-background bg-light-background dark:bg-dark-background\">\n    <div class=\"font-bold\">{{ context.title }}</div>\n    <p>{{ context.message }}</p>\n    <div class=\"flex items-center justify-center gap-4\">\n        @for (button of context.buttons; track button.id) {\n        <haloduck-button [variant]=\"button.variant\"\n                    (click)=\"onButtonClicked(button.id)\">{{ button.label }}</haloduck-button>\n        }\n    </div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-confirm-dialog', imports: [ButtonComponent], template: "<div\n  class=\"w-120 max-w-full flex flex-col gap-4 text-light-on-background dark:text-dark-on-background bg-light-background dark:bg-dark-background\"\n>\n  <div class=\"font-bold\">{{ context.title }}</div>\n  <p>{{ context.message }}</p>\n  <div class=\"flex items-center justify-center gap-4\">\n    @for (button of context.buttons; track button.id) {\n      <haloduck-button [variant]=\"button.variant\" (click)=\"onButtonClicked(button.id)\">{{\n        button.label\n      }}</haloduck-button>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { context: [{
                 type: Input
             }] } });
@@ -1355,8 +1668,7 @@ class CopyButtonComponent {
             this.isAnimating = false;
         }, 500); // Animation duration
         if (navigator.clipboard && window.isSecureContext) {
-            navigator.clipboard
-                .writeText(this.text);
+            navigator.clipboard.writeText(this.text);
             // .then(() => {
             //   console.log('Text copied to clipboard');
             // })
@@ -1382,11 +1694,11 @@ class CopyButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CopyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CopyButtonComponent, isStandalone: true, selector: "haloduck-copy-button", inputs: { text: "text" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<ng-container *transloco=\"let _ts; read: 'haloduck'\">\n  <button type=\"button\"\n          class=\"group inline-flex items-center px-2 py-1 bg-light-alternative dark:bg-dark-alternative hover:brightness-125 rounded text-xs text-light-on-alternative dark:text-dark-on-alternative hover:cursor-pointer active:scale-95 transition-transform\"\n          (click)=\"copyToClipboard($event)\"\n          title=\"Copy to clipboard\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         [class]=\"'h-4 w-4 mr-1 transition-all duration-500 ' + (isAnimating ? 'scale-150 opacity-0' : 'scale-100 opacity-100')\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <rect x=\"9\"\n            y=\"9\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n      <rect x=\"3\"\n            y=\"3\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n    </svg>\n    <span class=\"hidden group-hover:inline\">\n      @if (isAnimating) {\n      {{ _ts('ui.button.Copied') }}\n      } @else {\n      {{ _ts('ui.button.Copy') }}\n      }\n    </span>\n  </button>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i2$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: CopyButtonComponent, isStandalone: true, selector: "haloduck-copy-button", inputs: { text: "text" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<ng-container *transloco=\"let _ts; read: 'haloduck'\">\n  <button\n    type=\"button\"\n    class=\"group inline-flex items-center px-2 py-1 bg-light-alternative dark:bg-dark-alternative hover:brightness-125 rounded text-xs text-light-on-alternative dark:text-dark-on-alternative hover:cursor-pointer active:scale-95 transition-transform\"\n    (click)=\"copyToClipboard($event)\"\n    title=\"Copy to clipboard\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [class]=\"\n        'h-4 w-4 mr-1 transition-all duration-500 ' +\n        (isAnimating ? 'scale-150 opacity-0' : 'scale-100 opacity-100')\n      \"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <rect\n        x=\"9\"\n        y=\"9\"\n        width=\"13\"\n        height=\"13\"\n        rx=\"2\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        fill=\"none\"\n      />\n      <rect\n        x=\"3\"\n        y=\"3\"\n        width=\"13\"\n        height=\"13\"\n        rx=\"2\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        fill=\"none\"\n      />\n    </svg>\n    <span class=\"hidden group-hover:inline\">\n      @if (isAnimating) {\n        {{ _ts('ui.button.Copied') }}\n      } @else {\n        {{ _ts('ui.button.Copy') }}\n      }\n    </span>\n  </button>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i2$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CopyButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-copy-button', imports: [TranslocoModule], providers: [provideTranslocoScope('haloduck')], template: "<ng-container *transloco=\"let _ts; read: 'haloduck'\">\n  <button type=\"button\"\n          class=\"group inline-flex items-center px-2 py-1 bg-light-alternative dark:bg-dark-alternative hover:brightness-125 rounded text-xs text-light-on-alternative dark:text-dark-on-alternative hover:cursor-pointer active:scale-95 transition-transform\"\n          (click)=\"copyToClipboard($event)\"\n          title=\"Copy to clipboard\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         [class]=\"'h-4 w-4 mr-1 transition-all duration-500 ' + (isAnimating ? 'scale-150 opacity-0' : 'scale-100 opacity-100')\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <rect x=\"9\"\n            y=\"9\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n      <rect x=\"3\"\n            y=\"3\"\n            width=\"13\"\n            height=\"13\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            fill=\"none\" />\n    </svg>\n    <span class=\"hidden group-hover:inline\">\n      @if (isAnimating) {\n      {{ _ts('ui.button.Copied') }}\n      } @else {\n      {{ _ts('ui.button.Copy') }}\n      }\n    </span>\n  </button>\n</ng-container>\n" }]
+            args: [{ selector: 'haloduck-copy-button', imports: [TranslocoModule], providers: [provideTranslocoScope('haloduck')], template: "<ng-container *transloco=\"let _ts; read: 'haloduck'\">\n  <button\n    type=\"button\"\n    class=\"group inline-flex items-center px-2 py-1 bg-light-alternative dark:bg-dark-alternative hover:brightness-125 rounded text-xs text-light-on-alternative dark:text-dark-on-alternative hover:cursor-pointer active:scale-95 transition-transform\"\n    (click)=\"copyToClipboard($event)\"\n    title=\"Copy to clipboard\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [class]=\"\n        'h-4 w-4 mr-1 transition-all duration-500 ' +\n        (isAnimating ? 'scale-150 opacity-0' : 'scale-100 opacity-100')\n      \"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <rect\n        x=\"9\"\n        y=\"9\"\n        width=\"13\"\n        height=\"13\"\n        rx=\"2\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        fill=\"none\"\n      />\n      <rect\n        x=\"3\"\n        y=\"3\"\n        width=\"13\"\n        height=\"13\"\n        rx=\"2\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        fill=\"none\"\n      />\n    </svg>\n    <span class=\"hidden group-hover:inline\">\n      @if (isAnimating) {\n        {{ _ts('ui.button.Copied') }}\n      } @else {\n        {{ _ts('ui.button.Copy') }}\n      }\n    </span>\n  </button>\n</ng-container>\n" }]
         }], propDecorators: { text: [{
                 type: Input
             }] } });
@@ -1442,9 +1754,7 @@ class DatePickerComponent {
             componentRef.instance.singleDate = true;
             componentRef.instance.selectedDate = this.selectedDate;
             // Subscribe to events emitted by the CalendarComponent
-            componentRef.instance.dateChange
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((date) => {
+            componentRef.instance.dateChange.pipe(takeUntil(this.destroy$)).subscribe((date) => {
                 this.onDateChange(date);
                 this.closeCalendar();
             });
@@ -1500,7 +1810,7 @@ class DatePickerComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"py-1.5 relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <div class=\"flex-1 text-light-on-control dark:text-dark-on-control sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n          'text-light-inactive dark:text-dark-inactive': !selectedDate && !disabled,\n          'text-light-on-control dark:text-dark-on-control': selectedDate && !disabled,\n        }\"> {{ selectedDate || placeholder }}</div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div\n  #origin\n  class=\"py-1.5 relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n  [ngClass]=\"{\n    'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary':\n      !disabled,\n    'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n      disabled,\n  }\"\n  [tabindex]=\"disabled ? -1 : 0\"\n  (click)=\"onClick()\"\n>\n  <div class=\"flex items-center\">\n    <div\n      class=\"flex-1 text-light-on-control dark:text-dark-on-control sm:text-sm/6 text-center\"\n      [ngClass]=\"{\n        'text-light-inactive dark:text-dark-inactive': !selectedDate && !disabled,\n        'text-light-on-control dark:text-dark-on-control': selectedDate && !disabled,\n      }\"\n    >\n      {{ selectedDate || placeholder }}\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -1511,7 +1821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"py-1.5 relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <div class=\"flex-1 text-light-on-control dark:text-dark-on-control sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n          'text-light-inactive dark:text-dark-inactive': !selectedDate && !disabled,\n          'text-light-on-control dark:text-dark-on-control': selectedDate && !disabled,\n        }\"> {{ selectedDate || placeholder }}</div>\n  </div>\n</div>\n" }]
+                    ], template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div\n  #origin\n  class=\"py-1.5 relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n  [ngClass]=\"{\n    'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary':\n      !disabled,\n    'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n      disabled,\n  }\"\n  [tabindex]=\"disabled ? -1 : 0\"\n  (click)=\"onClick()\"\n>\n  <div class=\"flex items-center\">\n    <div\n      class=\"flex-1 text-light-on-control dark:text-dark-on-control sm:text-sm/6 text-center\"\n      [ngClass]=\"{\n        'text-light-inactive dark:text-dark-inactive': !selectedDate && !disabled,\n        'text-light-on-control dark:text-dark-on-control': selectedDate && !disabled,\n      }\"\n    >\n      {{ selectedDate || placeholder }}\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], placeholder: [{
@@ -1614,8 +1924,7 @@ class DateRangeComponent {
                 default:
                     break;
             }
-            return (dateRange.from === dateToString(from) &&
-                dateRange.to === dateToString(to));
+            return dateRange.from === dateToString(from) && dateRange.to === dateToString(to);
         });
         if (selectedOption) {
             return selectedOption.id || selectedOption.value;
@@ -1651,9 +1960,7 @@ class DateRangeComponent {
             componentRef.instance.firstDayOfWeek = this.firstDayOfWeek;
             componentRef.instance.selectedDateRange = this.dateRange;
             // Subscribe to events emitted by the CalendarComponent
-            componentRef.instance.dateRangeChange
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((date) => {
+            componentRef.instance.dateRangeChange.pipe(takeUntil(this.destroy$)).subscribe((date) => {
                 this.onDateRangeChange(date);
                 this.closeCalendar();
             });
@@ -1770,7 +2077,7 @@ class DateRangeComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <haloduck-select [multiselect]=\"false\"\n                     [disabled]=\"disabled\"\n                     [options]=\"dateRangeOptions\"\n                     [atLeastOne]=\"true\"\n                     (click)=\"$event.stopPropagation()\"\n                     variant=\"primary\"\n                     placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n                     [(ngModel)]=\"selectedDateRangeOptionId\"\n                     (ngModelChange)=\"onDateRangeOptionChange($event)\">\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-on-control dark:text-dark-on-control': !disabled,\n      'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n      }\"> {{ getSelectedDateRangeString() }}</div>\n    } @else {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-inactive dark:text-dark-inactive': !disabled,\n      'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n         }\"> {{ placeholder }}</div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div\n  #origin\n  class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n  [ngClass]=\"{\n    'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary':\n      !disabled,\n    'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n      disabled,\n  }\"\n  [tabindex]=\"disabled ? -1 : 0\"\n  (click)=\"onClick()\"\n>\n  <div class=\"flex items-center\">\n    <haloduck-select\n      [multiselect]=\"false\"\n      [disabled]=\"disabled\"\n      [options]=\"dateRangeOptions\"\n      [atLeastOne]=\"true\"\n      (click)=\"$event.stopPropagation()\"\n      variant=\"primary\"\n      placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n      [(ngModel)]=\"selectedDateRangeOptionId\"\n      (ngModelChange)=\"onDateRangeOptionChange($event)\"\n    >\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n      <div\n        class=\"flex-1 sm:text-sm/6 text-center\"\n        [ngClass]=\"{\n          'text-light-on-control dark:text-dark-on-control': !disabled,\n          'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n        }\"\n      >\n        {{ getSelectedDateRangeString() }}\n      </div>\n    } @else {\n      <div\n        class=\"flex-1 sm:text-sm/6 text-center\"\n        [ngClass]=\"{\n          'text-light-inactive dark:text-dark-inactive': !disabled,\n          'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n        }\"\n      >\n        {{ placeholder }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "haloduck-select", inputs: ["disabled", "loading", "variant", "asButton", "useIcon", "useFilter", "multiselect", "placeholder", "atLeastOne", "showAll", "showAllItems", "options", "layout", "labelWidth", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
@@ -1781,7 +2088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div #origin\n     class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n     [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary': !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60' : disabled,\n     }\"\n     [tabindex]=\"(disabled) ? -1 : 0\"\n     (click)=\"onClick()\">\n  <div class=\"flex items-center\">\n    <haloduck-select [multiselect]=\"false\"\n                     [disabled]=\"disabled\"\n                     [options]=\"dateRangeOptions\"\n                     [atLeastOne]=\"true\"\n                     (click)=\"$event.stopPropagation()\"\n                     variant=\"primary\"\n                     placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n                     [(ngModel)]=\"selectedDateRangeOptionId\"\n                     (ngModelChange)=\"onDateRangeOptionChange($event)\">\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-on-control dark:text-dark-on-control': !disabled,\n      'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n      }\"> {{ getSelectedDateRangeString() }}</div>\n    } @else {\n    <div class=\"flex-1 sm:text-sm/6 text-center\"\n         [ngClass]=\"{\n      'text-light-inactive dark:text-dark-inactive': !disabled,\n      'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n         }\"> {{ placeholder }}</div>\n    }\n  </div>\n</div>\n" }]
+                    ], template: "<label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n  <ng-content></ng-content>\n</label>\n<div\n  #origin\n  class=\"relative mt-2 gap-2 rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n  [ngClass]=\"{\n    'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary':\n      !disabled,\n    'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n      disabled,\n  }\"\n  [tabindex]=\"disabled ? -1 : 0\"\n  (click)=\"onClick()\"\n>\n  <div class=\"flex items-center\">\n    <haloduck-select\n      [multiselect]=\"false\"\n      [disabled]=\"disabled\"\n      [options]=\"dateRangeOptions\"\n      [atLeastOne]=\"true\"\n      (click)=\"$event.stopPropagation()\"\n      variant=\"primary\"\n      placeholder=\"{{ 'haloduck.ui.calendar.Period' | transloco }}\"\n      [(ngModel)]=\"selectedDateRangeOptionId\"\n      (ngModelChange)=\"onDateRangeOptionChange($event)\"\n    >\n    </haloduck-select>\n    @if (getSelectedDateRangeString()) {\n      <div\n        class=\"flex-1 sm:text-sm/6 text-center\"\n        [ngClass]=\"{\n          'text-light-on-control dark:text-dark-on-control': !disabled,\n          'text-light-on-control/60 dark:text-light-on-control/60': disabled,\n        }\"\n      >\n        {{ getSelectedDateRangeString() }}\n      </div>\n    } @else {\n      <div\n        class=\"flex-1 sm:text-sm/6 text-center\"\n        [ngClass]=\"{\n          'text-light-inactive dark:text-dark-inactive': !disabled,\n          'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n        }\"\n      >\n        {{ placeholder }}\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { dateRangeOptions: [{
                 type: Input
             }], disabled: [{
@@ -1851,18 +2158,14 @@ class DrawCanvasComponent {
         const touch = event.touches[0];
         const rect = this.canvasRef.nativeElement.getBoundingClientRect();
         this.ctx.beginPath();
-        this.ctx.moveTo((touch.clientX - rect.left) *
-            (this.canvasRef.nativeElement.width / rect.width), (touch.clientY - rect.top) *
-            (this.canvasRef.nativeElement.height / rect.height));
+        this.ctx.moveTo((touch.clientX - rect.left) * (this.canvasRef.nativeElement.width / rect.width), (touch.clientY - rect.top) * (this.canvasRef.nativeElement.height / rect.height));
     }
     touchDraw(event) {
         if (!this.isDrawing)
             return;
         const touch = event.touches[0];
         const rect = this.canvasRef.nativeElement.getBoundingClientRect();
-        this.ctx.lineTo((touch.clientX - rect.left) *
-            (this.canvasRef.nativeElement.width / rect.width), (touch.clientY - rect.top) *
-            (this.canvasRef.nativeElement.height / rect.height));
+        this.ctx.lineTo((touch.clientX - rect.left) * (this.canvasRef.nativeElement.width / rect.width), (touch.clientY - rect.top) * (this.canvasRef.nativeElement.height / rect.height));
         this.ctx.stroke();
     }
     stopDrawing() {
@@ -1914,7 +2217,7 @@ class DrawCanvasComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"draw-canvas-container flex flex-col gap-2\">\n  <canvas #canvas width=\"800\" height=\"400\" class=\"max-w-full draw-canvas select-none\"></canvas>\n  <haloduck-button variant=\"danger\" (click)=\"onReset()\">{{ 'haloduck.ui.draw.Clear' | transloco }}</haloduck-button>\n</div>\n", styles: [".draw-canvas-container{display:flex;flex-direction:column;align-items:center}.draw-canvas{border:1px solid #ccc;cursor:crosshair}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+        ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"draw-canvas-container flex flex-col gap-2\">\n  <canvas #canvas width=\"800\" height=\"400\" class=\"max-w-full draw-canvas select-none\"></canvas>\n  <haloduck-button variant=\"danger\" (click)=\"onReset()\">{{\n    'haloduck.ui.draw.Clear' | transloco\n  }}</haloduck-button>\n</div>\n", styles: [".draw-canvas-container{display:flex;flex-direction:column;align-items:center}.draw-canvas{border:1px solid #ccc;cursor:crosshair}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DrawCanvasComponent, decorators: [{
             type: Component,
@@ -1925,7 +2228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], imports: [ButtonComponent, TranslocoModule], template: "<div class=\"draw-canvas-container flex flex-col gap-2\">\n  <canvas #canvas width=\"800\" height=\"400\" class=\"max-w-full draw-canvas select-none\"></canvas>\n  <haloduck-button variant=\"danger\" (click)=\"onReset()\">{{ 'haloduck.ui.draw.Clear' | transloco }}</haloduck-button>\n</div>\n", styles: [".draw-canvas-container{display:flex;flex-direction:column;align-items:center}.draw-canvas{border:1px solid #ccc;cursor:crosshair}\n"] }]
+                    ], imports: [ButtonComponent, TranslocoModule], template: "<div class=\"draw-canvas-container flex flex-col gap-2\">\n  <canvas #canvas width=\"800\" height=\"400\" class=\"max-w-full draw-canvas select-none\"></canvas>\n  <haloduck-button variant=\"danger\" (click)=\"onReset()\">{{\n    'haloduck.ui.draw.Clear' | transloco\n  }}</haloduck-button>\n</div>\n", styles: [".draw-canvas-container{display:flex;flex-direction:column;align-items:center}.draw-canvas{border:1px solid #ccc;cursor:crosshair}\n"] }]
         }], propDecorators: { imagePath: [{
                 type: Input
             }], lineColor: [{
@@ -1973,9 +2276,7 @@ class FileUploaderComponent {
     onFileSelected(event) {
         const input = event.target;
         if (input.files) {
-            const selectedFiles = this.multiple
-                ? Array.from(input.files)
-                : [input.files[0]];
+            const selectedFiles = this.multiple ? Array.from(input.files) : [input.files[0]];
             this.addFiles(selectedFiles);
         }
         this.onTouched();
@@ -2021,8 +2322,7 @@ class FileUploaderComponent {
             }
             return acceptableFileType && acceptableFileSize;
         });
-        if (this.maxCount > 0 &&
-            this.files.length + filteredFiles.length > this.maxCount) {
+        if (this.maxCount > 0 && this.files.length + filteredFiles.length > this.maxCount) {
             for (let i = this.maxCount; i < this.files.length + filteredFiles.length; i++) {
                 notAcceptedFiles.push({
                     error: ERROR_OVER_COUNT,
@@ -2103,7 +2403,7 @@ class FileUploaderComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], ngImport: i0, template: "<div class=\"p-4 border border-light-inactive dark:border-dark-inactive rounded-md\"\n     [class.drag-over]=\"isDragOver\"\n     (dragover)=\"onDragOver($event)\"\n     (dragleave)=\"onDragLeave($event)\"\n     (drop)=\"onDrop($event)\">\n  @if (!isUploading) {\n  <label for=\"file-upload\"\n         class=\"flex flex-col items-center justify-center w-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md cursor-pointer hover:border-light-secondary dark:border-dark-secondary p-4\">\n    <span class=\"text-light-inactive dark:text-dark-inactive\">{{ 'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco }}</span>\n    <input id=\"file-upload\"\n           type=\"file\"\n           class=\"hidden\"\n           [attr.accept]=\"accept ? accept.join(',') : null\"\n           [attr.multiple]=\"multiple ? '' : null\"\n           (cancel)=\"$event.stopPropagation()\"\n           (change)=\"onFileSelected($event)\" />\n  </label>\n  }\n  <!-- Display file list -->\n  @if (files.length > 0) {\n  <ul class=\"mt-4 space-y-2\">\n    @for (file of files; track file.name; let i = $index) {\n    <li class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\">\n      <!-- Check if the file is an image -->\n      <div class=\"flex items-center space-x-4\">\n        @if (file.previewUrl){\n        <img [src]=\"file.previewUrl\"\n             alt=\"{{ file.name }}\"\n             class=\"w-12 h-12 object-cover rounded-md\" />\n        }\n        <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n      </div>\n      @if (isUploading) {\n      @if (file.isUploaded) {\n      <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{ 'haloduck.ui.file.Uploaded' | transloco }}</span>\n      }@else{\n      <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{ 'haloduck.ui.file.Uploading...' | transloco }}</span>\n      }\n      }@else{\n      <button type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\">\n        {{ 'haloduck.ui.file.Remove' | transloco }}\n      </button>\n      }\n    </li>\n    }\n  </ul>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+        ], ngImport: i0, template: "<div\n  class=\"p-4 border border-light-inactive dark:border-dark-inactive rounded-md\"\n  [class.drag-over]=\"isDragOver\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  @if (!isUploading) {\n    <label\n      for=\"file-upload\"\n      class=\"flex flex-col items-center justify-center w-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md cursor-pointer hover:border-light-secondary dark:border-dark-secondary p-4\"\n    >\n      <span class=\"text-light-inactive dark:text-dark-inactive\">{{\n        'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco\n      }}</span>\n      <input\n        id=\"file-upload\"\n        type=\"file\"\n        class=\"hidden\"\n        [attr.accept]=\"accept ? accept.join(',') : null\"\n        [attr.multiple]=\"multiple ? '' : null\"\n        (cancel)=\"$event.stopPropagation()\"\n        (change)=\"onFileSelected($event)\"\n      />\n    </label>\n  }\n  <!-- Display file list -->\n  @if (files.length > 0) {\n    <ul class=\"mt-4 space-y-2\">\n      @for (file of files; track file.name; let i = $index) {\n        <li\n          class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n        >\n          <!-- Check if the file is an image -->\n          <div class=\"flex items-center space-x-4\">\n            @if (file.previewUrl) {\n              <img\n                [src]=\"file.previewUrl\"\n                alt=\"{{ file.name }}\"\n                class=\"w-12 h-12 object-cover rounded-md\"\n              />\n            }\n            <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n          </div>\n          @if (isUploading) {\n            @if (file.isUploaded) {\n              <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{\n                'haloduck.ui.file.Uploaded' | transloco\n              }}</span>\n            } @else {\n              <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{\n                'haloduck.ui.file.Uploading...' | transloco\n              }}</span>\n            }\n          } @else {\n            <button\n              type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\"\n            >\n              {{ 'haloduck.ui.file.Remove' | transloco }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
@@ -2114,7 +2414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"p-4 border border-light-inactive dark:border-dark-inactive rounded-md\"\n     [class.drag-over]=\"isDragOver\"\n     (dragover)=\"onDragOver($event)\"\n     (dragleave)=\"onDragLeave($event)\"\n     (drop)=\"onDrop($event)\">\n  @if (!isUploading) {\n  <label for=\"file-upload\"\n         class=\"flex flex-col items-center justify-center w-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md cursor-pointer hover:border-light-secondary dark:border-dark-secondary p-4\">\n    <span class=\"text-light-inactive dark:text-dark-inactive\">{{ 'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco }}</span>\n    <input id=\"file-upload\"\n           type=\"file\"\n           class=\"hidden\"\n           [attr.accept]=\"accept ? accept.join(',') : null\"\n           [attr.multiple]=\"multiple ? '' : null\"\n           (cancel)=\"$event.stopPropagation()\"\n           (change)=\"onFileSelected($event)\" />\n  </label>\n  }\n  <!-- Display file list -->\n  @if (files.length > 0) {\n  <ul class=\"mt-4 space-y-2\">\n    @for (file of files; track file.name; let i = $index) {\n    <li class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\">\n      <!-- Check if the file is an image -->\n      <div class=\"flex items-center space-x-4\">\n        @if (file.previewUrl){\n        <img [src]=\"file.previewUrl\"\n             alt=\"{{ file.name }}\"\n             class=\"w-12 h-12 object-cover rounded-md\" />\n        }\n        <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n      </div>\n      @if (isUploading) {\n      @if (file.isUploaded) {\n      <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{ 'haloduck.ui.file.Uploaded' | transloco }}</span>\n      }@else{\n      <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{ 'haloduck.ui.file.Uploading...' | transloco }}</span>\n      }\n      }@else{\n      <button type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\">\n        {{ 'haloduck.ui.file.Remove' | transloco }}\n      </button>\n      }\n    </li>\n    }\n  </ul>\n  }\n</div>\n" }]
+                    ], template: "<div\n  class=\"p-4 border border-light-inactive dark:border-dark-inactive rounded-md\"\n  [class.drag-over]=\"isDragOver\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  @if (!isUploading) {\n    <label\n      for=\"file-upload\"\n      class=\"flex flex-col items-center justify-center w-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md cursor-pointer hover:border-light-secondary dark:border-dark-secondary p-4\"\n    >\n      <span class=\"text-light-inactive dark:text-dark-inactive\">{{\n        'haloduck.ui.file.Drag and drop files here, or click to select files' | transloco\n      }}</span>\n      <input\n        id=\"file-upload\"\n        type=\"file\"\n        class=\"hidden\"\n        [attr.accept]=\"accept ? accept.join(',') : null\"\n        [attr.multiple]=\"multiple ? '' : null\"\n        (cancel)=\"$event.stopPropagation()\"\n        (change)=\"onFileSelected($event)\"\n      />\n    </label>\n  }\n  <!-- Display file list -->\n  @if (files.length > 0) {\n    <ul class=\"mt-4 space-y-2\">\n      @for (file of files; track file.name; let i = $index) {\n        <li\n          class=\"flex items-center justify-between p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n        >\n          <!-- Check if the file is an image -->\n          <div class=\"flex items-center space-x-4\">\n            @if (file.previewUrl) {\n              <img\n                [src]=\"file.previewUrl\"\n                alt=\"{{ file.name }}\"\n                class=\"w-12 h-12 object-cover rounded-md\"\n              />\n            }\n            <span class=\"text-sm text-light-inactive dark:text-dark-inactive\">{{ file.name }}</span>\n          </div>\n          @if (isUploading) {\n            @if (file.isUploaded) {\n              <span class=\"text-sm text-light-secondary dark:text-dark-secondary\">{{\n                'haloduck.ui.file.Uploaded' | transloco\n              }}</span>\n            } @else {\n              <span class=\"text-sm text-light-primary dark:text-dark-primary\">{{\n                'haloduck.ui.file.Uploading...' | transloco\n              }}</span>\n            }\n          } @else {\n            <button\n              type=\"button\"\n              class=\"text-light-danger dark:text-dark-danger hover:brightness-125\"\n              (click)=\"removeFile(i)\"\n            >\n              {{ 'haloduck.ui.file.Remove' | transloco }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], urlPrefix: [{
@@ -2149,11 +2449,11 @@ class FlipComponent {
         this._isOpen.set(!this._isOpen());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FlipComponent, isStandalone: true, selector: "haloduck-flip", inputs: { title: "title", isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n     [class.cursor-pointer]=\"!_isOpen()\"\n     (click)=\"!_isOpen() && toggle()\">\n  <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\" [class.cursor-pointer]=\"!_isOpen()\">{{ title }}</label>\n  @if(_isOpen()) {\n  <ng-content></ng-content>\n  }\n  <button variant=\"secondary\"\n          class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n          (click)=\"toggle(); $event.stopPropagation()\">\n    @if(_isOpen()) {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M18 15l-6-6-6 6\" />\n    </svg>\n    }\n    @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M6 9l6 6 6-6\" />\n    </svg>\n    }\n  </button>\n</div>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FlipComponent, isStandalone: true, selector: "haloduck-flip", inputs: { title: "title", isOpen: "isOpen" }, ngImport: i0, template: "<div\n  class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n  [class.cursor-pointer]=\"!_isOpen()\"\n  (click)=\"!_isOpen() && toggle()\"\n>\n  <label\n    class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\"\n    [class.cursor-pointer]=\"!_isOpen()\"\n    >{{ title }}</label\n  >\n  @if (_isOpen()) {\n    <ng-content></ng-content>\n  }\n  <button\n    variant=\"secondary\"\n    class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n    (click)=\"toggle(); $event.stopPropagation()\"\n  >\n    @if (_isOpen()) {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"h-4 w-4\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 15l-6-6-6 6\" />\n      </svg>\n    } @else {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"h-4 w-4\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 9l6 6 6-6\" />\n      </svg>\n    }\n  </button>\n</div>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-flip', imports: [], template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n     [class.cursor-pointer]=\"!_isOpen()\"\n     (click)=\"!_isOpen() && toggle()\">\n  <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\" [class.cursor-pointer]=\"!_isOpen()\">{{ title }}</label>\n  @if(_isOpen()) {\n  <ng-content></ng-content>\n  }\n  <button variant=\"secondary\"\n          class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n          (click)=\"toggle(); $event.stopPropagation()\">\n    @if(_isOpen()) {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M18 15l-6-6-6 6\" />\n    </svg>\n    }\n    @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\"\n         class=\"h-4 w-4\"\n         fill=\"none\"\n         viewBox=\"0 0 24 24\"\n         stroke=\"currentColor\">\n      <path stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M6 9l6 6 6-6\" />\n    </svg>\n    }\n  </button>\n</div>\n" }]
+            args: [{ selector: 'haloduck-flip', imports: [], template: "<div\n  class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n  [class.cursor-pointer]=\"!_isOpen()\"\n  (click)=\"!_isOpen() && toggle()\"\n>\n  <label\n    class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\"\n    [class.cursor-pointer]=\"!_isOpen()\"\n    >{{ title }}</label\n  >\n  @if (_isOpen()) {\n    <ng-content></ng-content>\n  }\n  <button\n    variant=\"secondary\"\n    class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n    (click)=\"toggle(); $event.stopPropagation()\"\n  >\n    @if (_isOpen()) {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"h-4 w-4\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 15l-6-6-6 6\" />\n      </svg>\n    } @else {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"h-4 w-4\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 9l6 6 6-6\" />\n      </svg>\n    }\n  </button>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], isOpen: [{
@@ -2171,11 +2471,11 @@ class ImageViewerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ImageViewerComponent, isStandalone: true, selector: "haloduck-image-viewer", inputs: { context: "context", imageUrl: "imageUrl", imageAlt: "imageAlt" }, ngImport: i0, template: "<img class=\"max-w-full max-h-full object-cover cursor-pointer\"\n     [src]=\"context?.imageUrl\"\n     [alt]=\"context?.imageAlt\"\n     (click)=\"onClose()\" />", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ImageViewerComponent, isStandalone: true, selector: "haloduck-image-viewer", inputs: { context: "context", imageUrl: "imageUrl", imageAlt: "imageAlt" }, ngImport: i0, template: "<img\n  class=\"max-w-full max-h-full object-cover cursor-pointer\"\n  [src]=\"context?.imageUrl\"\n  [alt]=\"context?.imageAlt\"\n  (click)=\"onClose()\"\n/>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImageViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-image-viewer', imports: [], template: "<img class=\"max-w-full max-h-full object-cover cursor-pointer\"\n     [src]=\"context?.imageUrl\"\n     [alt]=\"context?.imageAlt\"\n     (click)=\"onClose()\" />" }]
+            args: [{ selector: 'haloduck-image-viewer', imports: [], template: "<img\n  class=\"max-w-full max-h-full object-cover cursor-pointer\"\n  [src]=\"context?.imageUrl\"\n  [alt]=\"context?.imageAlt\"\n  (click)=\"onClose()\"\n/>\n" }]
         }], propDecorators: { context: [{
                 type: Input
             }], imageUrl: [{
@@ -2340,7 +2640,7 @@ class ImageUploaderComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-1\">\n    <label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n        <ng-content></ng-content>\n    </label>\n    <div class=\"h-full w-full p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n         [class.drag-over]=\"isDragOver\"\n         (dragstart)=\"onDragStart($event)\"\n         (dragend)=\"onDragEnd($event)\"\n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\"\n         (drop)=\"onDrop($event)\">\n        <!-- Show image preview if available -->\n        @if (imageUrl) {\n        @if (!disabled) {\n        <div class=\"relative\">\n            <button type=\"button\"\n                    class=\"absolute -top-1 -right-1 bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger rounded-full px-1 text-xs\"\n                    (click)=\"removeImage()\">\n                x\n            </button>\n        </div>\n        }\n        <img [src]=\"imageUrl\"\n             [id]=\"id + '-image'\"\n             [alt]=\"alt || ''\"\n             class=\"w-full h-full rounded-md aspect-square\"\n             [ngClass]=\"{\n                 'filter grayscale': disabled,\n             }\"\n             (click)=\"previewImage(imageUrl)\" />\n        } @else {\n        <!-- Show upload area -->\n        <label for=\"{{id + '-input'}}\"\n               class=\"flex flex-col items-center justify-center w-full h-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md\"\n               [ngClass]=\"{'cursor-pointer hover:border-light-primary dark:hover:border-dark-primary': !disabled}\">\n            @if (backgroundImage) {\n            <img [src]=\"backgroundImage\"\n                 [alt]=\"alt || ''\"\n                 class=\"w-full h-full rounded-md aspect-square\" />\n            }@else {\n            <span class=\"text-light-inactive dark:text-dark-inactive text-sm p-2\">{{ 'haloduck.ui.file.Drag and drop an image here, or click to select' | transloco }}</span>\n            }\n\n            @if(!disabled){\n            <input [id]=\"id + '-input'\"\n                   type=\"file\"\n                   class=\"hidden\"\n                   accept=\"image/*\"\n                   [multiple]=\"passToSibling\"\n                   (cancel)=\"$event.stopPropagation()\"\n                   (change)=\"onFileSelected($event)\" />\n            }\n        </label>\n        }\n    </div>\n</div>\n", styles: [".drag-over{border-color:#3b82f6}.relative{position:relative}button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-1\">\n  <label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n    <ng-content></ng-content>\n  </label>\n  <div\n    class=\"h-full w-full p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n    [class.drag-over]=\"isDragOver\"\n    (dragstart)=\"onDragStart($event)\"\n    (dragend)=\"onDragEnd($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <!-- Show image preview if available -->\n    @if (imageUrl) {\n      @if (!disabled) {\n        <div class=\"relative\">\n          <button\n            type=\"button\"\n            class=\"absolute -top-1 -right-1 bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger rounded-full px-1 text-xs\"\n            (click)=\"removeImage()\"\n          >\n            x\n          </button>\n        </div>\n      }\n      <img\n        [src]=\"imageUrl\"\n        [id]=\"id + '-image'\"\n        [alt]=\"alt || ''\"\n        class=\"w-full h-full rounded-md aspect-square\"\n        [ngClass]=\"{\n          'filter grayscale': disabled,\n        }\"\n        (click)=\"previewImage(imageUrl)\"\n      />\n    } @else {\n      <!-- Show upload area -->\n      <label\n        for=\"{{ id + '-input' }}\"\n        class=\"flex flex-col items-center justify-center w-full h-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md\"\n        [ngClass]=\"{\n          'cursor-pointer hover:border-light-primary dark:hover:border-dark-primary': !disabled,\n        }\"\n      >\n        @if (backgroundImage) {\n          <img\n            [src]=\"backgroundImage\"\n            [alt]=\"alt || ''\"\n            class=\"w-full h-full rounded-md aspect-square\"\n          />\n        } @else {\n          <span class=\"text-light-inactive dark:text-dark-inactive text-sm p-2\">{{\n            'haloduck.ui.file.Drag and drop an image here, or click to select' | transloco\n          }}</span>\n        }\n\n        @if (!disabled) {\n          <input\n            [id]=\"id + '-input'\"\n            type=\"file\"\n            class=\"hidden\"\n            accept=\"image/*\"\n            [multiple]=\"passToSibling\"\n            (cancel)=\"$event.stopPropagation()\"\n            (change)=\"onFileSelected($event)\"\n          />\n        }\n      </label>\n    }\n  </div>\n</div>\n", styles: [".drag-over{border-color:#3b82f6}.relative{position:relative}button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImageUploaderComponent, decorators: [{
             type: Component,
@@ -2351,7 +2651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"w-full h-full flex flex-col gap-1\">\n    <label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n        <ng-content></ng-content>\n    </label>\n    <div class=\"h-full w-full p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n         [class.drag-over]=\"isDragOver\"\n         (dragstart)=\"onDragStart($event)\"\n         (dragend)=\"onDragEnd($event)\"\n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\"\n         (drop)=\"onDrop($event)\">\n        <!-- Show image preview if available -->\n        @if (imageUrl) {\n        @if (!disabled) {\n        <div class=\"relative\">\n            <button type=\"button\"\n                    class=\"absolute -top-1 -right-1 bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger rounded-full px-1 text-xs\"\n                    (click)=\"removeImage()\">\n                x\n            </button>\n        </div>\n        }\n        <img [src]=\"imageUrl\"\n             [id]=\"id + '-image'\"\n             [alt]=\"alt || ''\"\n             class=\"w-full h-full rounded-md aspect-square\"\n             [ngClass]=\"{\n                 'filter grayscale': disabled,\n             }\"\n             (click)=\"previewImage(imageUrl)\" />\n        } @else {\n        <!-- Show upload area -->\n        <label for=\"{{id + '-input'}}\"\n               class=\"flex flex-col items-center justify-center w-full h-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md\"\n               [ngClass]=\"{'cursor-pointer hover:border-light-primary dark:hover:border-dark-primary': !disabled}\">\n            @if (backgroundImage) {\n            <img [src]=\"backgroundImage\"\n                 [alt]=\"alt || ''\"\n                 class=\"w-full h-full rounded-md aspect-square\" />\n            }@else {\n            <span class=\"text-light-inactive dark:text-dark-inactive text-sm p-2\">{{ 'haloduck.ui.file.Drag and drop an image here, or click to select' | transloco }}</span>\n            }\n\n            @if(!disabled){\n            <input [id]=\"id + '-input'\"\n                   type=\"file\"\n                   class=\"hidden\"\n                   accept=\"image/*\"\n                   [multiple]=\"passToSibling\"\n                   (cancel)=\"$event.stopPropagation()\"\n                   (change)=\"onFileSelected($event)\" />\n            }\n        </label>\n        }\n    </div>\n</div>\n", styles: [".drag-over{border-color:#3b82f6}.relative{position:relative}button{cursor:pointer}\n"] }]
+                    ], template: "<div class=\"w-full h-full flex flex-col gap-1\">\n  <label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control\">\n    <ng-content></ng-content>\n  </label>\n  <div\n    class=\"h-full w-full p-2 border border-light-inactive dark:border-dark-inactive rounded-md\"\n    [class.drag-over]=\"isDragOver\"\n    (dragstart)=\"onDragStart($event)\"\n    (dragend)=\"onDragEnd($event)\"\n    (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\"\n    (drop)=\"onDrop($event)\"\n  >\n    <!-- Show image preview if available -->\n    @if (imageUrl) {\n      @if (!disabled) {\n        <div class=\"relative\">\n          <button\n            type=\"button\"\n            class=\"absolute -top-1 -right-1 bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger rounded-full px-1 text-xs\"\n            (click)=\"removeImage()\"\n          >\n            x\n          </button>\n        </div>\n      }\n      <img\n        [src]=\"imageUrl\"\n        [id]=\"id + '-image'\"\n        [alt]=\"alt || ''\"\n        class=\"w-full h-full rounded-md aspect-square\"\n        [ngClass]=\"{\n          'filter grayscale': disabled,\n        }\"\n        (click)=\"previewImage(imageUrl)\"\n      />\n    } @else {\n      <!-- Show upload area -->\n      <label\n        for=\"{{ id + '-input' }}\"\n        class=\"flex flex-col items-center justify-center w-full h-full border-2 border-dashed border-light-inactive dark:border-dark-inactive rounded-md\"\n        [ngClass]=\"{\n          'cursor-pointer hover:border-light-primary dark:hover:border-dark-primary': !disabled,\n        }\"\n      >\n        @if (backgroundImage) {\n          <img\n            [src]=\"backgroundImage\"\n            [alt]=\"alt || ''\"\n            class=\"w-full h-full rounded-md aspect-square\"\n          />\n        } @else {\n          <span class=\"text-light-inactive dark:text-dark-inactive text-sm p-2\">{{\n            'haloduck.ui.file.Drag and drop an image here, or click to select' | transloco\n          }}</span>\n        }\n\n        @if (!disabled) {\n          <input\n            [id]=\"id + '-input'\"\n            type=\"file\"\n            class=\"hidden\"\n            accept=\"image/*\"\n            [multiple]=\"passToSibling\"\n            (cancel)=\"$event.stopPropagation()\"\n            (change)=\"onFileSelected($event)\"\n          />\n        }\n      </label>\n    }\n  </div>\n</div>\n", styles: [".drag-over{border-color:#3b82f6}.relative{position:relative}button{cursor:pointer}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], id: [{
@@ -2385,11 +2685,11 @@ class LanguageSelectorOptionComponent {
         this.languageSelected.emit(language);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LanguageSelectorOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: LanguageSelectorOptionComponent, isStandalone: true, selector: "haloduck-language-selector-option", outputs: { languageSelected: "languageSelected" }, providers: [TranslocoService], ngImport: i0, template: "<div class=\"right-0 z-10 mt-2.5 origin-top-right rounded-md bg-light-background dark:bg-dark-background py-2 shadow-lg ring-1 ring-light-inactive dark:ring-dark-inactive\"\n     role=\"menu\"\n     aria-orientation=\"vertical\"\n     aria-labelledby=\"user-menu-button\"\n     tabindex=\"0\">\n  @for (language of translateService.getAvailableLangs(); track language) {\n  <a href=\"javascript:void(0)\"\n     class=\"px-3 py-2 flex items-center flex-nowrap gap-2\"\n     role=\"menuitem\"\n     tabindex=\"-1\"\n     id=\"language-item-{{language}}\"\n     (click)=\"selectLanguage(language)\">\n    <img class=\"w-6 h-6\"\n         [src]=\"'i18n/icons/' + language + '.png'\">\n  </a>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: LanguageSelectorOptionComponent, isStandalone: true, selector: "haloduck-language-selector-option", outputs: { languageSelected: "languageSelected" }, providers: [TranslocoService], ngImport: i0, template: "<div\n  class=\"right-0 z-10 mt-2.5 origin-top-right rounded-md bg-light-background dark:bg-dark-background py-2 shadow-lg ring-1 ring-light-inactive dark:ring-dark-inactive\"\n  role=\"menu\"\n  aria-orientation=\"vertical\"\n  aria-labelledby=\"user-menu-button\"\n  tabindex=\"0\"\n>\n  @for (language of translateService.getAvailableLangs(); track language) {\n    <a\n      href=\"javascript:void(0)\"\n      class=\"px-3 py-2 flex items-center flex-nowrap gap-2\"\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      id=\"language-item-{{ language }}\"\n      (click)=\"selectLanguage(language)\"\n    >\n      <img class=\"w-6 h-6\" [src]=\"'i18n/icons/' + language + '.png'\" />\n    </a>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LanguageSelectorOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-language-selector-option', imports: [CommonModule], providers: [TranslocoService], template: "<div class=\"right-0 z-10 mt-2.5 origin-top-right rounded-md bg-light-background dark:bg-dark-background py-2 shadow-lg ring-1 ring-light-inactive dark:ring-dark-inactive\"\n     role=\"menu\"\n     aria-orientation=\"vertical\"\n     aria-labelledby=\"user-menu-button\"\n     tabindex=\"0\">\n  @for (language of translateService.getAvailableLangs(); track language) {\n  <a href=\"javascript:void(0)\"\n     class=\"px-3 py-2 flex items-center flex-nowrap gap-2\"\n     role=\"menuitem\"\n     tabindex=\"-1\"\n     id=\"language-item-{{language}}\"\n     (click)=\"selectLanguage(language)\">\n    <img class=\"w-6 h-6\"\n         [src]=\"'i18n/icons/' + language + '.png'\">\n  </a>\n  }\n</div>\n" }]
+            args: [{ selector: 'haloduck-language-selector-option', imports: [CommonModule], providers: [TranslocoService], template: "<div\n  class=\"right-0 z-10 mt-2.5 origin-top-right rounded-md bg-light-background dark:bg-dark-background py-2 shadow-lg ring-1 ring-light-inactive dark:ring-dark-inactive\"\n  role=\"menu\"\n  aria-orientation=\"vertical\"\n  aria-labelledby=\"user-menu-button\"\n  tabindex=\"0\"\n>\n  @for (language of translateService.getAvailableLangs(); track language) {\n    <a\n      href=\"javascript:void(0)\"\n      class=\"px-3 py-2 flex items-center flex-nowrap gap-2\"\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      id=\"language-item-{{ language }}\"\n      (click)=\"selectLanguage(language)\"\n    >\n      <img class=\"w-6 h-6\" [src]=\"'i18n/icons/' + language + '.png'\" />\n    </a>\n  }\n</div>\n" }]
         }], propDecorators: { languageSelected: [{
                 type: Output
             }] } });
@@ -2461,11 +2761,11 @@ class LanguageSelectorComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: LanguageSelectorComponent, isStandalone: true, selector: "haloduck-language-selector", viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<button #origin\n        type=\"button\"\n        (click)=\"showLanguageOptions()\"\n        class=\"-m-1.5 flex items-center p-1.5 hover:cursor-pointer\"\n        aria-expanded=\"false\"\n        aria-haspopup=\"true\">\n  <span class=\"max-lg:hidden flex lg:items-center\">\n    <img class=\"w-6 h-6\"\n         [src]=\"'i18n/icons/' + language() + '.png'\">\n  </span>\n</button>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: LanguageSelectorComponent, isStandalone: true, selector: "haloduck-language-selector", viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<button\n  #origin\n  type=\"button\"\n  (click)=\"showLanguageOptions()\"\n  class=\"-m-1.5 flex items-center p-1.5 hover:cursor-pointer\"\n  aria-expanded=\"false\"\n  aria-haspopup=\"true\"\n>\n  <span class=\"max-lg:hidden flex lg:items-center\">\n    <img class=\"w-6 h-6\" [src]=\"'i18n/icons/' + language() + '.png'\" />\n  </span>\n</button>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-language-selector', imports: [], template: "<button #origin\n        type=\"button\"\n        (click)=\"showLanguageOptions()\"\n        class=\"-m-1.5 flex items-center p-1.5 hover:cursor-pointer\"\n        aria-expanded=\"false\"\n        aria-haspopup=\"true\">\n  <span class=\"max-lg:hidden flex lg:items-center\">\n    <img class=\"w-6 h-6\"\n         [src]=\"'i18n/icons/' + language() + '.png'\">\n  </span>\n</button>\n" }]
+            args: [{ selector: 'haloduck-language-selector', imports: [], template: "<button\n  #origin\n  type=\"button\"\n  (click)=\"showLanguageOptions()\"\n  class=\"-m-1.5 flex items-center p-1.5 hover:cursor-pointer\"\n  aria-expanded=\"false\"\n  aria-haspopup=\"true\"\n>\n  <span class=\"max-lg:hidden flex lg:items-center\">\n    <img class=\"w-6 h-6\" [src]=\"'i18n/icons/' + language() + '.png'\" />\n  </span>\n</button>\n" }]
         }], propDecorators: { origin: [{
                 type: ViewChild,
                 args: ['origin', { static: false }]
@@ -2539,8 +2839,7 @@ class MapToAddressComponent {
     }
     initMap() {
         if (this.currentLngLat) {
-            isDevMode() &&
-                console.log('Using provided location:', this.currentLngLat);
+            isDevMode() && console.log('Using provided location:', this.currentLngLat);
             this.initializeMap(this.currentLngLat);
         }
         else {
@@ -2549,16 +2848,14 @@ class MapToAddressComponent {
                     lat: position.coords.latitude,
                     lng: position.coords.longitude,
                 };
-                isDevMode() &&
-                    console.log('Using current location:', currentLocation);
+                isDevMode() && console.log('Using current location:', currentLocation);
                 this.initializeMap(currentLocation);
             }, (error) => {
                 if (error.code === error.PERMISSION_DENIED) {
                     isDevMode() &&
                         console.log('Location permission denied. Using default location.:', this.defaultLngLat);
                 }
-                else if (error.code === error.POSITION_UNAVAILABLE ||
-                    error.code === error.TIMEOUT) {
+                else if (error.code === error.POSITION_UNAVAILABLE || error.code === error.TIMEOUT) {
                     isDevMode() &&
                         console.log('Unable to determine location. Using default location.:', this.defaultLngLat);
                 }
@@ -2596,14 +2893,12 @@ class MapToAddressComponent {
             // Explicitly update marker position
             this.marker.position = event.latLng;
             this.marker.map = this.map; // Ensure marker is attached to the map
-            isDevMode() &&
-                console.log('Marker position updated to:', event.latLng.toJSON());
+            isDevMode() && console.log('Marker position updated to:', event.latLng.toJSON());
             this.getAddress(); // Fetch address immediately after click
             this.onTouched(); // Mark as touched
         }
         else {
-            isDevMode() &&
-                console.error('Failed to update marker position: event.latLng is undefined');
+            isDevMode() && console.error('Failed to update marker position: event.latLng is undefined');
         }
     }
     setMapToAddress() {
@@ -2701,7 +2996,7 @@ class MapToAddressComponent {
                 useExisting: MapToAddressComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  @if(!isGoogleLoaded && !loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\">\n    <div class=\"text-center\">\n      <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2\"></div>\n      <p class=\"text-gray-600 text-sm\">\uC9C0\uB3C4\uB97C \uB85C\uB529 \uC911\uC785\uB2C8\uB2E4...</p>\n    </div>\n  </div>\n  }\n\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  @if(loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\">\n    <div class=\"text-center p-4\">\n      <div class=\"text-red-500 text-2xl mb-2\">\u26A0\uFE0F</div>\n      <p class=\"text-red-700 text-sm font-medium\">{{ loadError }}</p>\n      <p class=\"text-red-600 text-xs mt-1\">Please check your internet connection and refresh the page.</p>\n    </div>\n  </div>\n  }\n\n  <div id=\"map\"\n       class=\"w-full h-full\"></div>\n</div>\n", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  @if (!isGoogleLoaded && !loadError) {\n    <div class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\">\n      <div class=\"text-center\">\n        <div\n          class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2\"\n        ></div>\n        <p class=\"text-gray-600 text-sm\">\uC9C0\uB3C4\uB97C \uB85C\uB529 \uC911\uC785\uB2C8\uB2E4...</p>\n      </div>\n    </div>\n  }\n\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  @if (loadError) {\n    <div class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\">\n      <div class=\"text-center p-4\">\n        <div class=\"text-red-500 text-2xl mb-2\">\u26A0\uFE0F</div>\n        <p class=\"text-red-700 text-sm font-medium\">{{ loadError }}</p>\n        <p class=\"text-red-600 text-xs mt-1\">\n          Please check your internet connection and refresh the page.\n        </p>\n      </div>\n    </div>\n  }\n\n  <div id=\"map\" class=\"w-full h-full\"></div>\n</div>\n", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MapToAddressComponent, decorators: [{
             type: Component,
@@ -2711,7 +3006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             useExisting: MapToAddressComponent,
                             multi: true,
                         },
-                    ], template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  @if(!isGoogleLoaded && !loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\">\n    <div class=\"text-center\">\n      <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2\"></div>\n      <p class=\"text-gray-600 text-sm\">\uC9C0\uB3C4\uB97C \uB85C\uB529 \uC911\uC785\uB2C8\uB2E4...</p>\n    </div>\n  </div>\n  }\n\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  @if(loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\">\n    <div class=\"text-center p-4\">\n      <div class=\"text-red-500 text-2xl mb-2\">\u26A0\uFE0F</div>\n      <p class=\"text-red-700 text-sm font-medium\">{{ loadError }}</p>\n      <p class=\"text-red-600 text-xs mt-1\">Please check your internet connection and refresh the page.</p>\n    </div>\n  </div>\n  }\n\n  <div id=\"map\"\n       class=\"w-full h-full\"></div>\n</div>\n", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"] }]
+                    ], template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  @if (!isGoogleLoaded && !loadError) {\n    <div class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\">\n      <div class=\"text-center\">\n        <div\n          class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2\"\n        ></div>\n        <p class=\"text-gray-600 text-sm\">\uC9C0\uB3C4\uB97C \uB85C\uB529 \uC911\uC785\uB2C8\uB2E4...</p>\n      </div>\n    </div>\n  }\n\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  @if (loadError) {\n    <div class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\">\n      <div class=\"text-center p-4\">\n        <div class=\"text-red-500 text-2xl mb-2\">\u26A0\uFE0F</div>\n        <p class=\"text-red-700 text-sm font-medium\">{{ loadError }}</p>\n        <p class=\"text-red-600 text-xs mt-1\">\n          Please check your internet connection and refresh the page.\n        </p>\n      </div>\n    </div>\n  }\n\n  <div id=\"map\" class=\"w-full h-full\"></div>\n</div>\n", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], language: [{
@@ -2737,9 +3032,11 @@ class SideMenuItemComponent {
     ngOnInit() {
         if (this.menuItem.iconType === 'svg') {
             fetch(this.menuItem.icon || '')
-                .then(response => { return response.ok ? response : Promise.reject(response); })
-                .then(response => response.text())
-                .then(svg => this.iconSvg = this.sanitizer.bypassSecurityTrustHtml(svg));
+                .then((response) => {
+                return response.ok ? response : Promise.reject(response);
+            })
+                .then((response) => response.text())
+                .then((svg) => (this.iconSvg = this.sanitizer.bypassSecurityTrustHtml(svg)));
         }
     }
     onMenuItemSelected(menuItem) {
@@ -2754,11 +3051,11 @@ class SideMenuItemComponent {
         this.router.navigate(link);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuItemComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SideMenuItemComponent, isStandalone: true, selector: "haloduck-side-menu-item", inputs: { menuItem: "menuItem", depth: "depth", menuItemSelectHandler: "menuItemSelectHandler" }, ngImport: i0, template: "<a href=\"javascript:void(0)\"\n   (click)=\"onMenuItemSelected(menuItem)\"\n   class=\"flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:text-light-on-primary dark:hover:text-dark-on-primary hover:bg-light-primary dark:hover:bg-dark-primary hover:cursor-pointer\"\n   [ngClass]=\"{\n      'font-bold text-light-on-secondary dark:bg-dark-on-secondary bg-light-secondary dark:bg-dark-secondary': menuItem.isSelected,\n     }\">\n  @if (menuItem.iconType === 'svg') {\n  <div [innerHTML]=\"iconSvg\"></div>\n  } @else {\n  @if (menuItem.icon) {\n  <img class=\"w-5 h-5\"\n       [src]=\"menuItem.icon\"\n       [alt]=\"menuItem.title\"\n       [title]=\"menuItem.title\"\n       [loading]=\"'lazy'\" />\n  }\n  }\n  <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n        title=\"{{ menuItem.title }}\"\n        [ngStyle]=\"{'margin-left.px': depth ? depth * 16 : 0}\">\n    {{ menuItem.title }}\n  </span>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SideMenuItemComponent, isStandalone: true, selector: "haloduck-side-menu-item", inputs: { menuItem: "menuItem", depth: "depth", menuItemSelectHandler: "menuItemSelectHandler" }, ngImport: i0, template: "<a\n  href=\"javascript:void(0)\"\n  (click)=\"onMenuItemSelected(menuItem)\"\n  class=\"flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:text-light-on-primary dark:hover:text-dark-on-primary hover:bg-light-primary dark:hover:bg-dark-primary hover:cursor-pointer\"\n  [ngClass]=\"{\n    'font-bold text-light-on-secondary dark:bg-dark-on-secondary bg-light-secondary dark:bg-dark-secondary':\n      menuItem.isSelected,\n  }\"\n>\n  @if (menuItem.iconType === 'svg') {\n    <div [innerHTML]=\"iconSvg\"></div>\n  } @else {\n    @if (menuItem.icon) {\n      <img\n        class=\"w-5 h-5\"\n        [src]=\"menuItem.icon\"\n        [alt]=\"menuItem.title\"\n        [title]=\"menuItem.title\"\n        [loading]=\"'lazy'\"\n      />\n    }\n  }\n  <span\n    class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n    title=\"{{ menuItem.title }}\"\n    [ngStyle]=\"{ 'margin-left.px': depth ? depth * 16 : 0 }\"\n  >\n    {{ menuItem.title }}\n  </span>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-side-menu-item', imports: [CommonModule], template: "<a href=\"javascript:void(0)\"\n   (click)=\"onMenuItemSelected(menuItem)\"\n   class=\"flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:text-light-on-primary dark:hover:text-dark-on-primary hover:bg-light-primary dark:hover:bg-dark-primary hover:cursor-pointer\"\n   [ngClass]=\"{\n      'font-bold text-light-on-secondary dark:bg-dark-on-secondary bg-light-secondary dark:bg-dark-secondary': menuItem.isSelected,\n     }\">\n  @if (menuItem.iconType === 'svg') {\n  <div [innerHTML]=\"iconSvg\"></div>\n  } @else {\n  @if (menuItem.icon) {\n  <img class=\"w-5 h-5\"\n       [src]=\"menuItem.icon\"\n       [alt]=\"menuItem.title\"\n       [title]=\"menuItem.title\"\n       [loading]=\"'lazy'\" />\n  }\n  }\n  <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n        title=\"{{ menuItem.title }}\"\n        [ngStyle]=\"{'margin-left.px': depth ? depth * 16 : 0}\">\n    {{ menuItem.title }}\n  </span>\n</a>\n" }]
+            args: [{ selector: 'haloduck-side-menu-item', imports: [CommonModule], template: "<a\n  href=\"javascript:void(0)\"\n  (click)=\"onMenuItemSelected(menuItem)\"\n  class=\"flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:text-light-on-primary dark:hover:text-dark-on-primary hover:bg-light-primary dark:hover:bg-dark-primary hover:cursor-pointer\"\n  [ngClass]=\"{\n    'font-bold text-light-on-secondary dark:bg-dark-on-secondary bg-light-secondary dark:bg-dark-secondary':\n      menuItem.isSelected,\n  }\"\n>\n  @if (menuItem.iconType === 'svg') {\n    <div [innerHTML]=\"iconSvg\"></div>\n  } @else {\n    @if (menuItem.icon) {\n      <img\n        class=\"w-5 h-5\"\n        [src]=\"menuItem.icon\"\n        [alt]=\"menuItem.title\"\n        [title]=\"menuItem.title\"\n        [loading]=\"'lazy'\"\n      />\n    }\n  }\n  <span\n    class=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n    title=\"{{ menuItem.title }}\"\n    [ngStyle]=\"{ 'margin-left.px': depth ? depth * 16 : 0 }\"\n  >\n    {{ menuItem.title }}\n  </span>\n</a>\n" }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { menuItem: [{
                 type: Input
             }], depth: [{
@@ -2772,11 +3069,11 @@ class SideMenuComponent {
     depth = 0;
     menuItemSelected = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SideMenuComponent, isStandalone: true, selector: "haloduck-side-menu", inputs: { menuItems: "menuItems", depth: "depth" }, outputs: { menuItemSelected: "menuItemSelected" }, ngImport: i0, template: "<div class=\"flex flex-col text-sm text-light-on-background dark:text-dark-on-background\">\n  @for (menuItem of menuItems; track menuItem.link) {\n  <haloduck-side-menu-item [menuItemSelectHandler]=\"menuItemSelected\"\n                           [menuItem]=\"menuItem\"\n                           [depth]=\"depth\"></haloduck-side-menu-item>\n  @if (menuItem.children && menuItem.children.length > 0) {\n  <haloduck-side-menu [menuItems]=\"menuItem.children\"\n                      [depth]=\"depth + 1\"\n                      (menuItemSelected)=\"menuItemSelected.emit($event)\"></haloduck-side-menu>\n  }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SideMenuComponent, selector: "haloduck-side-menu", inputs: ["menuItems", "depth"], outputs: ["menuItemSelected"] }, { kind: "component", type: SideMenuItemComponent, selector: "haloduck-side-menu-item", inputs: ["menuItem", "depth", "menuItemSelectHandler"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SideMenuComponent, isStandalone: true, selector: "haloduck-side-menu", inputs: { menuItems: "menuItems", depth: "depth" }, outputs: { menuItemSelected: "menuItemSelected" }, ngImport: i0, template: "<div class=\"flex flex-col text-sm text-light-on-background dark:text-dark-on-background\">\n  @for (menuItem of menuItems; track menuItem.link) {\n    <haloduck-side-menu-item\n      [menuItemSelectHandler]=\"menuItemSelected\"\n      [menuItem]=\"menuItem\"\n      [depth]=\"depth\"\n    ></haloduck-side-menu-item>\n    @if (menuItem.children && menuItem.children.length > 0) {\n      <haloduck-side-menu\n        [menuItems]=\"menuItem.children\"\n        [depth]=\"depth + 1\"\n        (menuItemSelected)=\"menuItemSelected.emit($event)\"\n      ></haloduck-side-menu>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SideMenuComponent, selector: "haloduck-side-menu", inputs: ["menuItems", "depth"], outputs: ["menuItemSelected"] }, { kind: "component", type: SideMenuItemComponent, selector: "haloduck-side-menu-item", inputs: ["menuItem", "depth", "menuItemSelectHandler"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-side-menu', imports: [SideMenuItemComponent], template: "<div class=\"flex flex-col text-sm text-light-on-background dark:text-dark-on-background\">\n  @for (menuItem of menuItems; track menuItem.link) {\n  <haloduck-side-menu-item [menuItemSelectHandler]=\"menuItemSelected\"\n                           [menuItem]=\"menuItem\"\n                           [depth]=\"depth\"></haloduck-side-menu-item>\n  @if (menuItem.children && menuItem.children.length > 0) {\n  <haloduck-side-menu [menuItems]=\"menuItem.children\"\n                      [depth]=\"depth + 1\"\n                      (menuItemSelected)=\"menuItemSelected.emit($event)\"></haloduck-side-menu>\n  }\n  }\n</div>\n" }]
+            args: [{ selector: 'haloduck-side-menu', imports: [SideMenuItemComponent], template: "<div class=\"flex flex-col text-sm text-light-on-background dark:text-dark-on-background\">\n  @for (menuItem of menuItems; track menuItem.link) {\n    <haloduck-side-menu-item\n      [menuItemSelectHandler]=\"menuItemSelected\"\n      [menuItem]=\"menuItem\"\n      [depth]=\"depth\"\n    ></haloduck-side-menu-item>\n    @if (menuItem.children && menuItem.children.length > 0) {\n      <haloduck-side-menu\n        [menuItems]=\"menuItem.children\"\n        [depth]=\"depth + 1\"\n        (menuItemSelected)=\"menuItemSelected.emit($event)\"\n      ></haloduck-side-menu>\n    }\n  }\n</div>\n" }]
         }], propDecorators: { menuItems: [{
                 type: Input
             }], depth: [{
@@ -2876,11 +3173,11 @@ class StlViewerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: StlViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: StlViewerComponent, isStandalone: true, selector: "haloduck-stl-viewer", inputs: { fileUrl: "fileUrl", filename: "filename", context: "context" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["viewerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"relative w-full h-full flex flex-col items-end\">\n    <div class=\"w-full h-full flex items-start flex-col\">\n        <div #viewerContainer\n             class=\"w-full h-full rounded-md\"></div>\n        @if (loadingPercentage < 100)\n          {\n          <div\n          class=\"h-2 bg-light-primary-light dark:bg-dark-primary-light\"\n          [ngStyle]=\"{ 'width': loadingPercentage + '%' }\">\n    </div>\n    }\n</div>\n<div class=\"absolute bottom-2 right-0 flex justify-end gap-2\">\n    @if (context) {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"danger\"\n                (click)=\"closeDialog()\">{{ 'haloduck.ui.button.Close' | transloco }}</haloduck-button>\n    } @else {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"secondary\"\n                (click)=\"showStl()\">{{ 'haloduck.ui.button.View' | transloco }}</haloduck-button>\n    }\n</div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: StlViewerComponent, isStandalone: true, selector: "haloduck-stl-viewer", inputs: { fileUrl: "fileUrl", filename: "filename", context: "context" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["viewerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"relative w-full h-full flex flex-col items-end\">\n  <div class=\"w-full h-full flex items-start flex-col\">\n    <div #viewerContainer class=\"w-full h-full rounded-md\"></div>\n    @if (loadingPercentage < 100) {\n      <div\n        class=\"h-2 bg-light-primary-light dark:bg-dark-primary-light\"\n        [ngStyle]=\"{ width: loadingPercentage + '%' }\"\n      ></div>\n    }\n  </div>\n  <div class=\"absolute bottom-2 right-0 flex justify-end gap-2\">\n    @if (context) {\n      <haloduck-button variant=\"primary\" (click)=\"download()\">{{\n        'haloduck.ui.button.Download' | transloco\n      }}</haloduck-button>\n      <haloduck-button variant=\"danger\" (click)=\"closeDialog()\">{{\n        'haloduck.ui.button.Close' | transloco\n      }}</haloduck-button>\n    } @else {\n      <haloduck-button variant=\"primary\" (click)=\"download()\">{{\n        'haloduck.ui.button.Download' | transloco\n      }}</haloduck-button>\n      <haloduck-button variant=\"secondary\" (click)=\"showStl()\">{{\n        'haloduck.ui.button.View' | transloco\n      }}</haloduck-button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "haloduck-button", inputs: ["disabled", "variant"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: StlViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-stl-viewer', imports: [CommonModule, ButtonComponent, TranslocoModule], providers: [provideTranslocoScope('haloduck')], template: "<div class=\"relative w-full h-full flex flex-col items-end\">\n    <div class=\"w-full h-full flex items-start flex-col\">\n        <div #viewerContainer\n             class=\"w-full h-full rounded-md\"></div>\n        @if (loadingPercentage < 100)\n          {\n          <div\n          class=\"h-2 bg-light-primary-light dark:bg-dark-primary-light\"\n          [ngStyle]=\"{ 'width': loadingPercentage + '%' }\">\n    </div>\n    }\n</div>\n<div class=\"absolute bottom-2 right-0 flex justify-end gap-2\">\n    @if (context) {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"danger\"\n                (click)=\"closeDialog()\">{{ 'haloduck.ui.button.Close' | transloco }}</haloduck-button>\n    } @else {\n    <haloduck-button variant=\"primary\"\n                (click)=\"download()\">{{ 'haloduck.ui.button.Download' | transloco }}</haloduck-button>\n    <haloduck-button variant=\"secondary\"\n                (click)=\"showStl()\">{{ 'haloduck.ui.button.View' | transloco }}</haloduck-button>\n    }\n</div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-stl-viewer', imports: [CommonModule, ButtonComponent, TranslocoModule], providers: [provideTranslocoScope('haloduck')], template: "<div class=\"relative w-full h-full flex flex-col items-end\">\n  <div class=\"w-full h-full flex items-start flex-col\">\n    <div #viewerContainer class=\"w-full h-full rounded-md\"></div>\n    @if (loadingPercentage < 100) {\n      <div\n        class=\"h-2 bg-light-primary-light dark:bg-dark-primary-light\"\n        [ngStyle]=\"{ width: loadingPercentage + '%' }\"\n      ></div>\n    }\n  </div>\n  <div class=\"absolute bottom-2 right-0 flex justify-end gap-2\">\n    @if (context) {\n      <haloduck-button variant=\"primary\" (click)=\"download()\">{{\n        'haloduck.ui.button.Download' | transloco\n      }}</haloduck-button>\n      <haloduck-button variant=\"danger\" (click)=\"closeDialog()\">{{\n        'haloduck.ui.button.Close' | transloco\n      }}</haloduck-button>\n    } @else {\n      <haloduck-button variant=\"primary\" (click)=\"download()\">{{\n        'haloduck.ui.button.Download' | transloco\n      }}</haloduck-button>\n      <haloduck-button variant=\"secondary\" (click)=\"showStl()\">{{\n        'haloduck.ui.button.View' | transloco\n      }}</haloduck-button>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { fileUrl: [{
                 type: Input
             }], filename: [{
@@ -3097,9 +3394,11 @@ class TableComponent {
     onLoadMore = new EventEmitter();
     onRowClick = new EventEmitter();
     onRowDblClick = new EventEmitter();
-    settings$ = this.tableName ? this.tableSettingService.getSettings(this.tableName).pipe(shareReplay(1)) : of({ showHeader: this.defaultShowHeader, autoLoad: this.defaultAutoLoad });
-    showHeader$ = this.settings$.pipe(map(settings => settings.showHeader));
-    autoLoad$ = this.settings$.pipe(map(settings => settings.autoLoad));
+    settings$ = this.tableName
+        ? this.tableSettingService.getSettings(this.tableName).pipe(shareReplay(1))
+        : of({ showHeader: this.defaultShowHeader, autoLoad: this.defaultAutoLoad });
+    showHeader$ = this.settings$.pipe(map((settings) => settings.showHeader));
+    autoLoad$ = this.settings$.pipe(map((settings) => settings.autoLoad));
     getColumnValue(row, column) {
         const value = this.getColumnValueRaw(row, column);
         if (column.customRenderFn) {
@@ -3201,7 +3500,7 @@ class TableComponent {
         });
     }
     onAutoLoadTriggered() {
-        this.autoLoad$.pipe(take(1)).subscribe(autoLoad => {
+        this.autoLoad$.pipe(take(1)).subscribe((autoLoad) => {
             if (autoLoad) {
                 this.lastEvaluatedKey.pipe(take(1)).subscribe((lastEvaluatedKey) => {
                     this.onLoadMore.emit(lastEvaluatedKey);
@@ -3218,8 +3517,8 @@ class TableComponent {
     ngOnInit() {
         if (this.tableName) {
             this.settings$ = this.tableSettingService.getSettings(this.tableName).pipe(shareReplay(1));
-            this.showHeader$ = this.settings$.pipe(map(settings => settings.showHeader));
-            this.autoLoad$ = this.settings$.pipe(map(settings => settings.autoLoad));
+            this.showHeader$ = this.settings$.pipe(map((settings) => settings.showHeader));
+            this.autoLoad$ = this.settings$.pipe(map((settings) => settings.autoLoad));
         }
     }
     openSettings() {
@@ -3229,11 +3528,11 @@ class TableComponent {
     }
     ngAfterViewInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", tableName: "tableName", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "loadMoreRowRef", first: true, predicate: ["loadMoreRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader$ | async) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow\n          class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n          haloduckAutoLoad\n          [autoLoadEnabled]=\"(autoLoad$ | async) ?? true\"\n          [autoLoadThreshold]=\"0.1\"\n          (autoLoadTrigger)=\"onAutoLoadTriggered()\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: AutoLoadDirective, selector: "[haloduckAutoLoad]", inputs: ["autoLoadEnabled", "autoLoadThreshold", "autoLoadRootMargin"], outputs: ["autoLoadTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", tableName: "tableName", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "loadMoreRowRef", first: true, predicate: ["loadMoreRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\"\n>\n  <table\n    class=\"w-full h-full\"\n    [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\"\n  >\n    <colgroup>\n      @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n          <col class=\"{{ column.width || '' }}\" />\n        }\n      }\n    </colgroup>\n    @if (showHeader$ | async) {\n      <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n        <tr>\n          @for (column of columns; track column.key) {\n            @if (!column.hidden || !(column.hidden | async)) {\n              <th\n                scope=\"col\"\n                class=\"{{\n                  column.align || ''\n                }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\"\n              >\n                <span class=\"group inline-flex\">\n                  {{ column.label }}\n                  @if (column.sortable) {\n                    @switch (getSortDirection(column.sort?.field || column.key) | async) {\n                      @case ('desc') {\n                        <span\n                          (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                          class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\"\n                        >\n                          <svg\n                            class=\"size-5\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                            data-slot=\"icon\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </span>\n                      }\n                      @case ('asc') {\n                        <span\n                          (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                          class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\"\n                        >\n                          <svg\n                            class=\"size-5\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                            data-slot=\"icon\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </span>\n                      }\n                      @default {\n                        <span\n                          (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                          class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\"\n                        >\n                          <svg\n                            class=\"size-5\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                            data-slot=\"icon\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </span>\n                      }\n                    }\n                  }\n                </span>\n              </th>\n            }\n          }\n        </tr>\n      </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n        <tr\n          class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{\n            'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null,\n            'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background':\n              !row.bgColor,\n          }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\"\n        >\n          @for (column of columns; track column.key) {\n            @if (!column.hidden || !(column.hidden | async)) {\n              <td\n                class=\"relative overflow-visible {{\n                  column.align || ''\n                }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n                [ngClass]=\"{\n                  'first:rounded-bl-lg last:rounded-br-lg':\n                    lastRow && (lastEvaluatedKey | async) === null,\n                  'text-wrap': row.isExpanded && column.type !== 'custom',\n                  'overflow-x-hidden text-ellipsis': !row.isExpanded && column.type !== 'custom',\n                  'py-2': column.type === 'custom',\n                  'py-4': column.type !== 'custom',\n                }\"\n              >\n                @if (column.type === 'custom') {\n                  @if (column.customRenderTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                    ></ng-container>\n                  }\n                } @else {\n                  {{ getColumnValue(row, column) | async }}\n                }\n              </td>\n            }\n          }\n        </tr>\n\n        @if (row.isExpanded && expandedTemplate) {\n          <tr>\n            <td [attr.colspan]=\"columns.length\"></td>\n          </tr>\n          <tr\n            class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\"\n          >\n            <td\n              [attr.colspan]=\"columns.length\"\n              class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"expandedTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\"\n              ></ng-container>\n            </td>\n          </tr>\n        }\n\n        @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n          <tr\n            #loadMoreRow\n            class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n            haloduckAutoLoad\n            [autoLoadEnabled]=\"(autoLoad$ | async) ?? true\"\n            [autoLoadThreshold]=\"0.1\"\n            (autoLoadTrigger)=\"onAutoLoadTriggered()\"\n          >\n            <td\n              [attr.colspan]=\"columns.length\"\n              class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\"\n            >\n              <div (click)=\"onLoadMoreClicked()\" class=\"cursor-pointer\">\n                {{ 'haloduck.ui.table.Load More...' | transloco }}\n              </div>\n            </td>\n          </tr>\n        }\n      } @empty {\n        @if (!(isLoading | async)) {\n          <tr>\n            <td\n              [attr.colspan]=\"columns.length\"\n              class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\"\n            >\n              {{ 'haloduck.ui.table.No data available.' | transloco }}\n            </td>\n          </tr>\n        }\n      }\n\n      @if (isLoading | async) {\n        @for (i of [0, 1, 2, 3, 4]; track i; let lastRow = $last) {\n          <tr\n            class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\"\n          >\n            @for (column of columns; track column.key) {\n              <td\n                class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n                [ngClass]=\"{ 'first:rounded-bl-lg last:rounded-br-lg': lastRow }\"\n              >\n                <div\n                  class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"\n                ></div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: AutoLoadDirective, selector: "[haloduckAutoLoad]", inputs: ["autoLoadEnabled", "autoLoadThreshold", "autoLoadRootMargin"], outputs: ["autoLoadTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-table', imports: [CommonModule, TranslocoModule, AutoLoadDirective], providers: [provideTranslocoScope('haloduck')], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n  <table class=\"w-full h-full\"\n         [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\">\n    <colgroup>\n      @for (column of columns; track column.key) {\n      @if (!column.hidden || !(column.hidden | async)) {\n      <col class=\"{{ column.width || '' }}\" />\n      }\n      }\n    </colgroup>\n    @if (showHeader$ | async) {\n    <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n      <tr>\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <th scope=\"col\"\n            class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n          <span class=\"group inline-flex\">\n            {{ column.label }}\n            @if (column.sortable) {\n            @switch (getSortDirection(column.sort?.field || column.key) | async)\n            {\n            @case('desc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @case('asc') {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                  class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            @default {\n            <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                  class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n              <svg class=\"size-5\"\n                   viewBox=\"0 0 20 20\"\n                   fill=\"currentColor\"\n                   aria-hidden=\"true\"\n                   data-slot=\"icon\">\n                <path fill-rule=\"evenodd\"\n                      d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                      clip-rule=\"evenodd\" />\n              </svg>\n            </span>\n            }\n            }\n            }\n          </span>\n        </th>\n        }\n        }\n      </tr>\n    </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n      <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n        @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n        <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n            [ngClass]=\"{\n                                    'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n                                    'text-wrap': row.isExpanded && column.type !== 'custom',\n                                    'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n                                    'py-2': column.type === 'custom',\n                                    'py-4': column.type !== 'custom'\n                                    }\">\n          @if (column.type === 'custom') {\n          @if (column.customRenderTemplate) {\n          <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n          }\n          }\n          @else {\n          {{ getColumnValue(row, column) | async }}\n          }\n        </td>\n        }\n        }\n      </tr>\n\n      @if (row.isExpanded && expandedTemplate) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\">\n        </td>\n      </tr>\n      <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n          <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n        </td>\n      </tr>\n      }\n\n      @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n      <tr #loadMoreRow\n          class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n          haloduckAutoLoad\n          [autoLoadEnabled]=\"(autoLoad$ | async) ?? true\"\n          [autoLoadThreshold]=\"0.1\"\n          (autoLoadTrigger)=\"onAutoLoadTriggered()\">\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          <div (click)=\"onLoadMoreClicked()\"\n               class=\"cursor-pointer\">\n            {{ 'haloduck.ui.table.Load More...' | transloco }}\n          </div>\n        </td>\n      </tr>\n      }\n\n      } @empty {\n      @if(!(isLoading | async)) {\n      <tr>\n        <td [attr.colspan]=\"columns.length\"\n            class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n          {{ 'haloduck.ui.table.No data available.' | transloco }}\n        </td>\n      </tr>\n      }\n      }\n\n      @if(isLoading | async) {\n      @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n      {\n      <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n        @for (column of columns; track column.key) {\n        <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n            [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n          <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n        </td>\n        }\n      </tr>\n      }\n      }\n    </tbody>\n  </table>\n</div>\n\n" }]
+            args: [{ selector: 'haloduck-table', imports: [CommonModule, TranslocoModule, AutoLoadDirective], providers: [provideTranslocoScope('haloduck')], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\"\n>\n  <table\n    class=\"w-full h-full\"\n    [ngClass]=\"{\n      'table-fixed': tableLayout === 'fixed',\n      'table-auto': tableLayout === 'auto',\n    }\"\n  >\n    <colgroup>\n      @for (column of columns; track column.key) {\n        @if (!column.hidden || !(column.hidden | async)) {\n          <col class=\"{{ column.width || '' }}\" />\n        }\n      }\n    </colgroup>\n    @if (showHeader$ | async) {\n      <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n        <tr>\n          @for (column of columns; track column.key) {\n            @if (!column.hidden || !(column.hidden | async)) {\n              <th\n                scope=\"col\"\n                class=\"{{\n                  column.align || ''\n                }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\"\n              >\n                <span class=\"group inline-flex\">\n                  {{ column.label }}\n                  @if (column.sortable) {\n                    @switch (getSortDirection(column.sort?.field || column.key) | async) {\n                      @case ('desc') {\n                        <span\n                          (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                          class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\"\n                        >\n                          <svg\n                            class=\"size-5\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                            data-slot=\"icon\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </span>\n                      }\n                      @case ('asc') {\n                        <span\n                          (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n                          class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\"\n                        >\n                          <svg\n                            class=\"size-5\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                            data-slot=\"icon\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </span>\n                      }\n                      @default {\n                        <span\n                          (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n                          class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\"\n                        >\n                          <svg\n                            class=\"size-5\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                            aria-hidden=\"true\"\n                            data-slot=\"icon\"\n                          >\n                            <path\n                              fill-rule=\"evenodd\"\n                              d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n                              clip-rule=\"evenodd\"\n                            />\n                          </svg>\n                        </span>\n                      }\n                    }\n                  }\n                </span>\n              </th>\n            }\n          }\n        </tr>\n      </thead>\n    }\n    <tbody class=\"overflow-scroll\">\n      @for (row of rows | async; track row['id']; let lastRow = $last) {\n        <tr\n          class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n          (click)=\"onRowClicked(row)\"\n          (dblclick)=\"onRowDblClicked(row)\"\n          [ngClass]=\"{\n            'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null,\n            'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background':\n              !row.bgColor,\n          }\"\n          [ngStyle]=\"{ 'background-color': row.bgColor || '' }\"\n        >\n          @for (column of columns; track column.key) {\n            @if (!column.hidden || !(column.hidden | async)) {\n              <td\n                class=\"relative overflow-visible {{\n                  column.align || ''\n                }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n                [ngClass]=\"{\n                  'first:rounded-bl-lg last:rounded-br-lg':\n                    lastRow && (lastEvaluatedKey | async) === null,\n                  'text-wrap': row.isExpanded && column.type !== 'custom',\n                  'overflow-x-hidden text-ellipsis': !row.isExpanded && column.type !== 'custom',\n                  'py-2': column.type === 'custom',\n                  'py-4': column.type !== 'custom',\n                }\"\n              >\n                @if (column.type === 'custom') {\n                  @if (column.customRenderTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                    ></ng-container>\n                  }\n                } @else {\n                  {{ getColumnValue(row, column) | async }}\n                }\n              </td>\n            }\n          }\n        </tr>\n\n        @if (row.isExpanded && expandedTemplate) {\n          <tr>\n            <td [attr.colspan]=\"columns.length\"></td>\n          </tr>\n          <tr\n            class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\"\n          >\n            <td\n              [attr.colspan]=\"columns.length\"\n              class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"expandedTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\"\n              ></ng-container>\n            </td>\n          </tr>\n        }\n\n        @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n          <tr\n            #loadMoreRow\n            class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n            haloduckAutoLoad\n            [autoLoadEnabled]=\"(autoLoad$ | async) ?? true\"\n            [autoLoadThreshold]=\"0.1\"\n            (autoLoadTrigger)=\"onAutoLoadTriggered()\"\n          >\n            <td\n              [attr.colspan]=\"columns.length\"\n              class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\"\n            >\n              <div (click)=\"onLoadMoreClicked()\" class=\"cursor-pointer\">\n                {{ 'haloduck.ui.table.Load More...' | transloco }}\n              </div>\n            </td>\n          </tr>\n        }\n      } @empty {\n        @if (!(isLoading | async)) {\n          <tr>\n            <td\n              [attr.colspan]=\"columns.length\"\n              class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\"\n            >\n              {{ 'haloduck.ui.table.No data available.' | transloco }}\n            </td>\n          </tr>\n        }\n      }\n\n      @if (isLoading | async) {\n        @for (i of [0, 1, 2, 3, 4]; track i; let lastRow = $last) {\n          <tr\n            class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\"\n          >\n            @for (column of columns; track column.key) {\n              <td\n                class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n                [ngClass]=\"{ 'first:rounded-bl-lg last:rounded-br-lg': lastRow }\"\n              >\n                <div\n                  class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"\n                ></div>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], propDecorators: { loadMoreRowRef: [{
                 type: ViewChild,
                 args: ['loadMoreRow', { read: ElementRef }]
@@ -3317,7 +3616,7 @@ class ToggleComponent {
                 useExisting: forwardRef(() => ToggleComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex gap-2\"\n     [ngClass]=\"{'items-center justify-start': 'horizontal' === layout, 'flex-col items-start justify-center ': 'vertical' === layout}\">\n    <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n        <ng-content></ng-content>\n    </label>\n    <button class=\"w-12 p-1 rounded-l-full rounded-r-full outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-light-primary dark:foucs:outline-dark-primary bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/60 flex hover:cursor-pointer\"\n            (click)=\"onToggle()\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{'justify-end': true === value, 'justify-center': null === value, 'justify-start': false === value}\">\n        <div class=\"shrink-0 h-[1.5rem] rounded-l-full rounded-r-full\"\n             [ngClass]=\"{'bg-light-primary dark:bg-dark-primary disabled:bg-light-primary/60 dark:disabled:bg-dark-primary/60': true === value, 'bg-light-inactive dark:bg-dark-inactive disabled:bg-light-inactive/60 dark:disabled:bg-dark-inactive/60': false ===  value,\n                'w-[1.5rem]': true === value || false === value, 'bg-light-primary-light dark:bg-dark-primary-light disabled:bg-light-primary-light/60 dark:disabled:bg-dark-primary-light/60 w-[2.4rem]': null === value}\">\n        </div>\n    </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex gap-2\"\n  [ngClass]=\"{\n    'items-center justify-start': 'horizontal' === layout,\n    'flex-col items-start justify-center ': 'vertical' === layout,\n  }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n  <button\n    class=\"w-12 p-1 rounded-l-full rounded-r-full outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-light-primary dark:foucs:outline-dark-primary bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/60 flex hover:cursor-pointer\"\n    (click)=\"onToggle()\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'justify-end': true === value,\n      'justify-center': null === value,\n      'justify-start': false === value,\n    }\"\n  >\n    <div\n      class=\"shrink-0 h-[1.5rem] rounded-l-full rounded-r-full\"\n      [ngClass]=\"{\n        'bg-light-primary dark:bg-dark-primary disabled:bg-light-primary/60 dark:disabled:bg-dark-primary/60':\n          true === value,\n        'bg-light-inactive dark:bg-dark-inactive disabled:bg-light-inactive/60 dark:disabled:bg-dark-inactive/60':\n          false === value,\n        'w-[1.5rem]': true === value || false === value,\n        'bg-light-primary-light dark:bg-dark-primary-light disabled:bg-light-primary-light/60 dark:disabled:bg-dark-primary-light/60 w-[2.4rem]':\n          null === value,\n      }\"\n    ></div>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -3327,7 +3626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"flex gap-2\"\n     [ngClass]=\"{'items-center justify-start': 'horizontal' === layout, 'flex-col items-start justify-center ': 'vertical' === layout}\">\n    <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n        <ng-content></ng-content>\n    </label>\n    <button class=\"w-12 p-1 rounded-l-full rounded-r-full outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-light-primary dark:foucs:outline-dark-primary bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/60 flex hover:cursor-pointer\"\n            (click)=\"onToggle()\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{'justify-end': true === value, 'justify-center': null === value, 'justify-start': false === value}\">\n        <div class=\"shrink-0 h-[1.5rem] rounded-l-full rounded-r-full\"\n             [ngClass]=\"{'bg-light-primary dark:bg-dark-primary disabled:bg-light-primary/60 dark:disabled:bg-dark-primary/60': true === value, 'bg-light-inactive dark:bg-dark-inactive disabled:bg-light-inactive/60 dark:disabled:bg-dark-inactive/60': false ===  value,\n                'w-[1.5rem]': true === value || false === value, 'bg-light-primary-light dark:bg-dark-primary-light disabled:bg-light-primary-light/60 dark:disabled:bg-dark-primary-light/60 w-[2.4rem]': null === value}\">\n        </div>\n    </button>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex gap-2\"\n  [ngClass]=\"{\n    'items-center justify-start': 'horizontal' === layout,\n    'flex-col items-start justify-center ': 'vertical' === layout,\n  }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n  <button\n    class=\"w-12 p-1 rounded-l-full rounded-r-full outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-light-primary dark:foucs:outline-dark-primary bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/60 flex hover:cursor-pointer\"\n    (click)=\"onToggle()\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'justify-end': true === value,\n      'justify-center': null === value,\n      'justify-start': false === value,\n    }\"\n  >\n    <div\n      class=\"shrink-0 h-[1.5rem] rounded-l-full rounded-r-full\"\n      [ngClass]=\"{\n        'bg-light-primary dark:bg-dark-primary disabled:bg-light-primary/60 dark:disabled:bg-dark-primary/60':\n          true === value,\n        'bg-light-inactive dark:bg-dark-inactive disabled:bg-light-inactive/60 dark:disabled:bg-dark-inactive/60':\n          false === value,\n        'w-[1.5rem]': true === value || false === value,\n        'bg-light-primary-light dark:bg-dark-primary-light disabled:bg-light-primary-light/60 dark:disabled:bg-dark-primary-light/60 w-[2.4rem]':\n          null === value,\n      }\"\n    ></div>\n  </button>\n</div>\n" }]
         }], propDecorators: { layout: [{
                 type: Input
             }], value: [{
@@ -3369,9 +3668,7 @@ class TableSettingComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableSettingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableSettingComponent, isStandalone: true, selector: "haloduck-table-setting", inputs: { context: "context" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: `
     <div class="flex justify-between items-center mb-4">
-      <h2
-        class="text-md font-semibold text-light-on-background dark:text-dark-on-background"
-      >
+      <h2 class="text-md font-semibold text-light-on-background dark:text-dark-on-background">
         {{ 'haloduck.ui.table.settings' | transloco }}
       </h2>
     </div>
@@ -3405,18 +3702,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             type: Component,
             args: [{
                     selector: 'haloduck-table-setting',
-                    imports: [
-                        CommonModule,
-                        TranslocoModule,
-                        FormsModule,
-                        ButtonComponent,
-                        ToggleComponent,
-                    ],
+                    imports: [CommonModule, TranslocoModule, FormsModule, ButtonComponent, ToggleComponent],
                     template: `
     <div class="flex justify-between items-center mb-4">
-      <h2
-        class="text-md font-semibold text-light-on-background dark:text-dark-on-background"
-      >
+      <h2 class="text-md font-semibold text-light-on-background dark:text-dark-on-background">
         {{ 'haloduck.ui.table.settings' | transloco }}
       </h2>
     </div>
@@ -3504,11 +3793,11 @@ class TabsComponent {
             this.selectedIndex = this.tabs.length - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TabsComponent, isStandalone: true, selector: "haloduck-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", layout: "layout", labelWidth: "labelWidth" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-start w-full\"\n     [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab.label; let i = $index) {\n      <button type=\"button\"\n              class=\"px-3 py-2 rounded-t-md\"\n              [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n              (click)=\"select(i)\">\n        {{ tab.label }}\n      </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n      <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TabsComponent, isStandalone: true, selector: "haloduck-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", layout: "layout", labelWidth: "labelWidth" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{ 'flex-col': layout === 'vertical' }\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div\n      class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\"\n    >\n      @for (tab of tabs; track tab.label; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 rounded-t-md\"\n          [ngClass]=\"{\n            'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n            'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary':\n              i === selectedIndex,\n          }\"\n          (click)=\"select(i)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container\n          *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"\n        ></ng-container>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-tabs', imports: [CommonModule], template: "<div class=\"flex gap-2 items-start w-full\"\n     [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\"\n         [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab.label; let i = $index) {\n      <button type=\"button\"\n              class=\"px-3 py-2 rounded-t-md\"\n              [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n              (click)=\"select(i)\">\n        {{ tab.label }}\n      </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n      <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'haloduck-tabs', imports: [CommonModule], template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{ 'flex-col': layout === 'vertical' }\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div\n      class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\"\n    >\n      @for (tab of tabs; track tab.label; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 rounded-t-md\"\n          [ngClass]=\"{\n            'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n            'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary':\n              i === selectedIndex,\n          }\"\n          (click)=\"select(i)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container\n          *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"\n        ></ng-container>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], selectedIndex: [{
@@ -3533,9 +3822,7 @@ class TagInputComponent {
     // Two-way binding support independent of CVA
     set value(tags) {
         if (Array.isArray(tags)) {
-            this.tags = tags
-                .map((t) => (t ?? '').trim())
-                .filter((t) => t.length > 0);
+            this.tags = tags.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
         }
         else {
             this.tags = [];
@@ -3548,9 +3835,7 @@ class TagInputComponent {
     onTouched = () => { };
     writeValue(value) {
         if (Array.isArray(value)) {
-            this.tags = value
-                .map((t) => (t ?? '').trim())
-                .filter((t) => t.length > 0);
+            this.tags = value.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
         }
         else {
             this.tags = [];
@@ -3624,7 +3909,10 @@ class TagInputComponent {
             return;
         }
         // If user pasted multiple comma-separated values, split and add all
-        const parts = raw.split(',').map((p) => p.trim()).filter((p) => p.length > 0);
+        const parts = raw
+            .split(',')
+            .map((p) => p.trim())
+            .filter((p) => p.length > 0);
         for (const part of parts) {
             this.addTag(part);
         }
@@ -3641,9 +3929,7 @@ class TagInputComponent {
         this.emitChanges();
     }
     emitChanges() {
-        const cleaned = this.tags
-            .map((t) => (t ?? '').trim())
-            .filter((t) => t.length > 0);
+        const cleaned = this.tags.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
         if (cleaned.length !== this.tags.length || cleaned.some((t, i) => t !== this.tags[i])) {
             this.tags = cleaned;
         }
@@ -3658,7 +3944,7 @@ class TagInputComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div\n       class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\">\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for ( tag of tags; track tag; let i = $index) {\n      <span\n            class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n        {{ tag }}\n        @if (!disabled) {\n        <button type=\"button\"\n                (click)=\"removeTag(i)\"\n                class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\">\n          \u00D7\n        </button>\n        }\n      </span>\n      }\n\n      <input #inputEl\n             [disabled]=\"disabled\"\n             [placeholder]=\"placeholder\"\n             class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n             [value]=\"inputValue\"\n             (input)=\"onInput($event)\"\n             (keydown)=\"onKeydown($event)\"\n             (blur)=\"onBlur()\" />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+        ], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\"\n  >\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (tag of tags; track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n          @if (!disabled) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i)\"\n              class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\"\n            >\n              \u00D7\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #inputEl\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagInputComponent, decorators: [{
             type: Component,
@@ -3669,7 +3955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div\n       class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\">\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for ( tag of tags; track tag; let i = $index) {\n      <span\n            class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n        {{ tag }}\n        @if (!disabled) {\n        <button type=\"button\"\n                (click)=\"removeTag(i)\"\n                class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\">\n          \u00D7\n        </button>\n        }\n      </span>\n      }\n\n      <input #inputEl\n             [disabled]=\"disabled\"\n             [placeholder]=\"placeholder\"\n             class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n             [value]=\"inputValue\"\n             (input)=\"onInput($event)\"\n             (keydown)=\"onKeydown($event)\"\n             (blur)=\"onBlur()\" />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"] }]
+                    ], template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\"\n  >\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (tag of tags; track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n          @if (!disabled) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i)\"\n              class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\"\n            >\n              \u00D7\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #inputEl\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"] }]
         }], propDecorators: { label: [{
                 type: ViewChild,
                 args: ['label']
@@ -3695,9 +3981,7 @@ class TagViewerComponent {
     // Accept input as `value` for consistency with tag-input
     set value(tags) {
         if (Array.isArray(tags)) {
-            this.tags = tags
-                .map((t) => (t ?? '').trim())
-                .filter((t) => t.length > 0);
+            this.tags = tags.map((t) => (t ?? '').trim()).filter((t) => t.length > 0);
         }
         else {
             this.tags = [];
@@ -3713,11 +3997,11 @@ class TagViewerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TagViewerComponent, isStandalone: true, selector: "haloduck-tag-viewer", inputs: { shouldWrap: "shouldWrap", value: "value" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div\n       class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n    <div class=\"flex items-center gap-2\"\n         [ngClass]=\"shouldWrap ? 'flex-wrap' : 'flex-nowrap'\">\n      @for (tag of tags; track tag) {\n      <span\n            class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n        {{ tag }}\n      </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TagViewerComponent, isStandalone: true, selector: "haloduck-tag-viewer", inputs: { shouldWrap: "shouldWrap", value: "value" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\"\n  >\n    <div class=\"flex items-center gap-2\" [ngClass]=\"shouldWrap ? 'flex-wrap' : 'flex-nowrap'\">\n      @for (tag of tags; track tag) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-tag-viewer', imports: [CommonModule], providers: [provideTranslocoScope('haloduck')], template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div\n       class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n    <div class=\"flex items-center gap-2\"\n         [ngClass]=\"shouldWrap ? 'flex-wrap' : 'flex-nowrap'\">\n      @for (tag of tags; track tag) {\n      <span\n            class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n        {{ tag }}\n      </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'haloduck-tag-viewer', imports: [CommonModule], providers: [provideTranslocoScope('haloduck')], template: "<div class=\"flex flex-col gap-2\">\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\"\n  >\n    <ng-content></ng-content>\n  </label>\n\n  <div\n    class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\"\n  >\n    <div class=\"flex items-center gap-2\" [ngClass]=\"shouldWrap ? 'flex-wrap' : 'flex-nowrap'\">\n      @for (tag of tags; track tag) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\"\n        >\n          {{ tag }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{
                 type: ViewChild,
                 args: ['label']
@@ -3803,8 +4087,8 @@ class GroupedDirective {
         if (!classString)
             return;
         // 공백으로 구분된 클래스들을 분리하여 각각 추가
-        const classes = classString.split(' ').filter(className => className.trim());
-        classes.forEach(className => {
+        const classes = classString.split(' ').filter((className) => className.trim());
+        classes.forEach((className) => {
             if (className.trim()) {
                 this.renderer.addClass(element, className.trim());
             }
@@ -3813,15 +4097,49 @@ class GroupedDirective {
     removeBorderClasses(element) {
         // 기본 테두리 클래스들 제거
         const defaultBorderClasses = [
-            'border', 'border-2', 'border-3', 'border-4', 'border-8',
-            'border-solid', 'border-dashed', 'border-dotted', 'border-double', 'border-none',
-            'rounded-none', 'rounded-sm', 'rounded', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-2xl', 'rounded-3xl', 'rounded-full',
-            'border-gray-200', 'border-gray-300', 'border-gray-400', 'border-gray-500', 'border-gray-600', 'border-gray-700', 'border-gray-800', 'border-gray-900',
-            'border-blue-500', 'border-blue-700', 'border-red-500', 'border-red-600', 'border-green-500', 'border-green-600',
-            'border-amber-500', 'border-amber-600', 'border-violet-500', 'border-violet-600', 'border-pink-500', 'border-pink-600',
-            'border-white', 'border-black'
+            'border',
+            'border-2',
+            'border-3',
+            'border-4',
+            'border-8',
+            'border-solid',
+            'border-dashed',
+            'border-dotted',
+            'border-double',
+            'border-none',
+            'rounded-none',
+            'rounded-sm',
+            'rounded',
+            'rounded-md',
+            'rounded-lg',
+            'rounded-xl',
+            'rounded-2xl',
+            'rounded-3xl',
+            'rounded-full',
+            'border-gray-200',
+            'border-gray-300',
+            'border-gray-400',
+            'border-gray-500',
+            'border-gray-600',
+            'border-gray-700',
+            'border-gray-800',
+            'border-gray-900',
+            'border-blue-500',
+            'border-blue-700',
+            'border-red-500',
+            'border-red-600',
+            'border-green-500',
+            'border-green-600',
+            'border-amber-500',
+            'border-amber-600',
+            'border-violet-500',
+            'border-violet-600',
+            'border-pink-500',
+            'border-pink-600',
+            'border-white',
+            'border-black',
         ];
-        defaultBorderClasses.forEach(className => {
+        defaultBorderClasses.forEach((className) => {
             this.renderer.removeClass(element, className);
         });
     }
@@ -3849,7 +4167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[haloduckGrouped]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { haloduckGrouped: [{
                 type: Input
@@ -3878,18 +4196,14 @@ class BreadcrumbService {
     titleService = inject(Title);
     constructor(router) {
         this.router = router;
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd))
-            .subscribe(() => {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
             const root = this.router.routerState.snapshot.root;
             const breadcrumbs = this.createBreadcrumbs(root);
             this.breadcrumbs.next(breadcrumbs);
             setTimeout(() => {
                 const titlePrefix = this.coreService.getStage() === 'prod'
                     ? ''
-                    : `[${this.coreService.getStage()}] ` +
-                        this.coreService.getAppName() +
-                        '::';
+                    : `[${this.coreService.getStage()}] ` + this.coreService.getAppName() + '::';
                 const title = titlePrefix +
                     breadcrumbs.reduce((acc, breadcrumb) => {
                         return acc ? `${acc}>${breadcrumb.label}` : breadcrumb.label;
@@ -3904,9 +4218,7 @@ class BreadcrumbService {
             return breadcrumbs;
         }
         for (const child of children) {
-            const routeURL = child.url
-                .map((segment) => segment.path)
-                .join('/');
+            const routeURL = child.url.map((segment) => segment.path).join('/');
             if (routeURL !== '') {
                 url += `/${routeURL}`;
             }
@@ -3934,11 +4246,11 @@ class BreadcrumbComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: BreadcrumbComponent, isStandalone: true, selector: "haloduck-breadcrumb", ngImport: i0, template: "<nav class=\"flex border-b border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n     aria-label=\"Breadcrumb\">\n    <ol role=\"list\"\n        class=\"flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8\">\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <a routerLink=\"/\"\n                   class=\"text-light-on-background dark:text-dark-on-background hover:scale-105\">\n                    <svg class=\"size-5 shrink-0\"\n                         viewBox=\"0 0 20 20\"\n                         fill=\"currentColor\"\n                         aria-hidden=\"true\"\n                         data-slot=\"icon\">\n                        <path fill-rule=\"evenodd\"\n                              d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z\"\n                              clip-rule=\"evenodd\" />\n                    </svg>\n                    <span class=\"sr-only\">Home</span>\n                </a>\n            </div>\n        </li>\n        @for (breadcrumb of listBreadcrumb; track breadcrumb.label; let last = $last) {\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <svg class=\"h-full w-6 shrink-0 text-light-inactive dark:text-dark-inactive\"\n                     viewBox=\"0 0 24 44\"\n                     preserveAspectRatio=\"none\"\n                     fill=\"currentColor\"\n                     aria-hidden=\"true\">\n                    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n                </svg>\n                @if (!last) {\n                <a href=\"javascript:void(0)\"\n                   [routerLink]=\"breadcrumb.url\"\n                   class=\"ml-4 text-sm font-medium hover:font-bold text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</a>\n                } @else {\n                <span class=\"ml-4 text-sm font-medium text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</span>\n                }\n            </div>\n        </li>\n        }\n    </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: BreadcrumbComponent, isStandalone: true, selector: "haloduck-breadcrumb", ngImport: i0, template: "<nav\n  class=\"flex border-b border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n  aria-label=\"Breadcrumb\"\n>\n  <ol role=\"list\" class=\"flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8\">\n    <li class=\"flex\">\n      <div class=\"flex items-center\">\n        <a\n          routerLink=\"/\"\n          class=\"text-light-on-background dark:text-dark-on-background hover:scale-105\"\n        >\n          <svg\n            class=\"size-5 shrink-0\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n          <span class=\"sr-only\">Home</span>\n        </a>\n      </div>\n    </li>\n    @for (breadcrumb of listBreadcrumb; track breadcrumb.label; let last = $last) {\n      <li class=\"flex\">\n        <div class=\"flex items-center\">\n          <svg\n            class=\"h-full w-6 shrink-0 text-light-inactive dark:text-dark-inactive\"\n            viewBox=\"0 0 24 44\"\n            preserveAspectRatio=\"none\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n          </svg>\n          @if (!last) {\n            <a\n              href=\"javascript:void(0)\"\n              [routerLink]=\"breadcrumb.url\"\n              class=\"ml-4 text-sm font-medium hover:font-bold text-light-on-background dark:text-dark-on-background\"\n              >{{ breadcrumb.label | transloco }}</a\n            >\n          } @else {\n            <span\n              class=\"ml-4 text-sm font-medium text-light-on-background dark:text-dark-on-background\"\n              >{{ breadcrumb.label | transloco }}</span\n            >\n          }\n        </div>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-breadcrumb', imports: [RouterLink, TranslocoModule], template: "<nav class=\"flex border-b border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n     aria-label=\"Breadcrumb\">\n    <ol role=\"list\"\n        class=\"flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8\">\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <a routerLink=\"/\"\n                   class=\"text-light-on-background dark:text-dark-on-background hover:scale-105\">\n                    <svg class=\"size-5 shrink-0\"\n                         viewBox=\"0 0 20 20\"\n                         fill=\"currentColor\"\n                         aria-hidden=\"true\"\n                         data-slot=\"icon\">\n                        <path fill-rule=\"evenodd\"\n                              d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z\"\n                              clip-rule=\"evenodd\" />\n                    </svg>\n                    <span class=\"sr-only\">Home</span>\n                </a>\n            </div>\n        </li>\n        @for (breadcrumb of listBreadcrumb; track breadcrumb.label; let last = $last) {\n        <li class=\"flex\">\n            <div class=\"flex items-center\">\n                <svg class=\"h-full w-6 shrink-0 text-light-inactive dark:text-dark-inactive\"\n                     viewBox=\"0 0 24 44\"\n                     preserveAspectRatio=\"none\"\n                     fill=\"currentColor\"\n                     aria-hidden=\"true\">\n                    <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n                </svg>\n                @if (!last) {\n                <a href=\"javascript:void(0)\"\n                   [routerLink]=\"breadcrumb.url\"\n                   class=\"ml-4 text-sm font-medium hover:font-bold text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</a>\n                } @else {\n                <span class=\"ml-4 text-sm font-medium text-light-on-background dark:text-dark-on-background\">{{ breadcrumb.label | transloco }}</span>\n                }\n            </div>\n        </li>\n        }\n    </ol>\n</nav>\n" }]
+            args: [{ selector: 'haloduck-breadcrumb', imports: [RouterLink, TranslocoModule], template: "<nav\n  class=\"flex border-b border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n  aria-label=\"Breadcrumb\"\n>\n  <ol role=\"list\" class=\"flex w-full max-w-(--breakpoint-xl) space-x-4 px-4 sm:px-6 lg:px-8\">\n    <li class=\"flex\">\n      <div class=\"flex items-center\">\n        <a\n          routerLink=\"/\"\n          class=\"text-light-on-background dark:text-dark-on-background hover:scale-105\"\n        >\n          <svg\n            class=\"size-5 shrink-0\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n          <span class=\"sr-only\">Home</span>\n        </a>\n      </div>\n    </li>\n    @for (breadcrumb of listBreadcrumb; track breadcrumb.label; let last = $last) {\n      <li class=\"flex\">\n        <div class=\"flex items-center\">\n          <svg\n            class=\"h-full w-6 shrink-0 text-light-inactive dark:text-dark-inactive\"\n            viewBox=\"0 0 24 44\"\n            preserveAspectRatio=\"none\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n          </svg>\n          @if (!last) {\n            <a\n              href=\"javascript:void(0)\"\n              [routerLink]=\"breadcrumb.url\"\n              class=\"ml-4 text-sm font-medium hover:font-bold text-light-on-background dark:text-dark-on-background\"\n              >{{ breadcrumb.label | transloco }}</a\n            >\n          } @else {\n            <span\n              class=\"ml-4 text-sm font-medium text-light-on-background dark:text-dark-on-background\"\n              >{{ breadcrumb.label | transloco }}</span\n            >\n          }\n        </div>\n      </li>\n    }\n  </ol>\n</nav>\n" }]
         }] });
 
 class NotificationComponent {
@@ -3948,11 +4260,11 @@ class NotificationComponent {
         this.notificationService.removeNotificationById(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: NotificationComponent, isStandalone: true, selector: "haloduck-notification", ngImport: i0, template: "@for (notification of listNotification$ |async; track notification.id) {\n<div class=\"relative rounded-lg m-4 px-8 py-4 bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary animate-fadeIn\"\n     [ngClass]=\"{ 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-on-primary-dark dark:text-dark-on-primary-dark': notification.type === 'info',\n     'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary': notification.type === 'success',\n     'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger': notification.type === 'error',\n     'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': notification.type === 'warning' }\">\n  {{notification.message}}\n  <div class=\"absolute top-0 right-0\">\n    <button type=\"button\"\n            (click)=\"removeNotification(notification.id)\">\n      <span class=\"sr-only\">Close</span>\n      <svg class=\"size-6 text-white\"\n           fill=\"none\"\n           viewBox=\"0 0 24 24\"\n           stroke-width=\"1.5\"\n           stroke=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M6 18 18 6M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: NotificationComponent, isStandalone: true, selector: "haloduck-notification", ngImport: i0, template: "@for (notification of listNotification$ | async; track notification.id) {\n  <div\n    class=\"relative rounded-lg m-4 px-8 py-4 bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary animate-fadeIn\"\n    [ngClass]=\"{\n      'bg-light-primary-dark dark:bg-dark-primary-dark text-light-on-primary-dark dark:text-dark-on-primary-dark':\n        notification.type === 'info',\n      'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n        notification.type === 'success',\n      'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n        notification.type === 'error',\n      'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n        notification.type === 'warning',\n    }\"\n  >\n    {{ notification.message }}\n    <div class=\"absolute top-0 right-0\">\n      <button type=\"button\" (click)=\"removeNotification(notification.id)\">\n        <span class=\"sr-only\">Close</span>\n        <svg\n          class=\"size-6 text-white\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          aria-hidden=\"true\"\n          data-slot=\"icon\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-notification', standalone: true, imports: [CommonModule], template: "@for (notification of listNotification$ |async; track notification.id) {\n<div class=\"relative rounded-lg m-4 px-8 py-4 bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary animate-fadeIn\"\n     [ngClass]=\"{ 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-on-primary-dark dark:text-dark-on-primary-dark': notification.type === 'info',\n     'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary': notification.type === 'success',\n     'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger': notification.type === 'error',\n     'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary': notification.type === 'warning' }\">\n  {{notification.message}}\n  <div class=\"absolute top-0 right-0\">\n    <button type=\"button\"\n            (click)=\"removeNotification(notification.id)\">\n      <span class=\"sr-only\">Close</span>\n      <svg class=\"size-6 text-white\"\n           fill=\"none\"\n           viewBox=\"0 0 24 24\"\n           stroke-width=\"1.5\"\n           stroke=\"currentColor\"\n           aria-hidden=\"true\"\n           data-slot=\"icon\">\n        <path stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M6 18 18 6M6 6l12 12\" />\n      </svg>\n    </button>\n  </div>\n</div>\n}\n" }]
+            args: [{ selector: 'haloduck-notification', standalone: true, imports: [CommonModule], template: "@for (notification of listNotification$ | async; track notification.id) {\n  <div\n    class=\"relative rounded-lg m-4 px-8 py-4 bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary animate-fadeIn\"\n    [ngClass]=\"{\n      'bg-light-primary-dark dark:bg-dark-primary-dark text-light-on-primary-dark dark:text-dark-on-primary-dark':\n        notification.type === 'info',\n      'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n        notification.type === 'success',\n      'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n        notification.type === 'error',\n      'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n        notification.type === 'warning',\n    }\"\n  >\n    {{ notification.message }}\n    <div class=\"absolute top-0 right-0\">\n      <button type=\"button\" (click)=\"removeNotification(notification.id)\">\n        <span class=\"sr-only\">Close</span>\n        <svg\n          class=\"size-6 text-white\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke-width=\"1.5\"\n          stroke=\"currentColor\"\n          aria-hidden=\"true\"\n          data-slot=\"icon\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n}\n" }]
         }] });
 
 class PictureNameComponent {
@@ -3960,11 +4272,11 @@ class PictureNameComponent {
     pictureKey;
     cdnUrl = '';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PictureNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PictureNameComponent, isStandalone: true, selector: "haloduck-picture-name", inputs: { name: "name", pictureKey: "pictureKey", cdnUrl: "cdnUrl" }, ngImport: i0, template: "<div class=\"flex items-center justify-start gap-2\">\n    @if(pictureKey) {\n    <img src=\"{{cdnUrl}}/{{pictureKey}}\"\n         alt=\"\uC0AC\uC9C4\"\n         class=\"w-8 h-8 rounded-full\" />\n    } @else {\n    <div class=\"w-8 h-8 bg-light-inactive dark:bg-dark-inactive rounded-full\"></div>\n    }\n    {{ name }}\n    @if (name) {\n    &nbsp;&nbsp;&nbsp;&nbsp;\n    <!-- TODO -->\n    }\n</div>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PictureNameComponent, isStandalone: true, selector: "haloduck-picture-name", inputs: { name: "name", pictureKey: "pictureKey", cdnUrl: "cdnUrl" }, ngImport: i0, template: "<div class=\"flex items-center justify-start gap-2\">\n  @if (pictureKey) {\n    <img src=\"{{ cdnUrl }}/{{ pictureKey }}\" alt=\"\uC0AC\uC9C4\" class=\"w-8 h-8 rounded-full\" />\n  } @else {\n    <div class=\"w-8 h-8 bg-light-inactive dark:bg-dark-inactive rounded-full\"></div>\n  }\n  {{ name }}\n  @if (name) {\n    &nbsp;&nbsp;&nbsp;&nbsp;\n    <!-- TODO -->\n  }\n</div>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PictureNameComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-picture-name', imports: [], template: "<div class=\"flex items-center justify-start gap-2\">\n    @if(pictureKey) {\n    <img src=\"{{cdnUrl}}/{{pictureKey}}\"\n         alt=\"\uC0AC\uC9C4\"\n         class=\"w-8 h-8 rounded-full\" />\n    } @else {\n    <div class=\"w-8 h-8 bg-light-inactive dark:bg-dark-inactive rounded-full\"></div>\n    }\n    {{ name }}\n    @if (name) {\n    &nbsp;&nbsp;&nbsp;&nbsp;\n    <!-- TODO -->\n    }\n</div>\n" }]
+            args: [{ selector: 'haloduck-picture-name', imports: [], template: "<div class=\"flex items-center justify-start gap-2\">\n  @if (pictureKey) {\n    <img src=\"{{ cdnUrl }}/{{ pictureKey }}\" alt=\"\uC0AC\uC9C4\" class=\"w-8 h-8 rounded-full\" />\n  } @else {\n    <div class=\"w-8 h-8 bg-light-inactive dark:bg-dark-inactive rounded-full\"></div>\n  }\n  {{ name }}\n  @if (name) {\n    &nbsp;&nbsp;&nbsp;&nbsp;\n    <!-- TODO -->\n  }\n</div>\n" }]
         }], propDecorators: { name: [{
                 type: Input
             }], pictureKey: [{