@haloduck/ui 2.0.0 → 2.0.2

package/fesm2022/haloduck-ui.mjs

@@ -0,0 +1,2857 @@
+import * as i0 from '@angular/core';
+import { Injectable, Input, Component, inject, ChangeDetectorRef, forwardRef, ViewChild, signal, EventEmitter, Output, ViewContainerRef, NgZone, isDevMode, ChangeDetectionStrategy } from '@angular/core';
+import { signIn, confirmSignIn, resetPassword, confirmResetPassword } from 'aws-amplify/auth';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject, zip, Subject, takeUntil, tap, combineLatest, switchMap, of, Observable, distinctUntilChanged, map, take } from 'rxjs';
+import { ulid } from 'ulid';
+import * as i1 from '@angular/common';
+import { CommonModule, DecimalPipe, DatePipe } from '@angular/common';
+import * as i1$2 from '@jsverse/transloco';
+import { provideTranslocoScope, TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import * as i2 from '@angular/common/http';
+import * as i1$3 from '@angular/cdk/overlay';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CoreService } from '@haloduck/core';
+import * as i1$5 from '@angular/router';
+import { Router, NavigationEnd, RouterLink } from '@angular/router';
+import * as i1$4 from '@angular/platform-browser';
+import { Title } from '@angular/platform-browser';
+import * as THREE from 'three';
+import { STLLoader, OrbitControls } from 'three-stdlib';
+import { download } from '@haloduck/util';
+import { filter } from 'rxjs/operators';
+
+class NotificationService {
+    listNotification$ = new BehaviorSubject([]);
+    listNotification = [];
+    showNotification(title, body, payload = null, timeout) {
+        if (window.FlutterApp) {
+            window.FlutterApp.postMessage(JSON.stringify({
+                action: 'showNotification',
+                title: title,
+                body: body,
+                payload: payload,
+                timeout: timeout,
+            }));
+        }
+        else if ('Notification' in window &&
+            Notification.permission === 'granted') {
+            // 웹브라우저에서 실행될 때는 기본 브라우저 알림 사용
+            new Notification(title, { body: body });
+        }
+        else {
+            // 기본 내부 알림 시스템 사용
+            this._showNotification('info', body, timeout ? timeout : undefined);
+        }
+    }
+    _showNotification(type, message, timeOut) {
+        const id = ulid();
+        const notification = { id, type, message, timeOut };
+        this.listNotification.push(notification);
+        this.listNotification$.next(this.listNotification);
+        if (timeOut) {
+            setTimeout(() => {
+                this.listNotification = this.listNotification.filter((n) => n.id !== id);
+                this.listNotification$.next(this.listNotification);
+            }, timeOut);
+        }
+        return id;
+    }
+    getListNotification() {
+        return this.listNotification$.asObservable();
+    }
+    removeNotificationById(id) {
+        this.listNotification = this.listNotification.filter((n) => n.id !== id);
+        this.listNotification$.next(this.listNotification);
+    }
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+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"] }] });
+}
+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" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
+class InputComponent {
+    cdr = inject(ChangeDetectorRef);
+    label;
+    inputElement;
+    placeholder = '';
+    type = 'text';
+    disabled = false;
+    rows = 1;
+    autofocus = false;
+    value = '';
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    focus() {
+        this.inputElement?.nativeElement?.focus();
+    }
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+        this.onTouched();
+        if (this.rows > 1) {
+            input.style.height = 'auto';
+            input.style.height = input.scrollHeight + 'px';
+        }
+    }
+    onKeydown($event) {
+        if (this.rows === 1 && $event.key === 'Enter') {
+            $event.preventDefault();
+            $event.stopPropagation();
+        }
+    }
+    ngAfterViewInit() {
+        // hide label if no content.
+        if (!this.label.nativeElement.innerText.trim()) {
+            this.label.nativeElement.style.display = 'none';
+        }
+        if (this.autofocus) {
+            // Ensure change detection is complete and view is stable
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                if (this.inputElement?.nativeElement instanceof HTMLElement) {
+                    this.inputElement.nativeElement.focus();
+                }
+            }, 100);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputComponent, isStandalone: true, selector: "haloduck-input", inputs: { placeholder: "placeholder", type: "type", disabled: "disabled", rows: "rows", autofocus: "autofocus", value: "value" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => 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: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputComponent),
+                            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" }]
+        }], propDecorators: { label: [{
+                type: ViewChild,
+                args: ['label']
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+// auth.component.ts
+class AuthenticateComponent {
+    fb;
+    http;
+    notificationService = inject(NotificationService);
+    loginForm;
+    signupForm;
+    resetForm;
+    newPasswordForm;
+    otpForm;
+    stage = 'login';
+    emailForReset = '';
+    constructor(fb, http) {
+        this.fb = fb;
+        this.http = http;
+        this.loginForm = fb.group({
+            email: ['', [Validators.required, Validators.email]],
+            password: ['', Validators.required],
+        });
+        this.signupForm = fb.group({
+            email: ['', [Validators.required, Validators.email]],
+            password: ['', Validators.required],
+        });
+        this.resetForm = fb.group({
+            email: ['', [Validators.required, Validators.email]],
+        });
+        this.newPasswordForm = fb.group({
+            newPassword: ['', Validators.required],
+        });
+        this.otpForm = fb.group({
+            code: ['', Validators.required],
+            newPassword: ['', Validators.required],
+        });
+    }
+    switchStage(stage) {
+        this.stage = stage;
+    }
+    login() {
+        signIn({
+            username: this.loginForm.value.email,
+            password: this.loginForm.value.password,
+            options: {
+                authFlowType: 'USER_PASSWORD_AUTH',
+            },
+        })
+            .then((res) => {
+            console.log('res', res);
+            console.log('res.nextStep.signInStep', res.nextStep.signInStep);
+            if (res.nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED') {
+                this.switchStage('newPassword');
+            }
+            else {
+                this.notificationService.showNotification('success', 'Successfully signed in.', 3000);
+            }
+        })
+            .catch((err) => {
+            if (err.code === 'NotAuthorizedException') {
+                this.switchStage('reset');
+            }
+            else {
+                this.notificationService.showNotification('error', 'Failed to sign in.');
+            }
+        });
+    }
+    confirmNewPassword() {
+        confirmSignIn({
+            challengeResponse: this.newPasswordForm.value.newPassword,
+        })
+            .then(() => {
+            this.notificationService.showNotification('success', 'Successfully signed in.', 3000);
+        })
+            .catch((err) => {
+            console.log('err', JSON.stringify(err));
+            if (err.code === 'NotAuthorizedException') {
+                this.notificationService.showNotification('error', 'Failed to sign in.');
+            }
+            else if (err.code === 'InvalidPasswordException') {
+                this.notificationService.showNotification('error', 'Invalid password.');
+            }
+            else {
+                this.notificationService.showNotification('error', 'Failed to confirm new password.');
+            }
+        });
+    }
+    signup() {
+        this.http.post('/api/signup', this.signupForm.value).subscribe(console.log);
+    }
+    reset() {
+        resetPassword({ username: this.resetForm.value.email })
+            .then(() => {
+            this.switchStage('otpVerify');
+        })
+            .catch((err) => {
+            this.notificationService.showNotification('error', 'Failed to request verification code.');
+        });
+    }
+    verifyOtp() {
+        confirmResetPassword({
+            username: this.resetForm.value.email,
+            confirmationCode: this.otpForm.value.code,
+            newPassword: this.otpForm.value.newPassword,
+        })
+            .then(() => {
+            this.notificationService.showNotification('success', 'Successfully reset password.', 3000);
+            this.switchStage('login');
+        })
+            .catch((err) => {
+            this.notificationService.showNotification('error', 'Failed to reset password.');
+        });
+    }
+    get passwordValue() {
+        return this.newPasswordForm.get('newPassword')?.value || '';
+    }
+    get isMinLength() {
+        return this.passwordValue.length >= 8;
+    }
+    get hasUppercase() {
+        return /[A-Z]/.test(this.passwordValue);
+    }
+    get hasLowercase() {
+        return /[a-z]/.test(this.passwordValue);
+    }
+    get hasNumber() {
+        return /[0-9]/.test(this.passwordValue);
+    }
+    get hasSpecialChar() {
+        return /[^A-Za-z0-9]/.test(this.passwordValue);
+    }
+    get isPasswordValid() {
+        return this.isMinLength && this.hasUppercase && this.hasLowercase && this.hasNumber && this.hasSpecialChar;
+    }
+    get passwordRules() {
+        return [
+            { label: 'minimum of 8 characters', valid: this.isMinLength },
+            { label: 'one uppercase letter', valid: this.hasUppercase },
+            { label: 'one lowercase letter', valid: this.hasLowercase },
+            { label: 'one numeric digit', valid: this.hasNumber },
+            { label: 'one special character', valid: this.hasSpecialChar },
+        ];
+    }
+    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"] }] });
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2.HttpClient }] });
+
+class SelectDropdownComponent {
+    _filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : []));
+    _options = [];
+    _selectedOptionIds = [];
+    selectedChange = new EventEmitter();
+    useFilter = false;
+    multiselect = true;
+    atLeastOne = false;
+    asButton = false;
+    set options(value) {
+        this._options = value || [];
+        this._filteredOptions.set(this._options);
+    }
+    get options() {
+        return this._filteredOptions();
+    }
+    set selectedOptionIds(value) {
+        this._selectedOptionIds = value || [];
+    }
+    get selectedOptions() {
+        return this._selectedOptionIds;
+    }
+    onFilterInput(event) {
+        const value = event.target.value.toLowerCase();
+        this._filteredOptions.set(this._options.filter((opt) => opt.value.toLowerCase().includes(value)));
+    }
+    onToggleOption(option) {
+        if (this.asButton) {
+            this._selectedOptionIds = [option.id || option.value];
+        }
+        else {
+            if (this.multiselect) {
+                if (!this._selectedOptionIds.includes(option.id || option.value)) {
+                    this._selectedOptionIds.push(option.id || option.value);
+                }
+                else {
+                    this._selectedOptionIds.splice(this._selectedOptionIds.indexOf(option.id || option.value), 1);
+                }
+            }
+            else {
+                if (this.atLeastOne) {
+                    this._selectedOptionIds = [option.id || option.value];
+                }
+                else {
+                    if (this._selectedOptionIds.includes(option.id || option.value)) {
+                        this._selectedOptionIds = [];
+                    }
+                    else {
+                        this._selectedOptionIds = [option.id || option.value];
+                    }
+                }
+            }
+        }
+        // prevent [null]
+        this._selectedOptionIds = this._selectedOptionIds.filter((id) => id !== null);
+        this.selectedChange.emit(this._selectedOptionIds);
+    }
+    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" }, 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 cursor-pointer hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( _selectedOptionIds.includes(option.id || option.value)) {\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      {{ option.value }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.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], 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 cursor-pointer hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( _selectedOptionIds.includes(option.id || option.value)) {\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      {{ option.value }}\n    </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { selectedChange: [{
+                type: Output
+            }], useFilter: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], atLeastOne: [{
+                type: Input
+            }], asButton: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], selectedOptionIds: [{
+                type: Input
+            }] } });
+
+class SelectComponent {
+    translateService = inject(TranslocoService);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    overlayRef = null;
+    selectedChange = new EventEmitter();
+    disabled = false;
+    loading = false;
+    variant = 'none';
+    asButton = false;
+    useIcon = false;
+    useFilter = false;
+    multiselect = true;
+    placeholder = '';
+    atLeastOne = false;
+    showAll = false;
+    options = null;
+    set value(value) {
+        this.writeValue(value);
+        this.onChange(this.getSelectedValue());
+    }
+    get value() {
+        if (this.multiselect) {
+            return this.selectedOptionIds;
+        }
+        else {
+            if (this.selectedOptionIds.length === 0) {
+                return null;
+            }
+            return this.selectedOptionIds[0];
+        }
+    }
+    origin;
+    label;
+    isDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDropdownOpen" }] : []));
+    selectedOptionIds = [];
+    get selectedOptions() {
+        if (this.options) {
+            return this.options.filter((option) => this.selectedOptionIds.includes(option.id || option.value));
+        }
+        return [];
+    }
+    onClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        const originWidth = this.origin?.nativeElement?.offsetWidth || 0;
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.origin.nativeElement)
+                    .withPositions([
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                minWidth: originWidth,
+            });
+            this.overlayRef.backdropClick().subscribe(() => {
+                this.isDropdownOpen.set(false);
+                this.overlayRef?.detach();
+            });
+        }
+        if (!this.overlayRef.hasAttached()) {
+            const portal = new ComponentPortal(SelectDropdownComponent, this.viewContainerRef);
+            const componentRef = this.overlayRef.attach(portal);
+            componentRef.instance.options = this.options;
+            componentRef.instance.selectedOptionIds = this.selectedOptionIds;
+            componentRef.instance.useFilter = this.useFilter;
+            componentRef.instance.multiselect = this.multiselect;
+            componentRef.instance.atLeastOne = this.atLeastOne;
+            componentRef.instance.asButton = this.asButton;
+            componentRef.instance.selectedChange.subscribe((selectedOptionIds) => {
+                this.selectedChange.emit(selectedOptionIds);
+                this.selectedOptionIds = selectedOptionIds;
+                this.onChange(this.getSelectedValue());
+                if (!this.multiselect) {
+                    this.isDropdownOpen.set(false);
+                    this.overlayRef?.detach();
+                }
+            });
+            this.isDropdownOpen.set(true);
+        }
+        else {
+            this.isDropdownOpen.set(false);
+            this.overlayRef.detach();
+        }
+    }
+    onKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (event.key === 'Enter') {
+        }
+    }
+    onDeselectOption(event, option) {
+        if (this.disabled) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        this.selectedOptionIds = this.selectedOptionIds.filter((selected) => selected !== (option.id || option.value));
+        this.onChange(this.getSelectedValue());
+        this.selectedChange.emit(this.selectedOptionIds);
+        this.isDropdownOpen.set(false);
+    }
+    getSelectedValue() {
+        if (!this.multiselect) {
+            if (this.selectedOptionIds.length > 0) {
+                return this.selectedOptionIds[0];
+            }
+            else {
+                return null;
+            }
+        }
+        else {
+            return this.selectedOptionIds;
+        }
+    }
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (Array.isArray(value)) {
+            this.selectedOptionIds = value;
+        }
+        else {
+            this.selectedOptionIds = [value];
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngAfterViewInit() {
+        // hide label if no content.
+        if (!this.label.nativeElement.innerText.trim()) {
+            this.label.nativeElement.style.display = 'none';
+        }
+    }
+    constructor() {
+        this.translateService
+            .selectTranslate('ui.select.Select...', {}, 'haloduck')
+            .subscribe((translation) => {
+            if (!this.placeholder || this.placeholder === '') {
+                this.placeholder = translation;
+            }
+        });
+    }
+    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", 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 }], ngImport: i0, template: "<div class=\"flex flex-col gap-2 items-start w-full\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control w-full\">\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 && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; 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 && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.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        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-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 selector=\"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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-select', imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                        provideTranslocoScope('haloduck'),
+                    ], template: "<div class=\"flex flex-col gap-2 items-start w-full\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control w-full\">\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 && selectedOptions && selectedOptions.length > 0) {\n        @if (multiselect) {\n        <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n          @for (option of selectedOptions; 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 && selectedOptions.length > 1) {\n          <span class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\">\n            +{{ selectedOptions.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        }\">{{ selectedOptions[0].value }}</span>\n        }\n        } @else {\n        <span class=\"text-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 selector=\"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" }]
+        }], ctorParameters: () => [], propDecorators: { selectedChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], asButton: [{
+                type: Input
+            }], useIcon: [{
+                type: Input
+            }], useFilter: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], atLeastOne: [{
+                type: Input
+            }], showAll: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], origin: [{
+                type: ViewChild,
+                args: ['origin', { static: false }]
+            }], label: [{
+                type: ViewChild,
+                args: ['label']
+            }] } });
+
+class CalendarComponent {
+    translateService = inject(TranslocoService);
+    monthSelect;
+    singleDate = false;
+    firstDayOfWeek = 1; // monday
+    selectedDate;
+    selectedDateRange;
+    dateChange = new EventEmitter();
+    dateRangeChange = new EventEmitter();
+    currentYear = new Date().getFullYear();
+    currentMonth = new Date().getMonth();
+    listCalendarDate = [];
+    isFromSelected = false;
+    yearList = [];
+    monthList = [];
+    onAdjustYear(amount) {
+        this.currentYear += amount;
+        this.calculateDateRangeDropdown();
+    }
+    onAdjustMonth(amount) {
+        this.currentMonth += amount;
+        if (this.currentMonth < 0) {
+            this.currentYear--;
+            this.currentMonth = 11;
+        }
+        else if (this.currentMonth > 11) {
+            this.currentYear++;
+            this.currentMonth = 0;
+        }
+        this.calculateDateRangeDropdown();
+    }
+    onSelectCalendarDate(date) {
+        if (this.singleDate) {
+            this.dateChange.emit(date);
+        }
+        else {
+            if (!this.isFromSelected) {
+                this.selectedDateRange = {
+                    from: date.datetime,
+                    to: date.datetime,
+                };
+                this.isFromSelected = true;
+            }
+            else {
+                if (this.selectedDateRange?.from) {
+                    const from = this.selectedDateRange.from < date.datetime
+                        ? this.selectedDateRange.from
+                        : date.datetime;
+                    const to = this.selectedDateRange.from < date.datetime
+                        ? date.datetime
+                        : this.selectedDateRange.from;
+                    this.dateRangeChange.emit({
+                        from,
+                        to,
+                    });
+                    this.isFromSelected = false;
+                }
+            }
+        }
+    }
+    onCalenderOpen(value) {
+        // const currentDate = (this.singleDate) ? () : ( value && value.from && value.to ? value.from :dateToString(new Date()));
+        let currentDate;
+        if (this.singleDate) {
+            const date = value;
+            currentDate = date ? date : dateToString(new Date());
+        }
+        else {
+            const dateRange = value;
+            currentDate =
+                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;
+        this.calculateDateRangeDropdown();
+    }
+    calculateDateRangeDropdown() {
+        const weekdayOfFirstOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
+        const firstOfCalendar = new Date(this.currentYear, this.currentMonth, 1 - weekdayOfFirstOfMonth + this.firstDayOfWeek);
+        if (firstOfCalendar > new Date(this.currentYear, this.currentMonth, 1)) {
+            firstOfCalendar.setDate(firstOfCalendar.getDate() - 7);
+        }
+        const lastOfCalendar = new Date(firstOfCalendar);
+        lastOfCalendar.setDate(lastOfCalendar.getDate() + 41);
+        if (lastOfCalendar.getDate() > 6) {
+            lastOfCalendar.setDate(lastOfCalendar.getDate() - 7);
+        }
+        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);
+            const date = firstOfCalendar.getDate().toString();
+            const isToday = firstOfCalendar.toDateString() === new Date().toDateString();
+            const isCurrentMonth = firstOfCalendar.getMonth() === this.currentMonth;
+            const isTheDate = (this.singleDate && this.selectedDate
+                ? datetime === this.selectedDate
+                : this.selectedDateRange &&
+                    this.selectedDateRange.from &&
+                    this.selectedDateRange.to &&
+                    datetime >= this.selectedDateRange.from &&
+                    datetime <= this.selectedDateRange.to) || false;
+            this.listCalendarDate.push({
+                datetime,
+                date,
+                isToday,
+                isTheDate,
+                isCurrentMonth,
+            });
+            firstOfCalendar.setDate(firstOfCalendar.getDate() + 1);
+        }
+    }
+    onSelectYear(year) {
+        year = year;
+        this.currentYear = parseInt(year, 10);
+        this.calculateDateRangeDropdown();
+    }
+    onSelectMonth(month) {
+        month = month;
+        this.currentMonth = parseInt(month, 10);
+        this.calculateDateRangeDropdown();
+    }
+    ngOnInit() {
+        if (this.singleDate) {
+            this.onCalenderOpen(this.selectedDate ?? dateToString(new Date()));
+        }
+        else {
+            this.onCalenderOpen(this.selectedDateRange ?? {
+                from: dateToString(new Date()),
+                to: dateToString(new Date()),
+            });
+        }
+    }
+    constructor() {
+        const currentYear = new Date().getFullYear();
+        this.translateService
+            .selectTranslate('ui.calendar._year_', { year: '_year_' }, 'haloduck')
+            .pipe(takeUntilDestroyed())
+            .subscribe((translation) => {
+            this.yearList = [];
+            for (let i = currentYear; i >= currentYear - 150; i--) {
+                this.yearList.push({
+                    id: i.toString(),
+                    value: translation.replace('_year_', i.toString()),
+                });
+            }
+        });
+        zip(this.translateService.selectTranslate('ui.calendar.January', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.February', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.March', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.April', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.May', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.June', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.July', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.August', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.September', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.October', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.November', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.December', {}, 'haloduck'))
+            .pipe(takeUntilDestroyed())
+            .subscribe((translations) => {
+            this.monthList = [
+                {
+                    id: '0',
+                    value: translations[0],
+                },
+                {
+                    id: '1',
+                    value: translations[1],
+                },
+                {
+                    id: '2',
+                    value: translations[2],
+                },
+                {
+                    id: '3',
+                    value: translations[3],
+                },
+                {
+                    id: '4',
+                    value: translations[4],
+                },
+                {
+                    id: '5',
+                    value: translations[5],
+                },
+                {
+                    id: '6',
+                    value: translations[6],
+                },
+                {
+                    id: '7',
+                    value: translations[7],
+                },
+                {
+                    id: '8',
+                    value: translations[8],
+                },
+                {
+                    id: '9',
+                    value: translations[9],
+                },
+                {
+                    id: '10',
+                    value: translations[10],
+                },
+                {
+                    id: '11',
+                    value: translations[11],
+                },
+            ];
+        });
+    }
+    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", "value"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.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" }]
+        }], ctorParameters: () => [], propDecorators: { monthSelect: [{
+                type: ViewChild,
+                args: ['monthSelect', { static: false }]
+            }], singleDate: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], selectedDateRange: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], dateRangeChange: [{
+                type: Output
+            }] } });
+// return yyyy-mm-dd
+function dateToString(date) {
+    return (date.getFullYear() +
+        '-' +
+        (date.getMonth() + 1).toString().padStart(2, '0') +
+        '-' +
+        date.getDate().toString().padStart(2, '0'));
+}
+
+class DialogContainerComponent {
+    childComponent;
+    data;
+    close = new EventEmitter();
+    dialogContainer;
+    ngAfterViewInit() {
+        if (this.childComponent) {
+            const componentRef = this.dialogContainer.createComponent(this.childComponent);
+            if (this.data) {
+                Object.assign(componentRef.instance, { context: this.data });
+            }
+            if (this.data.classList) {
+                this.data.classList.forEach((className) => {
+                    componentRef.location.nativeElement.classList.add(className);
+                });
+            }
+            componentRef.location.nativeElement.classList.add('max-w-full');
+            componentRef.location.nativeElement.classList.add('max-h-full');
+            componentRef.location.nativeElement.classList.add('text-light-on-background');
+            componentRef.location.nativeElement.classList.add('dark:text-dark-on-background');
+            componentRef.location.nativeElement.classList.add('bg-light-background');
+            componentRef.location.nativeElement.classList.add('dark:bg-dark-background');
+            componentRef.location.nativeElement.classList.add('p-4');
+            componentRef.location.nativeElement.classList.add('rounded-lg');
+            componentRef.location.nativeElement.classList.add('overflow-auto');
+        }
+    }
+    ngOnInit() { }
+    closeDialog() {
+        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"] });
+}
+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"] }]
+        }], propDecorators: { childComponent: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], dialogContainer: [{
+                type: ViewChild,
+                args: ['dialogContainer', { read: ViewContainerRef }]
+            }] } });
+
+class DialogService {
+    overlay;
+    injector;
+    dialogStack = []; // 다이얼로그 스택
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    open(component, data, classList) {
+        const overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            panelClass: 'custom-dialog-panel',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+        });
+        const portal = new ComponentPortal(DialogContainerComponent);
+        const containerRef = overlayRef.attach(portal);
+        containerRef.instance.childComponent = component;
+        containerRef.instance.data = { ...data, overlayRef, classList };
+        containerRef.instance.close.subscribe(() => this.close(overlayRef));
+        this.dialogStack.push(overlayRef);
+        return overlayRef;
+    }
+    close(overlayRef) {
+        if (overlayRef) {
+            overlayRef.dispose();
+            this.dialogStack = this.dialogStack.filter(ref => ref !== overlayRef);
+        }
+        else {
+            // 마지막 다이얼로그 닫기
+            const lastOverlay = this.dialogStack.pop();
+            lastOverlay?.dispose();
+        }
+    }
+    closeAll() {
+        while (this.dialogStack.length) {
+            this.dialogStack.pop()?.dispose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogService, deps: [{ token: i1$3.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.Injector }] });
+
+class ConfirmDialogComponent {
+    dialogService = inject(DialogService);
+    context;
+    onButtonClicked(id) {
+        this.context.clickedButton$.next(id);
+        this.context.clickedButton$.complete();
+        this.dialogService.close(this.context.overlayRef);
+    }
+    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"] }] });
+}
+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" }]
+        }], ctorParameters: () => [], propDecorators: { context: [{
+                type: Input
+            }] } });
+
+class ConfirmDialogService {
+    dialogService = inject(DialogService);
+    clickedButton$;
+    confirm(title, message, buttons) {
+        this.clickedButton$ = new Subject();
+        const dialogRef = this.dialogService.open(ConfirmDialogComponent, {
+            title,
+            message,
+            buttons,
+            clickedButton$: this.clickedButton$,
+        });
+        return this.clickedButton$.asObservable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfirmDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfirmDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConfirmDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CopyButtonComponent {
+    text = '';
+    isAnimating = false;
+    copyToClipboard($event) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.isAnimating = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+        }, 500); // Animation duration
+        if (navigator.clipboard && window.isSecureContext) {
+            navigator.clipboard
+                .writeText(this.text)
+                .then(() => {
+                console.log('Text copied to clipboard');
+            })
+                .catch((err) => {
+                console.error('Failed to copy text: ', err);
+            });
+        }
+        else {
+            const textArea = document.createElement('textarea');
+            textArea.value = this.text;
+            textArea.style.position = 'fixed'; // Avoid scrolling to bottom
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            try {
+                document.execCommand('copy');
+                console.log('Text copied to clipboard');
+            }
+            catch (err) {
+                console.error('Failed to copy text: ', err);
+            }
+            document.body.removeChild(textArea);
+        }
+    }
+    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: i1$2.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" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }] } });
+
+class DatePickerComponent {
+    destroy$ = new Subject();
+    translateService = inject(TranslocoService);
+    overlay = inject(Overlay);
+    disabled = false;
+    placeholder = '';
+    firstDayOfWeek = 1;
+    origin;
+    selectedDate;
+    overlayRef;
+    onClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.openCalendar();
+    }
+    onDateChange(date) {
+        this.selectedDate = date.datetime;
+        this.onChange(this.selectedDate);
+    }
+    openCalendar() {
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.origin.nativeElement)
+                    .withPositions([
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+            });
+            const calendarPortal = new ComponentPortal(CalendarComponent);
+            const componentRef = this.overlayRef.attach(calendarPortal);
+            // Pass values directly to the CalendarComponent instance
+            componentRef.instance.firstDayOfWeek = this.firstDayOfWeek;
+            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) => {
+                this.onDateChange(date);
+                this.closeCalendar();
+            });
+            // Handle clicks outside the overlay
+            this.overlayRef
+                .backdropClick()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.closeCalendar();
+            });
+        }
+    }
+    closeCalendar() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef = undefined;
+        }
+    }
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.selectedDate = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    constructor() {
+        this.translateService
+            .selectTranslate('ui.calendar.Pick a date.', {}, 'haloduck')
+            .pipe(takeUntilDestroyed())
+            .subscribe((translation) => {
+            if (!this.placeholder || this.placeholder === '') {
+                this.placeholder = translation;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DatePickerComponent, isStandalone: true, selector: "haloduck-date-picker", inputs: { disabled: "disabled", placeholder: "placeholder", firstDayOfWeek: "firstDayOfWeek" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-date-picker', imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            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" }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], origin: [{
+                type: ViewChild,
+                args: ['origin', { static: false }]
+            }] } });
+
+class DateRangeComponent {
+    destroy$ = new Subject();
+    translateService = inject(TranslocoService);
+    overlay = inject(Overlay);
+    dateRangeOptions = [];
+    disabled = false;
+    placeholder = '';
+    firstDayOfWeek = 1;
+    origin;
+    selectedDateRangeOptionId;
+    dateRange = undefined;
+    overlayRef;
+    getSelectedDateRangeString() {
+        return (this.dateRange &&
+            this.dateRange.from &&
+            this.dateRange.to &&
+            this.dateRange.from + ' ~ ' + this.dateRange.to);
+    }
+    onClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.openCalendar();
+    }
+    onDateRangeOptionChange(selectedOptionId) {
+        this.selectedDateRangeOptionId = selectedOptionId;
+        if (this.selectedDateRangeOptionId !== 'custom') {
+            this.calculateDateRange();
+        }
+        else {
+            this.openCalendar();
+        }
+    }
+    onDateRangeChange(dateRange) {
+        this.dateRange = dateRange;
+        this.selectedDateRangeOptionId = 'custom';
+        this.onChange(this.dateRange);
+    }
+    calculateDateRange() {
+        if (!this.selectedDateRangeOptionId) {
+        }
+        else if (this.selectedDateRangeOptionId !== 'custom') {
+            const unit = this.selectedDateRangeOptionId.charAt(0);
+            const amount = parseInt(this.selectedDateRangeOptionId.slice(1), 10);
+            let from = new Date();
+            let to = new Date();
+            switch (unit) {
+                case 'd':
+                    from = new Date(to);
+                    from.setDate(to.getDate() - amount);
+                    break;
+                case 'm':
+                    from = new Date(to);
+                    from.setMonth(to.getMonth() - amount);
+                    break;
+                case 'y':
+                    from = new Date(to);
+                    from.setFullYear(to.getFullYear() - amount);
+                    break;
+                default:
+                    break;
+            }
+            this.dateRange = {
+                from: dateToString(from),
+                to: dateToString(to),
+            };
+            this.onChange(this.dateRange);
+        }
+    }
+    getDateRangeOptionId(dateRange) {
+        const selectedOption = this.dateRangeOptions.find((option) => {
+            const unit = (option.id || option.value).charAt(0);
+            const amount = parseInt((option.id || option.value).slice(1), 10);
+            let from = new Date();
+            let to = new Date();
+            switch (unit) {
+                case 'd':
+                    from = new Date(to);
+                    from.setDate(to.getDate() - amount);
+                    break;
+                case 'm':
+                    from = new Date(to);
+                    from.setMonth(to.getMonth() - amount);
+                    break;
+                case 'y':
+                    from = new Date(to);
+                    from.setFullYear(to.getFullYear() - amount);
+                    break;
+                default:
+                    break;
+            }
+            return (dateRange.from === dateToString(from) &&
+                dateRange.to === dateToString(to));
+        });
+        if (selectedOption) {
+            return selectedOption.id || selectedOption.value;
+        }
+        return 'custom';
+    }
+    openCalendar() {
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.origin.nativeElement)
+                    .withPositions([
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+            });
+            const calendarPortal = new ComponentPortal(CalendarComponent);
+            const componentRef = this.overlayRef.attach(calendarPortal);
+            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) => {
+                this.onDateRangeChange(date);
+                this.closeCalendar();
+            });
+            // Handle clicks outside the overlay
+            this.overlayRef
+                .backdropClick()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.closeCalendar();
+            });
+        }
+    }
+    closeCalendar() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef = undefined;
+        }
+    }
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.dateRange = value;
+        if (!value) {
+            this.selectedDateRangeOptionId = undefined;
+        }
+        else {
+            this.selectedDateRangeOptionId = this.getDateRangeOptionId(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        console.log('DateRangeComponent ngOnInit', this.dateRangeOptions);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    constructor() {
+        this.translateService
+            .selectTranslate('ui.calendar.Pick a period.', {}, 'haloduck')
+            .pipe(takeUntilDestroyed())
+            .subscribe((translation) => {
+            if (!this.placeholder || this.placeholder === '') {
+                this.placeholder = translation;
+            }
+        });
+        console.log('DateRangeComponent constructor', this.dateRangeOptions);
+        zip(this.translateService.selectTranslate('ui.calendar.today', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.yesterday', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.2 Days ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.3 Days ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.a week ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.15 Days ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.a month ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.2 months ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.3 months ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.6 months ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.a year ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.pick manually', {}, 'haloduck'))
+            .pipe(takeUntilDestroyed())
+            .subscribe(([today, yesterday, twoDaysAgo, threeDaysAgo, aWeekAgo, fifteenDaysAgo, aMonthAgo, twoMonthsAgo, threeMonthsAgo, sixMonthsAgo, aYearAgo, pickManually,]) => {
+            if (this.dateRangeOptions.length === 0) {
+                this.dateRangeOptions = [
+                    {
+                        id: 'd0',
+                        value: today,
+                    },
+                    {
+                        id: 'd1',
+                        value: yesterday,
+                    },
+                    {
+                        id: 'd2',
+                        value: twoDaysAgo,
+                    },
+                    {
+                        id: 'd3',
+                        value: threeDaysAgo,
+                    },
+                    {
+                        id: 'd7',
+                        value: aWeekAgo,
+                    },
+                    {
+                        id: 'd15',
+                        value: fifteenDaysAgo,
+                    },
+                    {
+                        id: 'm1',
+                        value: aMonthAgo,
+                    },
+                    {
+                        id: 'm2',
+                        value: twoMonthsAgo,
+                    },
+                    {
+                        id: 'm3',
+                        value: threeMonthsAgo,
+                    },
+                    {
+                        id: 'm6',
+                        value: sixMonthsAgo,
+                    },
+                    {
+                        id: 'y1',
+                        value: aYearAgo,
+                    },
+                    {
+                        id: 'custom',
+                        value: pickManually,
+                    },
+                ];
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: DateRangeComponent, isStandalone: true, selector: "haloduck-date-range", inputs: { dateRangeOptions: "dateRangeOptions", disabled: "disabled", placeholder: "placeholder", firstDayOfWeek: "firstDayOfWeek" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => 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", "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: i1$2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-date-range', imports: [SelectComponent, CommonModule, FormsModule, TranslocoModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateRangeComponent),
+                            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" }]
+        }], ctorParameters: () => [], propDecorators: { dateRangeOptions: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], origin: [{
+                type: ViewChild,
+                args: ['origin', { static: false }]
+            }] } });
+
+class DrawCanvasComponent {
+    imagePath;
+    lineColor = '#DD0000'; // Default color is black
+    canvasRef;
+    ctx;
+    isDrawing = false;
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        const canvas = this.canvasRef.nativeElement;
+        this.ctx = canvas.getContext('2d');
+        this.ctx.strokeStyle = this.lineColor; // Set the initial line color
+        this.loadImage();
+        this.setupCanvas();
+    }
+    loadImage() {
+        console.log(this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height, this.canvasRef.nativeElement.getBoundingClientRect());
+        const image = new Image();
+        image.src = this.imagePath;
+        image.onload = () => {
+            this.ctx.drawImage(image, 0, 0, this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height);
+        };
+    }
+    setupCanvas() {
+        const canvas = this.canvasRef.nativeElement;
+        // Mouse events
+        canvas.addEventListener('mousedown', (event) => this.startMouseDrawing(event));
+        canvas.addEventListener('mousemove', (event) => this.mouseDraw(event));
+        canvas.addEventListener('mouseup', () => this.stopDrawing());
+        canvas.addEventListener('mouseleave', () => this.stopDrawing());
+        // Touch events
+        canvas.addEventListener('touchstart', (event) => this.startTouchDrawing(event));
+        canvas.addEventListener('touchmove', (event) => {
+            event.preventDefault(); // Prevent scrolling
+            this.touchDraw(event);
+        });
+        canvas.addEventListener('touchend', () => this.stopDrawing());
+        canvas.addEventListener('touchcancel', () => this.stopDrawing());
+    }
+    startMouseDrawing(event) {
+        const rect = this.canvasRef.nativeElement.getBoundingClientRect();
+        this.isDrawing = true;
+        this.ctx.beginPath();
+        this.ctx.moveTo(event.offsetX * (this.canvasRef.nativeElement.width / rect.width), event.offsetY * (this.canvasRef.nativeElement.height / rect.height));
+    }
+    mouseDraw(event) {
+        const rect = this.canvasRef.nativeElement.getBoundingClientRect();
+        if (!this.isDrawing)
+            return;
+        this.ctx.lineTo(event.offsetX * (this.canvasRef.nativeElement.width / rect.width), event.offsetY * (this.canvasRef.nativeElement.height / rect.height));
+        this.ctx.stroke();
+    }
+    startTouchDrawing(event) {
+        this.isDrawing = true;
+        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));
+    }
+    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.stroke();
+    }
+    stopDrawing() {
+        this.isDrawing = false;
+        this.ctx.closePath();
+        this.saveDrawing();
+    }
+    saveDrawing() {
+        const canvas = this.canvasRef.nativeElement;
+        const dataUrl = canvas.toDataURL('image/png');
+        // Convert data URL to Blob
+        const blob = this.dataURLToBlob(dataUrl);
+        const file = new File([blob], 'teeth.png', { type: 'image/png' });
+        // Emit the file value to the form control
+        this.onChange(file);
+    }
+    dataURLToBlob(dataUrl) {
+        const byteString = atob(dataUrl.split(',')[1]);
+        const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
+        const buffer = new ArrayBuffer(byteString.length);
+        const dataView = new Uint8Array(buffer);
+        for (let i = 0; i < byteString.length; i++) {
+            dataView[i] = byteString.charCodeAt(i);
+        }
+        return new Blob([buffer], { type: mimeString });
+    }
+    // ControlValueAccessor methods
+    writeValue(file) {
+        // No-op: The component does not need to set the file value directly
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        const canvas = this.canvasRef.nativeElement;
+        canvas.style.pointerEvents = isDisabled ? 'none' : 'auto';
+    }
+    onReset() {
+        this.loadImage();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DrawCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DrawCanvasComponent, isStandalone: true, selector: "haloduck-draw-canvas", inputs: { imagePath: "imagePath", lineColor: "lineColor" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => 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: i1$2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DrawCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-draw-canvas', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DrawCanvasComponent),
+                            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"] }]
+        }], propDecorators: { imagePath: [{
+                type: Input
+            }], lineColor: [{
+                type: Input
+            }], canvasRef: [{
+                type: ViewChild,
+                args: ['canvas', { static: true }]
+            }] } });
+
+const ERROR_NOT_ACCEPTABLE_FILE_TYPE = 'NOT_ACCEPTABLE_FILE_TYPE';
+const ERROR_OVER_SIZE = 'OVER_SIZE';
+const ERROR_OVER_COUNT = 'OVER_COUNT';
+const ERROR_UPLOAD = 'UPLOAD';
+class FileUploaderComponent {
+    disabled = false;
+    urlPrefix;
+    keyPrefix;
+    uploadApi;
+    multiple = true;
+    maxCount = 0;
+    maxSize = 0;
+    accept = [''];
+    filesAdded = new EventEmitter();
+    fileRemoved = new EventEmitter();
+    error = new EventEmitter();
+    cdr = inject(ChangeDetectorRef);
+    zone = inject(NgZone);
+    files = [];
+    isUploading = false;
+    isDragOver = false;
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(files) {
+        this.files = files || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files) {
+            const selectedFiles = this.multiple
+                ? Array.from(input.files)
+                : [input.files[0]];
+            this.addFiles(selectedFiles);
+        }
+        this.onTouched();
+    }
+    removeFile(index) {
+        const removedFile = this.files[index];
+        this.files.splice(index, 1);
+        this.fileRemoved.emit(removedFile);
+        this.onChange(this.files);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragOver = true;
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+        if (event.dataTransfer?.files) {
+            const droppedFiles = this.multiple
+                ? Array.from(event.dataTransfer.files)
+                : [event.dataTransfer.files[0]];
+            this.addFiles(droppedFiles);
+        }
+        this.onTouched();
+    }
+    getFilePreview(file) {
+        return file.previewUrl || ''; // Return the precomputed preview URL
+    }
+    addFiles(addedFiles) {
+        const notAcceptedFiles = [];
+        let filteredFiles = addedFiles.filter((file) => {
+            const acceptableFileType = this.isAcceptableFileType(file);
+            const acceptableFileSize = this.maxSize > 0 ? file.size <= this.maxSize : true;
+            if (!acceptableFileType) {
+                notAcceptedFiles.push({ error: ERROR_NOT_ACCEPTABLE_FILE_TYPE, file });
+            }
+            if (!acceptableFileSize) {
+                notAcceptedFiles.push({ error: ERROR_OVER_SIZE, file });
+            }
+            return acceptableFileType && acceptableFileSize;
+        });
+        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,
+                    file: filteredFiles[i - this.files.length],
+                });
+            }
+            filteredFiles = filteredFiles.splice(this.files.length + filteredFiles.length - this.maxCount);
+        }
+        if (notAcceptedFiles.length > 0) {
+            this.error.emit(notAcceptedFiles);
+        }
+        // Compute preview URLs for the new files
+        filteredFiles.forEach((file) => {
+            if (file.type.startsWith('image')) {
+                file.previewUrl = URL.createObjectURL(file);
+            }
+        });
+        this.files = this.files.concat(filteredFiles);
+        this.filesAdded.emit(filteredFiles);
+        this.onChange(this.files);
+    }
+    isAcceptableFileType(file) {
+        // Check if the file type is acceptable
+        return this.accept.some((type) => {
+            if (type.startsWith('.')) {
+                // Check if the file type matches any of the accepted types
+                return file.name.endsWith(type);
+            }
+            else if (type.includes('/')) {
+                if (type.includes('/*')) {
+                    // Check if the file type matches the wildcard MIME type
+                    return file.type.startsWith(type.split('/')[0]);
+                }
+                else {
+                    // Check if the file type matches the specific MIME type
+                    return file.type === type;
+                }
+            }
+            else {
+                return file.type === type;
+            }
+        });
+    }
+    startUpload() {
+        // Placeholder for upload logic
+        this.isUploading = true;
+        const uploadTrigger$ = [];
+        this.files.forEach((file) => {
+            file.isUploading = true;
+            file.isUploaded = false;
+            uploadTrigger$.push(this.uploadApi(file, this.keyPrefix).pipe(
+            // Handle the upload API response
+            tap((key) => {
+                file.isUploading = false;
+                file.isUploaded = true;
+                file.key = key;
+            })));
+        });
+        // Wait for all uploads to complete
+        return combineLatest(uploadTrigger$).pipe(switchMap((keys) => {
+            this.files.forEach((file) => {
+                if ('' === file.key) {
+                    this.isUploading = false;
+                    file.isUploaded = false;
+                    this.error.emit([{ error: ERROR_UPLOAD, file }]);
+                }
+            });
+            this.onChange(this.files);
+            this.onTouched();
+            return of(this.files);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FileUploaderComponent, isStandalone: true, selector: "haloduck-file-uploader", inputs: { disabled: "disabled", urlPrefix: "urlPrefix", keyPrefix: "keyPrefix", uploadApi: "uploadApi", multiple: "multiple", maxCount: "maxCount", maxSize: "maxSize", accept: "accept" }, outputs: { filesAdded: "filesAdded", fileRemoved: "fileRemoved", error: "error" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => 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: i1$2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FileUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-file-uploader', imports: [CommonModule, TranslocoModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FileUploaderComponent),
+                            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" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], urlPrefix: [{
+                type: Input
+            }], keyPrefix: [{
+                type: Input
+            }], uploadApi: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], maxCount: [{
+                type: Input
+            }], maxSize: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], filesAdded: [{
+                type: Output
+            }], fileRemoved: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }] } });
+
+class FlipComponent {
+    title = '';
+    set isOpen(value) {
+        this._isOpen.set(value);
+    }
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    toggle() {
+        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-inactive/20 dark:bg-dark-inactive/20 p-2 flex flex-col gap-2\">\n  <label class=\"text-sm text-light-on-inactive dark:text-dark-on-inactive\">{{ 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-white\"\n          (click)=\"toggle()\">\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: [""] });
+}
+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-inactive/20 dark:bg-dark-inactive/20 p-2 flex flex-col gap-2\">\n  <label class=\"text-sm text-light-on-inactive dark:text-dark-on-inactive\">{{ 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-white\"\n          (click)=\"toggle()\">\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" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }] } });
+
+class ImageViewerComponent {
+    context;
+    imageUrl = '';
+    imageAlt = '';
+    dialogService = inject(DialogService);
+    onClose() {
+        if (this.context?.overlayRef) {
+            this.dialogService.close(this.context.overlayRef);
+        }
+    }
+    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: [""] });
+}
+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()\" />" }]
+        }], propDecorators: { context: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], imageAlt: [{
+                type: Input
+            }] } });
+
+// 전역 변수로 드래그 데이터를 임시 저장
+let draggedBase64File = null;
+let originDrag = null;
+class ImageUploaderComponent {
+    disabled = false;
+    id;
+    alt;
+    urlPrefix;
+    keyPrefix;
+    uploadApi;
+    backgroundImage;
+    shouldPassToSibling = false;
+    passToSibling = new EventEmitter();
+    fileAdded = new EventEmitter();
+    fileRemoved = new EventEmitter();
+    error = new EventEmitter();
+    imageUrl = null;
+    file = null;
+    isDragOver = false;
+    isUploading = false;
+    dialogService = inject(DialogService);
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(key) {
+        if (!key) {
+            this.imageUrl = null;
+            return;
+        }
+        this.imageUrl = `${this.urlPrefix}/${key}`;
+        this.file = null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    startUpload() {
+        // Placeholder for upload logic
+        if (!this.file) {
+            return new Observable();
+        }
+        this.isUploading = true;
+        this.file.isUploading = true;
+        this.file.isUploaded = false;
+        return this.uploadApi(this.file, this.keyPrefix).pipe(switchMap((key) => {
+            if (this.file) {
+                this.file.isUploading = false;
+                this.file.isUploaded = true;
+                this.file.key = key;
+            }
+            return of(this.file);
+        }));
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files[0]) {
+            const listFile = Array.from(input.files);
+            this.setFiles(listFile);
+        }
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+        if (event.dataTransfer?.files && event.dataTransfer.files[0]) {
+            const listFile = Array.from(event.dataTransfer.files);
+            this.setFiles(listFile);
+        }
+        else if (draggedBase64File) {
+            if (this.file) {
+                originDrag?.setFiles([this.file]); // 타켓에 파일이 있을 경우 원래 드래그한 컴포넌트에 파일 전달
+            }
+            else {
+                originDrag?.removeImage();
+            }
+            fetch(draggedBase64File)
+                .then((res) => res.blob())
+                .then((blob) => {
+                const file = new File([blob], 'dropped-file', { type: blob.type });
+                this.setFiles([file]);
+            });
+            draggedBase64File = null; // 전역 변수 초기화
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragOver = true;
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+    }
+    onDragStart(event) {
+        if (event.target instanceof HTMLImageElement) {
+            const img = event.target;
+            if (img.id && this.file) {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const base64File = reader.result;
+                    draggedBase64File = base64File; // 전역 변수에 저장
+                    originDrag = this; // 드래그 시작한 컴포넌트 저장
+                    if (event.dataTransfer) {
+                        event.dataTransfer.setData('text/plain', 'dragged-file'); // 최소한의 데이터 설정
+                    }
+                };
+                reader.readAsDataURL(this.file);
+            }
+        }
+    }
+    onDragEnd(event) {
+        draggedBase64File = null;
+        originDrag = null;
+    }
+    removeImage() {
+        const removedFile = this.file;
+        this.imageUrl = null;
+        this.file = null;
+        this.fileRemoved.emit(removedFile);
+        this.onChange(null); // Notify form control
+    }
+    setFiles(listFile) {
+        listFile = listFile.filter((file) => {
+            const isValid = file.type.startsWith('image/');
+            if (!isValid) {
+                console.error('Invalid file type:', file.type);
+            }
+            return isValid;
+        });
+        this.file = listFile[0];
+        this.imageUrl = URL.createObjectURL(listFile[0]);
+        if (listFile.length > 1 && this.shouldPassToSibling) {
+            listFile.shift();
+            this.passToSibling.emit(listFile);
+        }
+        this.fileAdded.emit(this.file);
+        this.onChange(this.file.name);
+        this.onTouched();
+    }
+    previewImage(imageUrl) {
+        this.dialogService.open(ImageViewerComponent, {
+            imageUrl,
+            imageAlt: this.alt,
+        });
+    }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImageUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ImageUploaderComponent, isStandalone: true, selector: "haloduck-image-uploader", inputs: { disabled: "disabled", id: "id", alt: "alt", urlPrefix: "urlPrefix", keyPrefix: "keyPrefix", uploadApi: "uploadApi", backgroundImage: "backgroundImage", shouldPassToSibling: "shouldPassToSibling" }, outputs: { passToSibling: "passToSibling", fileAdded: "fileAdded", fileRemoved: "fileRemoved", error: "error" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => 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: i1$2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ImageUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-image-uploader', imports: [CommonModule, TranslocoModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ImageUploaderComponent),
+                            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"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], urlPrefix: [{
+                type: Input
+            }], keyPrefix: [{
+                type: Input
+            }], uploadApi: [{
+                type: Input
+            }], backgroundImage: [{
+                type: Input
+            }], shouldPassToSibling: [{
+                type: Input
+            }], passToSibling: [{
+                type: Output
+            }], fileAdded: [{
+                type: Output
+            }], fileRemoved: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }] } });
+
+class LanguageSelectorOptionComponent {
+    languageSelected = new EventEmitter();
+    translateService = inject(TranslocoService);
+    selectLanguage(language) {
+        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 }] });
+}
+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" }]
+        }], propDecorators: { languageSelected: [{
+                type: Output
+            }] } });
+
+class LanguageSelectorComponent {
+    origin;
+    destroy$ = new Subject();
+    translateService = inject(TranslocoService);
+    overlay = inject(Overlay);
+    language = signal(this.translateService.getActiveLang(), ...(ngDevMode ? [{ debugName: "language" }] : []));
+    overlayRef;
+    showLanguageOptions() {
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.origin.nativeElement)
+                    .withPositions([
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+            });
+            const calendarPortal = new ComponentPortal(LanguageSelectorOptionComponent);
+            const componentRef = this.overlayRef.attach(calendarPortal);
+            // Pass values directly to the CalendarComponent instance
+            // componentRef.instance.firstDayOfWeek = this.firstDayOfWeek;
+            // componentRef.instance.singleDate = true;
+            // componentRef.instance.selectedDate = this.selectedDate;
+            // Subscribe to events emitted
+            componentRef.instance.languageSelected
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((language) => {
+                this.translateService.setActiveLang(language);
+                this.hideLanguageOptions();
+            });
+            // Handle clicks outside the overlay
+            this.overlayRef
+                .backdropClick()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.hideLanguageOptions();
+            });
+        }
+    }
+    hideLanguageOptions() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef = undefined;
+        }
+    }
+    ngOnInit() {
+        this.translateService.langChanges$
+            .pipe(distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe((lang) => {
+            this.language.set(lang);
+        });
+    }
+    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: [""] });
+}
+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" }]
+        }], propDecorators: { origin: [{
+                type: ViewChild,
+                args: ['origin', { static: false }]
+            }] } });
+
+class MapToAddressComponent {
+    coreService = inject(CoreService);
+    mapId = this.coreService.getMapId();
+    defaultLngLat = this.coreService.getDefaultLngLat();
+    disabled = false;
+    currentLngLat;
+    _currentAddress;
+    set currentAddress(value) {
+        if (value) {
+            this._currentAddress = value;
+            this.setMapToAddress();
+        }
+    }
+    locationChanged = new EventEmitter();
+    map;
+    marker;
+    location;
+    onChange = () => { };
+    onTouched = () => { };
+    async ngOnInit() {
+        await this.initScript();
+        this.initMap();
+    }
+    initScript() {
+        return new Promise((resolve, reject) => {
+            if (typeof google !== 'undefined') {
+                resolve();
+                return;
+            }
+            const script = document.createElement('script');
+            script.src = `https://maps.googleapis.com/maps/api/js?key=${this.coreService.getGoogleApiKey()}&libraries=places,marker&loading=sync`;
+            script.async = false;
+            script.defer = true;
+            script.onload = () => resolve();
+            script.onerror = (error) => reject(error);
+            document.head.appendChild(script);
+            console.log('Google Maps script loaded', script);
+        });
+    }
+    initMap() {
+        if (this.currentLngLat) {
+            isDevMode() &&
+                console.log('Using provided location:', this.currentLngLat);
+            this.initializeMap(this.currentLngLat);
+        }
+        else {
+            navigator.geolocation.getCurrentPosition((position) => {
+                const currentLocation = {
+                    lat: position.coords.latitude,
+                    lng: position.coords.longitude,
+                };
+                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) {
+                    isDevMode() &&
+                        console.log('Unable to determine location. Using default location.:', this.defaultLngLat);
+                }
+                this.initializeMap(this.defaultLngLat);
+            });
+        }
+    }
+    initializeMap(lngLat) {
+        this.map = new google.maps.Map(document.getElementById('map'), {
+            center: lngLat,
+            zoom: 15,
+            mapId: this.mapId,
+        });
+        this.marker = new google.maps.marker.AdvancedMarkerElement({
+            position: lngLat,
+            map: this.map,
+            draggable: true,
+        });
+        // Listen for marker drag end to update address immediately
+        this.marker.addListener('dragend', () => {
+            const position = this.marker.position;
+            if (position) {
+                isDevMode() && console.log('Marker dragged to:', position.toJSON());
+                this.getAddress(); // Fetch address after dragging
+            }
+        });
+        this.map.addListener('click', (event) => this.onClick(event));
+        if (!this.currentLngLat) {
+            this.getAddress();
+        }
+    }
+    onClick(event) {
+        isDevMode() && console.log('Map clicked at:', event.latLng);
+        if (event.latLng) {
+            // 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());
+            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');
+        }
+    }
+    setMapToAddress() {
+        const geocoder = new google.maps.Geocoder();
+        geocoder.geocode({ address: this._currentAddress }, (results, status) => {
+            if (status === 'OK' && results[0]) {
+                const location = results[0].geometry.location;
+                isDevMode() && console.log('Geocoded location:', location.toJSON());
+                this.initializeMap(location.toJSON());
+            }
+            else {
+                isDevMode() && console.error('Geocoding failed:', status);
+            }
+        });
+    }
+    getAddress() {
+        const geocoder = new google.maps.Geocoder();
+        const position = this.marker.position;
+        if (!position) {
+            isDevMode() && console.error('Position update is unavailable');
+            return;
+        }
+        geocoder.geocode({ location: position }, (results, status) => {
+            isDevMode() && console.log('Geocoded results:', status, results);
+            if (status === 'OK' && results[0]) {
+                this.location = this.parseAddress(results);
+                this.locationChanged.emit(this.location);
+                this.onChange(this.location); // Notify the form control
+            }
+        });
+    }
+    parseAddress(results) {
+        return {
+            plusCode: this.getComponentLongName(results, 'plus_code'),
+            postalCode: this.getComponentLongName(results, 'postal_code'),
+            countryCode: this.getComponentShortName(results, 'country').toUpperCase(),
+            country: this.getComponentLongName(results, 'country'),
+            area1: this.getComponentLongName(results, 'administrative_area_level_1'),
+            area2: this.getComponentLongName(results, 'sublocality_level_1'),
+            area3: this.getComponentLongName(results, 'sublocality_level_2'),
+            formatted: results[0]?.formatted_address,
+            lat: results[0]?.geometry?.location?.lat(),
+            lng: results[0]?.geometry?.location?.lng(),
+        };
+    }
+    getComponentLongName(results, type) {
+        for (let i = 0; i < results.length; i++) {
+            const component = results[i].address_components.find((c) => c.types.includes(type));
+            if (component) {
+                return component.long_name;
+            }
+        }
+        return '';
+    }
+    getComponentShortName(results, type) {
+        for (let i = 0; i < results.length; i++) {
+            const component = results[i].address_components.find((c) => c.types.includes(type));
+            if (component) {
+                return component.short_name;
+            }
+        }
+        return '';
+    }
+    writeValue(value) {
+        if (value) {
+            this.location = value;
+            this.currentLngLat = { lat: value.lat, lng: value.lng };
+            this.initializeMap(this.currentLngLat);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MapToAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: MapToAddressComponent, isStandalone: true, selector: "haloduck-map-to-address", inputs: { disabled: "disabled", currentLngLat: "currentLngLat", currentAddress: "currentAddress" }, outputs: { locationChanged: "locationChanged" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: MapToAddressComponent,
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div id=\"map\" class=\"w-full h-full\"></div>", 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,
+            args: [{ selector: 'haloduck-map-to-address', imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: MapToAddressComponent,
+                            multi: true,
+                        },
+                    ], template: "<div id=\"map\" class=\"w-full h-full\"></div>", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], currentLngLat: [{
+                type: Input
+            }], currentAddress: [{
+                type: Input
+            }], locationChanged: [{
+                type: Output
+            }] } });
+
+class SideMenuItemComponent {
+    sanitizer;
+    router = inject(Router);
+    menuItem;
+    depth = 0;
+    menuItemSelectHandler;
+    iconSvg;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    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));
+        }
+    }
+    onMenuItemSelected(menuItem) {
+        if (this.menuItem.link) {
+            this.navigateTo([this.menuItem.link]);
+        }
+        if (this.menuItemSelectHandler) {
+            this.menuItemSelectHandler.emit(this.menuItem);
+        }
+    }
+    navigateTo(link) {
+        this.router.navigate(link);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideMenuItemComponent, deps: [{ token: i1$4.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"] }] });
+}
+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" }]
+        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }], propDecorators: { menuItem: [{
+                type: Input
+            }], depth: [{
+                type: Input
+            }], menuItemSelectHandler: [{
+                type: Input
+            }] } });
+
+class SideMenuComponent {
+    menuItems = [];
+    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"] }] });
+}
+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" }]
+        }], propDecorators: { menuItems: [{
+                type: Input
+            }], depth: [{
+                type: Input
+            }], menuItemSelected: [{
+                type: Output
+            }] } });
+
+class StlViewerComponent {
+    fileUrl;
+    filename;
+    context;
+    containerRef;
+    dialogService = inject(DialogService);
+    isPopup = false;
+    scene;
+    camera;
+    renderer;
+    loader = new STLLoader();
+    controls;
+    loadingPercentage = 0;
+    showStl() {
+        if (this.isPopup) {
+            return;
+        }
+        this.dialogService.open(StlViewerComponent, {
+            fileUrl: this.fileUrl,
+            filename: this.filename,
+        }, ['w-full', 'h-full']);
+    }
+    download() {
+        download(this.fileUrl);
+    }
+    closeDialog() {
+        this.dialogService.close(this.context.overlayRef);
+    }
+    animate = () => {
+        requestAnimationFrame(this.animate);
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    };
+    ngAfterViewInit() {
+        const container = this.containerRef.nativeElement;
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0xffffff);
+        this.camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 1000);
+        this.camera.position.z = 100;
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(container.clientWidth, container.clientHeight);
+        container.appendChild(this.renderer.domElement);
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.enableDamping = true;
+        this.controls.dampingFactor = 0.05;
+        // Adjust lighting
+        const light = new THREE.DirectionalLight(0xffffff, 1.5); // Increased intensity
+        light.position.set(0, 0, 1).normalize();
+        const light2 = new THREE.DirectionalLight(0xffffff, 1.5); // Increased intensity
+        light2.position.set(0, 0, -1).normalize();
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Added ambient light
+        this.scene.add(light, light2, ambientLight);
+        this.loader.load(this.fileUrl || this.context?.fileUrl, (geometry) => {
+            // Use MeshStandardMaterial with DoubleSide to render both sides
+            const material = new THREE.MeshStandardMaterial({
+                color: 0xffffff,
+                metalness: 0.3,
+                roughness: 0.5,
+                side: THREE.DoubleSide, // Render both front and back faces
+            });
+            const mesh = new THREE.Mesh(geometry, material);
+            geometry.computeBoundingBox();
+            const boundingBox = geometry.boundingBox;
+            const center = new THREE.Vector3();
+            boundingBox?.getCenter(center);
+            mesh.geometry.translate(-center.x, -center.y, -center.z);
+            this.scene.add(mesh);
+            const size = new THREE.Vector3();
+            boundingBox?.getSize(size);
+            const maxDim = Math.max(size.x, size.y, size.z);
+            this.camera.position.z = maxDim * 2;
+        }, (xhr) => {
+            this.loadingPercentage = (xhr.loaded / xhr.total) * 100;
+            isDevMode() && console.log(this.loadingPercentage + '% loaded');
+        }, (error) => {
+            isDevMode() && console.error('Error loading STL:', error);
+        });
+        this.animate();
+    }
+    ngOnDestroy() {
+        this.renderer.dispose();
+        this.controls.dispose();
+    }
+    ngOnInit() {
+        if (this.context) {
+            this.isPopup = true;
+            this.fileUrl = this.context.fileUrl;
+            this.filename = this.context.filename;
+        }
+    }
+    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: i1$2.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" }]
+        }], propDecorators: { fileUrl: [{
+                type: Input
+            }], filename: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['viewerContainer']
+            }] } });
+
+class TableComponent {
+    coreService = inject(CoreService);
+    tableLayout = 'auto';
+    showHeader = true;
+    useLoadMore = true;
+    columns = [];
+    rows = new Observable();
+    isLoading = new Observable();
+    isPaging = new Observable();
+    sort = new Observable();
+    expandedTemplate; // TODO
+    customTemplates = {}; // Add this line
+    onSortChange = new EventEmitter();
+    lastEvaluatedKey = new Observable();
+    onLoadMore = new EventEmitter();
+    onRowClick = new EventEmitter();
+    onRowDblClick = new EventEmitter();
+    getColumnValue(row, column) {
+        const value = this.getColumnValueRaw(row, column);
+        if (column.customRenderFn) {
+            return column.customRenderFn(value);
+        }
+        switch (column.type) {
+            case 'date':
+                return this.getDate(value);
+            case 'datetime':
+                return this.getDateTime(value);
+            case 'time':
+                return this.getTime(value);
+            default:
+                return of(value);
+        }
+    }
+    getColumnValueRaw(row, column) {
+        if (Array.isArray(column.key)) {
+            const value = this.getColumnValueRawWithArrayKey(row, column);
+            return value;
+        }
+        else {
+            return row[column.key];
+        }
+    }
+    getColumnValueRawWithArrayKey(row, column) {
+        let value = row;
+        let invalidKey = false;
+        for (const key of column.key) {
+            if (Array.isArray(column.key) && column.key.length > 1) {
+                const [first, ...remainingKeys] = column.key;
+                return this.getColumnValueRawWithArrayKey(value[first], {
+                    ...column,
+                    key: remainingKeys,
+                });
+            }
+            else {
+                if (invalidKey || value[key] === undefined) {
+                    invalidKey = true;
+                    break;
+                }
+                value = value[key];
+            }
+        }
+        if (invalidKey) {
+            value = '-';
+        }
+        return value;
+    }
+    getNumber(data) {
+        const numberPipe = new DecimalPipe('en-US');
+        return of(numberPipe.transform(data) || '');
+    }
+    getDate(data) {
+        const datePipe = new DatePipe('en-US');
+        return of(datePipe.transform(data, 'shortDate') || '');
+    }
+    getDateTime(data) {
+        const datePipe = new DatePipe('en-US');
+        return of(datePipe.transform(data, this.coreService.getDateFormatLong()) || '');
+    }
+    getTime(data) {
+        const datePipe = new DatePipe('en-US');
+        return of(datePipe.transform(data, 'Time') || '');
+    }
+    onUpdateSort(field, direction) {
+        this.onSortChange.emit({ field, direction });
+    }
+    getSortDirection(field) {
+        return this.sort.pipe(map((sort) => {
+            const sortField = sort.find((s) => s.field === field);
+            return sortField?.direction;
+        }));
+    }
+    onLoadMoreClicked() {
+        this.lastEvaluatedKey.pipe(take(1)).subscribe((lastEvaluatedKey) => {
+            this.onLoadMore.emit(lastEvaluatedKey);
+        });
+    }
+    onRowClicked(row) {
+        this.onRowClick.emit(row);
+    }
+    onRowDblClicked(row) {
+        this.onRowDblClick.emit(row);
+    }
+    ngOnInit() { }
+    constructor() { }
+    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", showHeader: "showHeader", 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')], 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) {\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 text-left 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 }\"></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 class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\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", 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.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], 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) {\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 text-left 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 }\"></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 class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\">\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" }]
+        }], ctorParameters: () => [], propDecorators: { tableLayout: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], useLoadMore: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isPaging: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], expandedTemplate: [{
+                type: Input
+            }], customTemplates: [{
+                type: Input
+            }], onSortChange: [{
+                type: Output
+            }], lastEvaluatedKey: [{
+                type: Input
+            }], onLoadMore: [{
+                type: Output
+            }], onRowClick: [{
+                type: Output
+            }], onRowDblClick: [{
+                type: Output
+            }] } });
+
+class ToggleComponent {
+    layout = 'vertical';
+    value = false;
+    disabled = false;
+    nullable = false;
+    toggled = new EventEmitter();
+    label;
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (!this.nullable && (value === null || value === undefined)) {
+            value = false;
+        }
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onToggle() {
+        if (this.nullable) {
+            this.value = this.value ? false : this.value === null ? true : null;
+        }
+        else {
+            this.value = !this.value;
+        }
+        this.onChange(this.value);
+        this.onTouched();
+        this.toggled.emit(this.value);
+    }
+    ngAfterViewInit() {
+        // hide label if no content.
+        if (!this.label.nativeElement.innerText.trim()) {
+            this.label.nativeElement.style.display = 'none';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ToggleComponent, isStandalone: true, selector: "haloduck-toggle", inputs: { layout: "layout", value: "value", disabled: "disabled", nullable: "nullable" }, outputs: { toggled: "toggled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-toggle', imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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" }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], nullable: [{
+                type: Input
+            }], toggled: [{
+                type: Output
+            }], label: [{
+                type: ViewChild,
+                args: ['label']
+            }] } });
+
+class BreadcrumbService {
+    router;
+    coreService = inject(CoreService);
+    breadcrumbs = new BehaviorSubject([]);
+    breadcrumbs$ = this.breadcrumbs.asObservable();
+    titleService = inject(Title);
+    constructor(router) {
+        this.router = router;
+        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() +
+                        '::';
+                const title = titlePrefix +
+                    breadcrumbs.reduce((acc, breadcrumb) => {
+                        return acc ? `${acc}>${breadcrumb.label}` : breadcrumb.label;
+                    }, '');
+                this.titleService.setTitle(title || 'Default Title');
+            });
+        });
+    }
+    createBreadcrumbs(route, url = '', breadcrumbs = []) {
+        const children = route.children;
+        if (children.length === 0) {
+            return breadcrumbs;
+        }
+        for (const child of children) {
+            const routeURL = child.url
+                .map((segment) => segment.path)
+                .join('/');
+            if (routeURL !== '') {
+                url += `/${routeURL}`;
+            }
+            if (child.data['breadcrumb']) {
+                breadcrumbs.push({ label: child.data['breadcrumb'], url });
+            }
+            return this.createBreadcrumbs(child, url, breadcrumbs);
+        }
+        return breadcrumbs;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$5.Router }] });
+
+class BreadcrumbComponent {
+    breadcrumbService = inject(BreadcrumbService);
+    listBreadcrumb = [];
+    ngOnInit() {
+        this.breadcrumbService.breadcrumbs$.subscribe((listBreadcrumb) => {
+            this.listBreadcrumb = listBreadcrumb;
+        });
+    }
+    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: i1$2.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" }]
+        }] });
+
+class NotificationComponent {
+    notificationService = inject(NotificationService);
+    listNotification$ = this.notificationService.getListNotification();
+    removeNotification(id) {
+        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" }] });
+}
+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" }]
+        }] });
+
+class PictureNameComponent {
+    name = '';
+    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: [""] });
+}
+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" }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], pictureKey: [{
+                type: Input
+            }], cdnUrl: [{
+                type: Input
+            }] } });
+
+const provideHaloduckTransloco = () => provideTranslocoScope({
+    scope: 'haloduck',
+    alias: 'haloduck',
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
+//# sourceMappingURL=haloduck-ui.mjs.map