@balinasoftware/balinaui-components 3.3.9 → 3.3.10

package/fesm2022/balinasoftware-balinaui-components.mjs

@@ -110,29 +110,52 @@ class Button {
     type = 'button';
     disabled = false;
     loading = false;
+    /**
+     * Controls whether the button is clickable.
+     */
+    clickable = true;
+    /**
+     * Developer custom CSS class.
+     */
     customClass = '';
     // =========================================
+    // HOST CLASSES
+    // =========================================
+    get buttonClickable() {
+        return (this.clickable &&
+            !this.disabled &&
+            !this.loading);
+    }
+    get buttonDisabled() {
+        return (this.disabled ||
+            this.loading);
+    }
+    // =========================================
     // OUTPUTS
     // =========================================
+    /**
+     * Developer click event.
+     */
     clicked = new EventEmitter();
     // =========================================
-    // CLICK
+    // CLICK HANDLER
     // =========================================
     onClick(event) {
         if (this.disabled ||
-            this.loading) {
+            this.loading ||
+            !this.clickable) {
             event.preventDefault();
+            event.stopPropagation();
             return;
         }
-        // Developer event
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Button, isStandalone: true, selector: "lib-button", inputs: { label: "label", type: "type", disabled: "disabled", loading: "loading", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"balina-button\"\n  [class]=\"customClass\"\n  [type]=\"type\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-busy]=\"loading\"\n  (click)=\"onClick($event)\"\n>\n\n  @if (loading) {\n\n    <span\n      class=\"button-spinner\"\n      aria-hidden=\"true\"\n    ></span>\n\n    <span>\n      Loading...\n    </span>\n\n  } @else {\n\n    <span class=\"button-label\">\n      {{ label }}\n    </span>\n\n  }\n\n</button>", styles: [".balina-button{--button-width: auto;--button-height: 44px;--button-padding: 0 22px;--button-background: #68479b;--button-background-hover: #593b84;--button-background-active: #4b326f;--button-text-color: #ffffff;--button-border: 1px solid #68479b;--button-radius: 6px;--button-font-family: Arial, Helvetica, sans-serif;--button-font-size: 14px;--button-font-weight: 600;--button-gap: 8px;--button-shadow: 0 2px 5px rgba(0, 0, 0, .08);--button-disabled-background: #dddddd;--button-disabled-text: #999999;--button-disabled-border: #dddddd;width:var(--button-width);min-height:var(--button-height);padding:var(--button-padding);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);box-sizing:border-box;border:var(--button-border);border-radius:var(--button-radius);background:var(--button-background);color:var(--button-text-color);font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);box-shadow:var(--button-shadow);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease}.balina-button:hover:not(:disabled){background:var(--button-background-hover)}.balina-button:active:not(:disabled){background:var(--button-background-active);transform:translateY(1px)}.balina-button:focus-visible{box-shadow:0 0 0 3px #68479b33}.balina-button:disabled{background:var(--button-disabled-background);color:var(--button-disabled-text);border-color:var(--button-disabled-border);cursor:not-allowed;box-shadow:none;transform:none}.balina-button[aria-busy=true]{cursor:wait}.button-spinner{width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(255,255,255,.4);border-top-color:var(--button-text-color);border-radius:50%;animation:button-spin .7s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}.button-label{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}@media(max-width:768px){.balina-button{min-height:var(--button-height);font-size:var(--button-font-size)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Button, isStandalone: true, selector: "lib-button", inputs: { label: "label", type: "type", disabled: "disabled", loading: "loading", clickable: "clickable", customClass: "customClass" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.customClass", "class.button-clickable": "this.buttonClickable", "class.button-disabled": "this.buttonDisabled" } }, ngImport: i0, template: "<button\n  class=\"balina-button\"\n\n  [type]=\"type\"\n\n  [disabled]=\"\n    disabled ||\n    loading ||\n    !clickable\n  \"\n\n  [attr.aria-disabled]=\"\n    disabled ||\n    loading ||\n    !clickable\n  \"\n\n  [attr.aria-busy]=\"loading\"\n\n  (click)=\"onClick($event)\"\n>\n\n  <!-- =====================================\n       LOADING\n       ===================================== -->\n\n  @if (loading) {\n\n    <span\n      class=\"button-spinner\"\n      aria-hidden=\"true\"\n    ></span>\n\n    <span class=\"button-loading-text\">\n      Loading...\n    </span>\n\n  }\n\n  <!-- =====================================\n       NORMAL\n       ===================================== -->\n\n  @else {\n\n    <span class=\"button-label\">\n      {{ label }}\n    </span>\n\n  }\n\n</button>", styles: [":host{--button-width: auto;--button-height: 44px;--button-padding: 0 22px;--button-background: #68479b;--button-background-hover: #593b84;--button-background-active: #4b326f;--button-text-color: #ffffff;--button-border: 1px solid #68479b;--button-radius: 6px;--button-font-family: Arial, Helvetica, sans-serif;--button-font-size: 14px;--button-font-weight: 600;--button-gap: 8px;--button-shadow: 0 2px 5px rgba(0, 0, 0, .08);--button-disabled-background: #dddddd;--button-disabled-text: #999999;--button-disabled-border: #dddddd;--button-focus-ring: rgba(104, 71, 155, .2);--button-spinner-size: 16px;--button-spinner-border: 2px;display:inline-block;width:var(--button-width);box-sizing:border-box;font-family:var(--button-font-family)}.balina-button{width:100%;min-height:var(--button-height);padding:var(--button-padding);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);box-sizing:border-box;border:var(--button-border);border-radius:var(--button-radius);background:var(--button-background);color:var(--button-text-color);font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:1;box-shadow:var(--button-shadow);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease,color .2s ease}:host(.button-clickable) .balina-button{cursor:pointer}:host(:not(.button-clickable)) .balina-button{cursor:default}:host(.button-clickable) .balina-button:hover{background:var(--button-background-hover)}:host(.button-clickable) .balina-button:active{background:var(--button-background-active);transform:translateY(1px)}.balina-button:focus-visible{box-shadow:0 0 0 3px var(--button-focus-ring)}:host(.button-disabled) .balina-button{background:var(--button-disabled-background);color:var(--button-disabled-text);border-color:var(--button-disabled-border);cursor:not-allowed;box-shadow:none;transform:none}.balina-button[aria-busy=true]{cursor:wait}.button-label{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-loading-text{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);flex:0 0 auto;box-sizing:border-box;border:var(--button-spinner-border) solid rgba(255,255,255,.4);border-top-color:var(--button-text-color);border-radius:50%;animation:button-spin .7s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}@media(max-width:768px){:host{width:var(--button-width)}.balina-button{min-height:var(--button-height);font-size:var(--button-font-size)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Button, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-button', standalone: true, imports: [], template: "<button\n  class=\"balina-button\"\n  [class]=\"customClass\"\n  [type]=\"type\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-busy]=\"loading\"\n  (click)=\"onClick($event)\"\n>\n\n  @if (loading) {\n\n    <span\n      class=\"button-spinner\"\n      aria-hidden=\"true\"\n    ></span>\n\n    <span>\n      Loading...\n    </span>\n\n  } @else {\n\n    <span class=\"button-label\">\n      {{ label }}\n    </span>\n\n  }\n\n</button>", styles: [".balina-button{--button-width: auto;--button-height: 44px;--button-padding: 0 22px;--button-background: #68479b;--button-background-hover: #593b84;--button-background-active: #4b326f;--button-text-color: #ffffff;--button-border: 1px solid #68479b;--button-radius: 6px;--button-font-family: Arial, Helvetica, sans-serif;--button-font-size: 14px;--button-font-weight: 600;--button-gap: 8px;--button-shadow: 0 2px 5px rgba(0, 0, 0, .08);--button-disabled-background: #dddddd;--button-disabled-text: #999999;--button-disabled-border: #dddddd;width:var(--button-width);min-height:var(--button-height);padding:var(--button-padding);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);box-sizing:border-box;border:var(--button-border);border-radius:var(--button-radius);background:var(--button-background);color:var(--button-text-color);font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);box-shadow:var(--button-shadow);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease}.balina-button:hover:not(:disabled){background:var(--button-background-hover)}.balina-button:active:not(:disabled){background:var(--button-background-active);transform:translateY(1px)}.balina-button:focus-visible{box-shadow:0 0 0 3px #68479b33}.balina-button:disabled{background:var(--button-disabled-background);color:var(--button-disabled-text);border-color:var(--button-disabled-border);cursor:not-allowed;box-shadow:none;transform:none}.balina-button[aria-busy=true]{cursor:wait}.button-spinner{width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(255,255,255,.4);border-top-color:var(--button-text-color);border-radius:50%;animation:button-spin .7s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}.button-label{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}@media(max-width:768px){.balina-button{min-height:var(--button-height);font-size:var(--button-font-size)}}\n"] }]
+            args: [{ selector: 'lib-button', standalone: true, imports: [], template: "<button\n  class=\"balina-button\"\n\n  [type]=\"type\"\n\n  [disabled]=\"\n    disabled ||\n    loading ||\n    !clickable\n  \"\n\n  [attr.aria-disabled]=\"\n    disabled ||\n    loading ||\n    !clickable\n  \"\n\n  [attr.aria-busy]=\"loading\"\n\n  (click)=\"onClick($event)\"\n>\n\n  <!-- =====================================\n       LOADING\n       ===================================== -->\n\n  @if (loading) {\n\n    <span\n      class=\"button-spinner\"\n      aria-hidden=\"true\"\n    ></span>\n\n    <span class=\"button-loading-text\">\n      Loading...\n    </span>\n\n  }\n\n  <!-- =====================================\n       NORMAL\n       ===================================== -->\n\n  @else {\n\n    <span class=\"button-label\">\n      {{ label }}\n    </span>\n\n  }\n\n</button>", styles: [":host{--button-width: auto;--button-height: 44px;--button-padding: 0 22px;--button-background: #68479b;--button-background-hover: #593b84;--button-background-active: #4b326f;--button-text-color: #ffffff;--button-border: 1px solid #68479b;--button-radius: 6px;--button-font-family: Arial, Helvetica, sans-serif;--button-font-size: 14px;--button-font-weight: 600;--button-gap: 8px;--button-shadow: 0 2px 5px rgba(0, 0, 0, .08);--button-disabled-background: #dddddd;--button-disabled-text: #999999;--button-disabled-border: #dddddd;--button-focus-ring: rgba(104, 71, 155, .2);--button-spinner-size: 16px;--button-spinner-border: 2px;display:inline-block;width:var(--button-width);box-sizing:border-box;font-family:var(--button-font-family)}.balina-button{width:100%;min-height:var(--button-height);padding:var(--button-padding);display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap);box-sizing:border-box;border:var(--button-border);border-radius:var(--button-radius);background:var(--button-background);color:var(--button-text-color);font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:1;box-shadow:var(--button-shadow);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease,color .2s ease}:host(.button-clickable) .balina-button{cursor:pointer}:host(:not(.button-clickable)) .balina-button{cursor:default}:host(.button-clickable) .balina-button:hover{background:var(--button-background-hover)}:host(.button-clickable) .balina-button:active{background:var(--button-background-active);transform:translateY(1px)}.balina-button:focus-visible{box-shadow:0 0 0 3px var(--button-focus-ring)}:host(.button-disabled) .balina-button{background:var(--button-disabled-background);color:var(--button-disabled-text);border-color:var(--button-disabled-border);cursor:not-allowed;box-shadow:none;transform:none}.balina-button[aria-busy=true]{cursor:wait}.button-label{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-loading-text{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);flex:0 0 auto;box-sizing:border-box;border:var(--button-spinner-border) solid rgba(255,255,255,.4);border-top-color:var(--button-text-color);border-radius:50%;animation:button-spin .7s linear infinite}@keyframes button-spin{to{transform:rotate(360deg)}}@media(max-width:768px){:host{width:var(--button-width)}.balina-button{min-height:var(--button-height);font-size:var(--button-font-size)}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], type: [{
@@ -141,35 +164,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 type: Input
             }], loading: [{
                 type: Input
+            }], clickable: [{
+                type: Input
             }], customClass: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], buttonClickable: [{
+                type: HostBinding,
+                args: ['class.button-clickable']
+            }], buttonDisabled: [{
+                type: HostBinding,
+                args: ['class.button-disabled']
             }], clicked: [{
                 type: Output
             }] } });
 
 class Card {
+    // =========================================
+    // INPUTS
+    // =========================================
     title = 'Last 24 hours';
     month = 'Jul';
     day = 9;
     description = '156 flights were monitored with 96.8% on-time performance. Minor delays occurred due to weather and air traffic.';
-    cardClick = new EventEmitter();
+    /**
+     * Developer custom CSS class.
+     */
     customClass = '';
-    clickable = false;
+    /**
+     * Controls whether the card is clickable.
+     */
+    clickable = true;
+    /**
+     * Disables card interaction.
+     */
     disabled = false;
+    // =========================================
+    // OUTPUTS
+    // =========================================
+    /**
+     * Legacy / specific card click event.
+     */
+    cardClick = new EventEmitter();
+    /**
+     * Standard Balina UI developer click event.
+     */
     clicked = new EventEmitter();
+    // =========================================
+    // CLICK HANDLER
+    // =========================================
     onClick(event) {
         if (!this.clickable ||
             this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
             return;
         }
+        // Standard developer event
         this.clicked.emit(event);
+        // Card-specific event
+        this.cardClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Card, isStandalone: true, selector: "lib-card", inputs: { title: "title", month: "month", day: "day", description: "description", customClass: "customClass", clickable: "clickable", disabled: "disabled" }, outputs: { cardClick: "cardClick", clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"balina-card\"\n  [class]=\"customClass\"\n  [class.card-clickable]=\"clickable\"\n  [class.card-disabled]=\"disabled\"\n  (click)=\"onClick($event)\"\n>\n\n  <!-- Title -->\n  <h2 class=\"card-title\">\n    {{ title }}\n  </h2>\n\n  <!-- Card Content -->\n  <div class=\"card-content\">\n\n    <!-- Date -->\n    <div class=\"card-date\">\n\n      <div class=\"card-month\">\n        {{ month }}\n      </div>\n\n      <div class=\"card-line\"></div>\n\n      <div class=\"card-day\">\n        {{ day }}\n      </div>\n\n    </div>\n\n    <!-- Description -->\n    <div class=\"card-description\">\n      {{ description }}\n    </div>\n\n  </div>\n\n</div>", styles: [".balina-card{--card-width: 100%;--card-height: 280px;--card-padding: 28px;--card-background: #ffffff;--card-border: 3px solid #dddddd;--card-radius: 12px;--card-title-color: #000000;--card-description-color: #222222;--card-date-background: #eef5ff;--card-month-color: #2962ff;--card-line-color: #b7b7b7;--card-title-size: 38px;--card-description-size: 20px;--card-month-size: 24px;--card-day-size: 24px;--card-font-family: Arial, Helvetica, sans-serif;width:var(--card-width);min-height:var(--card-height);box-sizing:border-box;padding:var(--card-padding);background:var(--card-background);border:var(--card-border);border-radius:var(--card-radius);font-family:var(--card-font-family);cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}.balina-card:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}.card-title{margin:0;color:var(--card-title-color);font-size:var(--card-title-size);font-weight:700;line-height:1.2}.card-content{display:flex;align-items:center;gap:28px;margin-top:36px}.card-date{width:92px;height:96px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:8px;background:var(--card-date-background);border-radius:10px}.card-month{color:var(--card-month-color);font-size:var(--card-month-size);font-weight:700;line-height:1}.card-line{width:80%;height:2px;margin:7px 0;background:var(--card-line-color)}.card-day{color:#000;font-size:var(--card-day-size);font-weight:600;line-height:1}.card-description{flex:1;color:var(--card-description-color);font-size:var(--card-description-size);font-weight:600;line-height:1.4}@media(max-width:768px){.balina-card{--card-title-size: 30px;--card-description-size: 17px;--card-height: auto;padding:22px}.card-content{gap:18px;margin-top:28px}.card-date{width:80px;height:88px}}@media(max-width:480px){.balina-card{--card-title-size: 26px;--card-description-size: 15px;padding:18px}.card-content{align-items:flex-start;gap:14px}.card-date{width:70px;height:80px}.card-month,.card-day{font-size:20px}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Card, isStandalone: true, selector: "lib-card", inputs: { title: "title", month: "month", day: "day", description: "description", customClass: "customClass", clickable: "clickable", disabled: "disabled" }, outputs: { cardClick: "cardClick", clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"balina-card\"\n\n  [class]=\"customClass\"\n\n  [class.card-clickable]=\"clickable\"\n\n  [class.card-disabled]=\"disabled\"\n\n  (click)=\"onClick($event)\"\n>\n\n  <!-- =====================================\n       TITLE\n       ===================================== -->\n\n  <h2 class=\"card-title\">\n    {{ title }}\n  </h2>\n\n\n  <!-- =====================================\n       CONTENT\n       ===================================== -->\n\n  <div class=\"card-content\">\n\n    <!-- ===================================\n         DATE\n         =================================== -->\n\n    <div class=\"card-date\">\n\n      <div class=\"card-month\">\n        {{ month }}\n      </div>\n\n      <div class=\"card-line\"></div>\n\n      <div class=\"card-day\">\n        {{ day }}\n      </div>\n\n    </div>\n\n\n    <!-- ===================================\n         DESCRIPTION\n         =================================== -->\n\n    <div class=\"card-description\">\n\n      {{ description }}\n\n    </div>\n\n  </div>\n\n</div>", styles: [".balina-card{--card-width: 100%;--card-height: 280px;--card-padding: 28px;--card-background: #ffffff;--card-border: 3px solid #dddddd;--card-radius: 12px;--card-title-color: #000000;--card-description-color: #222222;--card-date-background: #eef5ff;--card-month-color: #2962ff;--card-day-color: #000000;--card-line-color: #b7b7b7;--card-title-size: 38px;--card-description-size: 20px;--card-month-size: 24px;--card-day-size: 24px;--card-font-family: Arial, Helvetica, sans-serif;--card-font-weight: 600;--card-hover-shadow: 0 4px 12px rgba(0, 0, 0, .08);--card-hover-transform: translateY(-1px);--card-disabled-background: #f5f5f5;--card-disabled-border: #d0d0d0;--card-disabled-text: #999999;width:var(--card-width);min-height:var(--card-height);padding:var(--card-padding);background:var(--card-background);border:var(--card-border);border-radius:var(--card-radius);font-family:var(--card-font-family);font-weight:var(--card-font-weight);transition:box-shadow .2s ease,transform .2s ease,background-color .2s ease,border-color .2s ease;box-sizing:border-box}.balina-card.card-clickable{cursor:pointer}.balina-card:not(.card-clickable){cursor:default}.balina-card.card-clickable:hover{box-shadow:var(--card-hover-shadow);transform:var(--card-hover-transform)}.balina-card.card-clickable:active{transform:translateY(0)}.card-title{margin:0;color:var(--card-title-color);font-size:var(--card-title-size);font-weight:700;line-height:1.2}.card-content{display:flex;align-items:center;gap:28px;margin-top:36px}.card-date{width:92px;height:96px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:8px;background:var(--card-date-background);border-radius:10px}.card-month{color:var(--card-month-color);font-size:var(--card-month-size);font-weight:700;line-height:1}.card-line{width:80%;height:2px;margin:7px 0;background:var(--card-line-color)}.card-day{color:var(--card-day-color);font-size:var(--card-day-size);font-weight:600;line-height:1}.card-description{flex:1;color:var(--card-description-color);font-size:var(--card-description-size);font-weight:600;line-height:1.4}.balina-card.card-disabled{background:var(--card-disabled-background);border-color:var(--card-disabled-border);color:var(--card-disabled-text);cursor:not-allowed;box-shadow:none;transform:none}.balina-card.card-disabled:hover{box-shadow:none;transform:none}.balina-card.card-disabled .card-title,.balina-card.card-disabled .card-description{color:var(--card-disabled-text)}@media(max-width:768px){.balina-card{--card-title-size: 30px;--card-description-size: 17px;--card-height: auto;padding:22px}.card-content{gap:18px;margin-top:28px}.card-date{width:80px;height:88px}}@media(max-width:480px){.balina-card{--card-title-size: 26px;--card-description-size: 15px;padding:18px}.card-content{align-items:flex-start;gap:14px}.card-date{width:70px;height:80px}.card-month,.card-day{font-size:20px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Card, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-card', standalone: true, imports: [], template: "<div\n  class=\"balina-card\"\n  [class]=\"customClass\"\n  [class.card-clickable]=\"clickable\"\n  [class.card-disabled]=\"disabled\"\n  (click)=\"onClick($event)\"\n>\n\n  <!-- Title -->\n  <h2 class=\"card-title\">\n    {{ title }}\n  </h2>\n\n  <!-- Card Content -->\n  <div class=\"card-content\">\n\n    <!-- Date -->\n    <div class=\"card-date\">\n\n      <div class=\"card-month\">\n        {{ month }}\n      </div>\n\n      <div class=\"card-line\"></div>\n\n      <div class=\"card-day\">\n        {{ day }}\n      </div>\n\n    </div>\n\n    <!-- Description -->\n    <div class=\"card-description\">\n      {{ description }}\n    </div>\n\n  </div>\n\n</div>", styles: [".balina-card{--card-width: 100%;--card-height: 280px;--card-padding: 28px;--card-background: #ffffff;--card-border: 3px solid #dddddd;--card-radius: 12px;--card-title-color: #000000;--card-description-color: #222222;--card-date-background: #eef5ff;--card-month-color: #2962ff;--card-line-color: #b7b7b7;--card-title-size: 38px;--card-description-size: 20px;--card-month-size: 24px;--card-day-size: 24px;--card-font-family: Arial, Helvetica, sans-serif;width:var(--card-width);min-height:var(--card-height);box-sizing:border-box;padding:var(--card-padding);background:var(--card-background);border:var(--card-border);border-radius:var(--card-radius);font-family:var(--card-font-family);cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}.balina-card:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}.card-title{margin:0;color:var(--card-title-color);font-size:var(--card-title-size);font-weight:700;line-height:1.2}.card-content{display:flex;align-items:center;gap:28px;margin-top:36px}.card-date{width:92px;height:96px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:8px;background:var(--card-date-background);border-radius:10px}.card-month{color:var(--card-month-color);font-size:var(--card-month-size);font-weight:700;line-height:1}.card-line{width:80%;height:2px;margin:7px 0;background:var(--card-line-color)}.card-day{color:#000;font-size:var(--card-day-size);font-weight:600;line-height:1}.card-description{flex:1;color:var(--card-description-color);font-size:var(--card-description-size);font-weight:600;line-height:1.4}@media(max-width:768px){.balina-card{--card-title-size: 30px;--card-description-size: 17px;--card-height: auto;padding:22px}.card-content{gap:18px;margin-top:28px}.card-date{width:80px;height:88px}}@media(max-width:480px){.balina-card{--card-title-size: 26px;--card-description-size: 15px;padding:18px}.card-content{align-items:flex-start;gap:14px}.card-date{width:70px;height:80px}.card-month,.card-day{font-size:20px}}\n"] }]
+            args: [{ selector: 'lib-card', standalone: true, imports: [], template: "<div\n  class=\"balina-card\"\n\n  [class]=\"customClass\"\n\n  [class.card-clickable]=\"clickable\"\n\n  [class.card-disabled]=\"disabled\"\n\n  (click)=\"onClick($event)\"\n>\n\n  <!-- =====================================\n       TITLE\n       ===================================== -->\n\n  <h2 class=\"card-title\">\n    {{ title }}\n  </h2>\n\n\n  <!-- =====================================\n       CONTENT\n       ===================================== -->\n\n  <div class=\"card-content\">\n\n    <!-- ===================================\n         DATE\n         =================================== -->\n\n    <div class=\"card-date\">\n\n      <div class=\"card-month\">\n        {{ month }}\n      </div>\n\n      <div class=\"card-line\"></div>\n\n      <div class=\"card-day\">\n        {{ day }}\n      </div>\n\n    </div>\n\n\n    <!-- ===================================\n         DESCRIPTION\n         =================================== -->\n\n    <div class=\"card-description\">\n\n      {{ description }}\n\n    </div>\n\n  </div>\n\n</div>", styles: [".balina-card{--card-width: 100%;--card-height: 280px;--card-padding: 28px;--card-background: #ffffff;--card-border: 3px solid #dddddd;--card-radius: 12px;--card-title-color: #000000;--card-description-color: #222222;--card-date-background: #eef5ff;--card-month-color: #2962ff;--card-day-color: #000000;--card-line-color: #b7b7b7;--card-title-size: 38px;--card-description-size: 20px;--card-month-size: 24px;--card-day-size: 24px;--card-font-family: Arial, Helvetica, sans-serif;--card-font-weight: 600;--card-hover-shadow: 0 4px 12px rgba(0, 0, 0, .08);--card-hover-transform: translateY(-1px);--card-disabled-background: #f5f5f5;--card-disabled-border: #d0d0d0;--card-disabled-text: #999999;width:var(--card-width);min-height:var(--card-height);padding:var(--card-padding);background:var(--card-background);border:var(--card-border);border-radius:var(--card-radius);font-family:var(--card-font-family);font-weight:var(--card-font-weight);transition:box-shadow .2s ease,transform .2s ease,background-color .2s ease,border-color .2s ease;box-sizing:border-box}.balina-card.card-clickable{cursor:pointer}.balina-card:not(.card-clickable){cursor:default}.balina-card.card-clickable:hover{box-shadow:var(--card-hover-shadow);transform:var(--card-hover-transform)}.balina-card.card-clickable:active{transform:translateY(0)}.card-title{margin:0;color:var(--card-title-color);font-size:var(--card-title-size);font-weight:700;line-height:1.2}.card-content{display:flex;align-items:center;gap:28px;margin-top:36px}.card-date{width:92px;height:96px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:8px;background:var(--card-date-background);border-radius:10px}.card-month{color:var(--card-month-color);font-size:var(--card-month-size);font-weight:700;line-height:1}.card-line{width:80%;height:2px;margin:7px 0;background:var(--card-line-color)}.card-day{color:var(--card-day-color);font-size:var(--card-day-size);font-weight:600;line-height:1}.card-description{flex:1;color:var(--card-description-color);font-size:var(--card-description-size);font-weight:600;line-height:1.4}.balina-card.card-disabled{background:var(--card-disabled-background);border-color:var(--card-disabled-border);color:var(--card-disabled-text);cursor:not-allowed;box-shadow:none;transform:none}.balina-card.card-disabled:hover{box-shadow:none;transform:none}.balina-card.card-disabled .card-title,.balina-card.card-disabled .card-description{color:var(--card-disabled-text)}@media(max-width:768px){.balina-card{--card-title-size: 30px;--card-description-size: 17px;--card-height: auto;padding:22px}.card-content{gap:18px;margin-top:28px}.card-date{width:80px;height:88px}}@media(max-width:480px){.balina-card{--card-title-size: 26px;--card-description-size: 15px;padding:18px}.card-content{align-items:flex-start;gap:14px}.card-date{width:70px;height:80px}.card-month,.card-day{font-size:20px}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], month: [{
@@ -178,51 +241,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 type: Input
             }], description: [{
                 type: Input
-            }], cardClick: [{
-                type: Output
             }], customClass: [{
                 type: Input
             }], clickable: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], cardClick: [{
+                type: Output
             }], clicked: [{
                 type: Output
             }] } });
 
 class TimeFilter {
+    // =========================================
+    // INPUTS
+    // =========================================
     label = '';
-    value;
-    selectedValue = '';
+    /**
+     * Unique value of this time filter.
+     */
+    value = '';
+    /**
+     * Optional external selected value.
+     *
+     * If the developer connects this input,
+     * multiple TimeFilters can work as a group.
+     *
+     * If it is not provided, the component
+     * works independently.
+     */
+    selectedValue = null;
+    /**
+     * Developer custom CSS class.
+     */
+    customClass = '';
+    /**
+     * Allows the developer to enable/disable
+     * click interaction.
+     */
+    clickable = true;
+    /**
+     * Disables the component.
+     */
+    disabled = false;
+    // =========================================
+    // OUTPUTS
+    // =========================================
+    /**
+     * Emits selected value when the component
+     * is used as a connected/group component.
+     */
     selectedValueChange = new EventEmitter();
+    /**
+     * Developer click event.
+     */
     clicked = new EventEmitter();
+    // =========================================
+    // INTERNAL STATE
+    // =========================================
+    /**
+     * Used when the component is working
+     * independently.
+     */
+    internalSelected = false;
+    // =========================================
+    // SELECTED STATE
+    // =========================================
     get selected() {
-        return this.value === this.selectedValue;
+        /*
+         * If selectedValue is provided,
+         * use the external value.
+         */
+        if (this.selectedValue !== null &&
+            this.selectedValue !== undefined) {
+            return this.value === this.selectedValue;
+        }
+        /*
+         * Otherwise use internal state.
+         */
+        return this.internalSelected;
     }
+    // =========================================
+    // CLICK
+    // =========================================
     onClick(event) {
-        // If already selected → unselect
+        if (this.disabled ||
+            !this.clickable) {
+            return;
+        }
+        // =====================================
+        // INDEPENDENT MODE
+        // =====================================
+        if (this.selectedValue === null ||
+            this.selectedValue === undefined) {
+            this.internalSelected =
+                !this.internalSelected;
+            this.clicked.emit(event);
+            return;
+        }
+        // =====================================
+        // CONNECTED / GROUP MODE
+        // =====================================
         if (this.selected) {
             this.selectedValueChange.emit('');
         }
-        // If not selected → select
         else {
             this.selectedValueChange.emit(this.value);
         }
-        // Developer custom event
+        // =====================================
+        // DEVELOPER CLICK EVENT
+        // =====================================
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TimeFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TimeFilter, isStandalone: true, selector: "lib-time-filter", inputs: { label: "label", value: "value", selectedValue: "selectedValue" }, outputs: { selectedValueChange: "selectedValueChange", clicked: "clicked" }, ngImport: i0, template: "<div class=\"time-filter\" (click)=\"onClick($event)\" role=\"button\" tabindex=\"0\">\n    <div class=\"radio-circle\" [class.selected]=\"selected\">\n        <div class=\"radio-dot\"></div>\n    </div>\n\n    <span class=\"label\">\n        {{ label }}\n    </span>\n</div>", styles: [".time-filter{display:flex;align-items:center;gap:16px;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-circle{width:24px;height:24px;border:2px solid #a6a6a6;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:border-color .2s ease}.radio-dot{width:12px;height:12px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-circle.selected{border-color:#1976d2}.radio-circle.selected .radio-dot{background:#1976d2}.label{font-size:20px;font-weight:400;color:#000;line-height:1}.label:hover{color:#333}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TimeFilter, isStandalone: true, selector: "lib-time-filter", inputs: { label: "label", value: "value", selectedValue: "selectedValue", customClass: "customClass", clickable: "clickable", disabled: "disabled" }, outputs: { selectedValueChange: "selectedValueChange", clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"time-filter\"\n  [class]=\"customClass\"\n\n  [class.time-filter-clickable]=\"clickable\"\n\n  [class.time-filter-disabled]=\"disabled\"\n\n  [class.time-filter-selected]=\"selected\"\n\n  (click)=\"onClick($event)\"\n\n  role=\"button\"\n\n  tabindex=\"0\"\n>\n\n  <!-- =====================================\n       RADIO\n       ===================================== -->\n\n  <div\n    class=\"radio-circle\"\n    [class.selected]=\"selected\"\n  >\n\n    <div class=\"radio-dot\"></div>\n\n  </div>\n\n\n  <!-- =====================================\n       LABEL\n       ===================================== -->\n\n  <span class=\"label\">\n    {{ label }}\n  </span>\n\n</div>", styles: [".time-filter{--time-filter-gap: 16px;--time-filter-circle-size: 24px;--time-filter-circle-border-width: 2px;--time-filter-dot-size: 12px;--time-filter-border-color: #a6a6a6;--time-filter-selected-color: #1976d2;--time-filter-text-color: #000000;--time-filter-text-hover: #333333;--time-filter-font-family: Arial, Helvetica, sans-serif;--time-filter-font-size: 20px;--time-filter-font-weight: 400;--time-filter-disabled-color: #aaaaaa;display:flex;align-items:center;gap:var(--time-filter-gap);width:fit-content;box-sizing:border-box;font-family:var(--time-filter-font-family);-webkit-user-select:none;user-select:none;transition:opacity .2s ease}.time-filter-clickable{cursor:pointer}.radio-circle{width:var(--time-filter-circle-size);height:var(--time-filter-circle-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:var(--time-filter-circle-border-width) solid var(--time-filter-border-color);border-radius:50%;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:var(--time-filter-dot-size);height:var(--time-filter-dot-size);border-radius:50%;background:transparent;transition:background-color .2s ease,transform .2s ease}.radio-circle.selected{border-color:var(--time-filter-selected-color)}.radio-circle.selected .radio-dot{background:var(--time-filter-selected-color);transform:scale(1)}.label{color:var(--time-filter-text-color);font-size:var(--time-filter-font-size);font-weight:var(--time-filter-font-weight);line-height:1;transition:color .2s ease}.time-filter-clickable:hover .label{color:var(--time-filter-text-hover)}.time-filter-clickable:hover .radio-circle{border-color:var(--time-filter-selected-color)}.time-filter-disabled{opacity:.6;cursor:not-allowed}.time-filter-disabled .radio-circle{border-color:var(--time-filter-disabled-color)}.time-filter-disabled .label{color:var(--time-filter-disabled-color)}.time-filter-disabled .radio-circle.selected{border-color:var(--time-filter-disabled-color)}.time-filter-disabled .radio-circle.selected .radio-dot{background:var(--time-filter-disabled-color)}@media(max-width:768px){.time-filter{--time-filter-font-size: 18px;--time-filter-circle-size: 22px;--time-filter-dot-size: 10px;--time-filter-gap: 12px}}@media(max-width:480px){.time-filter{--time-filter-font-size: 16px;--time-filter-circle-size: 20px;--time-filter-dot-size: 9px;--time-filter-gap: 10px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TimeFilter, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-time-filter', standalone: true, imports: [], template: "<div class=\"time-filter\" (click)=\"onClick($event)\" role=\"button\" tabindex=\"0\">\n    <div class=\"radio-circle\" [class.selected]=\"selected\">\n        <div class=\"radio-dot\"></div>\n    </div>\n\n    <span class=\"label\">\n        {{ label }}\n    </span>\n</div>", styles: [".time-filter{display:flex;align-items:center;gap:16px;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-circle{width:24px;height:24px;border:2px solid #a6a6a6;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:border-color .2s ease}.radio-dot{width:12px;height:12px;border-radius:50%;background:transparent;transition:background .2s ease}.radio-circle.selected{border-color:#1976d2}.radio-circle.selected .radio-dot{background:#1976d2}.label{font-size:20px;font-weight:400;color:#000;line-height:1}.label:hover{color:#333}\n"] }]
+            args: [{ selector: 'lib-time-filter', standalone: true, imports: [], template: "<div\n  class=\"time-filter\"\n  [class]=\"customClass\"\n\n  [class.time-filter-clickable]=\"clickable\"\n\n  [class.time-filter-disabled]=\"disabled\"\n\n  [class.time-filter-selected]=\"selected\"\n\n  (click)=\"onClick($event)\"\n\n  role=\"button\"\n\n  tabindex=\"0\"\n>\n\n  <!-- =====================================\n       RADIO\n       ===================================== -->\n\n  <div\n    class=\"radio-circle\"\n    [class.selected]=\"selected\"\n  >\n\n    <div class=\"radio-dot\"></div>\n\n  </div>\n\n\n  <!-- =====================================\n       LABEL\n       ===================================== -->\n\n  <span class=\"label\">\n    {{ label }}\n  </span>\n\n</div>", styles: [".time-filter{--time-filter-gap: 16px;--time-filter-circle-size: 24px;--time-filter-circle-border-width: 2px;--time-filter-dot-size: 12px;--time-filter-border-color: #a6a6a6;--time-filter-selected-color: #1976d2;--time-filter-text-color: #000000;--time-filter-text-hover: #333333;--time-filter-font-family: Arial, Helvetica, sans-serif;--time-filter-font-size: 20px;--time-filter-font-weight: 400;--time-filter-disabled-color: #aaaaaa;display:flex;align-items:center;gap:var(--time-filter-gap);width:fit-content;box-sizing:border-box;font-family:var(--time-filter-font-family);-webkit-user-select:none;user-select:none;transition:opacity .2s ease}.time-filter-clickable{cursor:pointer}.radio-circle{width:var(--time-filter-circle-size);height:var(--time-filter-circle-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:var(--time-filter-circle-border-width) solid var(--time-filter-border-color);border-radius:50%;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:var(--time-filter-dot-size);height:var(--time-filter-dot-size);border-radius:50%;background:transparent;transition:background-color .2s ease,transform .2s ease}.radio-circle.selected{border-color:var(--time-filter-selected-color)}.radio-circle.selected .radio-dot{background:var(--time-filter-selected-color);transform:scale(1)}.label{color:var(--time-filter-text-color);font-size:var(--time-filter-font-size);font-weight:var(--time-filter-font-weight);line-height:1;transition:color .2s ease}.time-filter-clickable:hover .label{color:var(--time-filter-text-hover)}.time-filter-clickable:hover .radio-circle{border-color:var(--time-filter-selected-color)}.time-filter-disabled{opacity:.6;cursor:not-allowed}.time-filter-disabled .radio-circle{border-color:var(--time-filter-disabled-color)}.time-filter-disabled .label{color:var(--time-filter-disabled-color)}.time-filter-disabled .radio-circle.selected{border-color:var(--time-filter-disabled-color)}.time-filter-disabled .radio-circle.selected .radio-dot{background:var(--time-filter-disabled-color)}@media(max-width:768px){.time-filter{--time-filter-font-size: 18px;--time-filter-circle-size: 22px;--time-filter-dot-size: 10px;--time-filter-gap: 12px}}@media(max-width:480px){.time-filter{--time-filter-font-size: 16px;--time-filter-circle-size: 20px;--time-filter-dot-size: 9px;--time-filter-gap: 10px}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{
                 type: Input
             }], selectedValue: [{
                 type: Input
+            }], customClass: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }], selectedValueChange: [{
                 type: Output
             }], clicked: [{
@@ -337,6 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             }] } });
 
 class DateInput {
+    elementRef;
     // =========================================
     // INPUTS
     // =========================================
@@ -345,19 +495,55 @@ class DateInput {
     value = '';
     disabled = false;
     readonly = false;
+    /**
+     * Developer custom CSS class.
+     *
+     * Example:
+     *
+     * customClass="flight-date"
+     */
     customClass = '';
     // =========================================
     // OUTPUTS
     // =========================================
+    /**
+     * Emits the selected date as:
+     *
+     * YYYY-MM-DD
+     */
     valueChange = new EventEmitter();
+    /**
+     * Emits the selected Date object.
+     */
     dateChange = new EventEmitter();
+    /**
+     * Emits when the calendar opens/closes.
+     */
     openedChange = new EventEmitter();
+    /**
+     * Developer click event.
+     */
     clicked = new EventEmitter();
     // =========================================
     // INTERNAL STATE
     // =========================================
     isOpen = false;
     currentDate = new Date();
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    // =========================================
+    // INITIALIZE VALUE
+    // =========================================
+    ngOnInit() {
+        if (this.value) {
+            const parsedDate = this.parseDate(this.value);
+            if (parsedDate) {
+                this.currentDate =
+                    new Date(parsedDate.getFullYear(), parsedDate.getMonth(), 1);
+            }
+        }
+    }
     // =========================================
     // CALENDAR DAYS
     // =========================================
@@ -367,14 +553,28 @@ class DateInput {
         const firstDay = new Date(year, month, 1);
         const lastDay = new Date(year, month + 1, 0);
         const days = [];
+        /*
+         * Sunday = 0
+         * Monday = 1
+         * ...
+         * Saturday = 6
+         */
         const startDay = firstDay.getDay();
+        // =====================================
+        // PREVIOUS MONTH DAYS
+        // =====================================
         for (let i = 0; i < startDay; i++) {
-            const previousDate = new Date(year, month, i - startDay + 1);
-            days.push(previousDate);
+            days.push(new Date(year, month, i - startDay + 1));
         }
+        // =====================================
+        // CURRENT MONTH DAYS
+        // =====================================
         for (let day = 1; day <= lastDay.getDate(); day++) {
             days.push(new Date(year, month, day));
         }
+        // =====================================
+        // NEXT MONTH DAYS
+        // =====================================
         const remaining = 42 - days.length;
         for (let i = 1; i <= remaining; i++) {
             days.push(new Date(year, month + 1, i));
@@ -389,11 +589,14 @@ class DateInput {
             month: 'long'
         });
     }
+    // =========================================
+    // YEAR
+    // =========================================
     get year() {
         return this.currentDate.getFullYear();
     }
     // =========================================
-    // OPEN / CLOSE
+    // TOGGLE CALENDAR
     // =========================================
     toggleCalendar(event) {
         if (this.disabled ||
@@ -403,20 +606,23 @@ class DateInput {
         if (event) {
             this.clicked.emit(event);
         }
-        this.isOpen = !this.isOpen;
+        this.isOpen =
+            !this.isOpen;
         this.openedChange.emit(this.isOpen);
     }
     // =========================================
     // PREVIOUS MONTH
     // =========================================
-    previousMonth() {
+    previousMonth(event) {
+        event?.stopPropagation();
         this.currentDate =
             new Date(this.year, this.currentDate.getMonth() - 1, 1);
     }
     // =========================================
     // NEXT MONTH
     // =========================================
-    nextMonth() {
+    nextMonth(event) {
+        event?.stopPropagation();
         this.currentDate =
             new Date(this.year, this.currentDate.getMonth() + 1, 1);
     }
@@ -424,14 +630,29 @@ class DateInput {
     // SELECT DATE
     // =========================================
     selectDate(date, event) {
-        if (this.disabled) {
+        event.stopPropagation();
+        if (this.disabled ||
+            this.readonly) {
             return;
         }
+        /*
+         * Create a clean Date object.
+         */
+        const selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        // =====================================
+        // UPDATE VALUE
+        // =====================================
         this.value =
-            this.formatDate(date);
+            this.formatDate(selectedDate);
+        // =====================================
+        // EMIT EVENTS
+        // =====================================
         this.valueChange.emit(this.value);
-        this.dateChange.emit(date);
+        this.dateChange.emit(selectedDate);
         this.clicked.emit(event);
+        // =====================================
+        // CLOSE
+        // =====================================
         this.isOpen = false;
         this.openedChange.emit(false);
     }
@@ -439,15 +660,40 @@ class DateInput {
     // FORMAT DATE
     // =========================================
     formatDate(date) {
-        const day = String(date.getDate())
-            .padStart(2, '0');
-        const month = String(date.getMonth() + 1)
-            .padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
         const year = date.getFullYear();
         return `${year}-${month}-${day}`;
     }
     // =========================================
-    // CHECK CURRENT MONTH
+    // PARSE DATE
+    // =========================================
+    parseDate(value) {
+        const parts = value.split('-');
+        if (parts.length !== 3) {
+            return null;
+        }
+        const year = Number(parts[0]);
+        const month = Number(parts[1]);
+        const day = Number(parts[2]);
+        if (!year ||
+            !month ||
+            !day) {
+            return null;
+        }
+        const date = new Date(year, month - 1, day);
+        /*
+         * Validate the date.
+         */
+        if (date.getFullYear() !== year ||
+            date.getMonth() !== month - 1 ||
+            date.getDate() !== day) {
+            return null;
+        }
+        return date;
+    }
+    // =========================================
+    // CURRENT MONTH
     // =========================================
     isCurrentMonth(date) {
         return (date.getMonth() ===
@@ -456,16 +702,19 @@ class DateInput {
                 this.currentDate.getFullYear());
     }
     // =========================================
-    // CHECK TODAY
+    // TODAY
     // =========================================
     isToday(date) {
         const today = new Date();
-        return (date.getDate() === today.getDate() &&
-            date.getMonth() === today.getMonth() &&
-            date.getFullYear() === today.getFullYear());
+        return (date.getDate() ===
+            today.getDate() &&
+            date.getMonth() ===
+                today.getMonth() &&
+            date.getFullYear() ===
+                today.getFullYear());
     }
     // =========================================
-    // CHECK SELECTED DATE
+    // SELECTED DATE
     // =========================================
     isSelected(date) {
         return (this.value ===
@@ -475,21 +724,32 @@ class DateInput {
     // OUTSIDE CLICK
     // =========================================
     onDocumentClick(event) {
+        if (!this.isOpen) {
+            return;
+        }
         const target = event.target;
-        const dateInput = target.closest('lib-date-input');
-        if (!dateInput &&
-            this.isOpen) {
-            this.isOpen = false;
-            this.openedChange.emit(false);
+        const host = this.elementRef.nativeElement;
+        if (!host.contains(target)) {
+            this.closeCalendar();
+        }
+    }
+    // =========================================
+    // CLOSE CALENDAR
+    // =========================================
+    closeCalendar() {
+        if (!this.isOpen) {
+            return;
         }
+        this.isOpen = false;
+        this.openedChange.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DateInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DateInput, isStandalone: true, selector: "lib-date-input", inputs: { label: "label", placeholder: "placeholder", value: "value", disabled: "disabled", readonly: "readonly", customClass: "customClass" }, outputs: { valueChange: "valueChange", dateChange: "dateChange", openedChange: "openedChange", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n  class=\"date-input-container\"\n  [class]=\"customClass\"\n  [class.date-input-disabled]=\"disabled\"\n  [class.date-input-open]=\"isOpen\"\n>\n\n  <!-- INPUT -->\n\n  <div\n    class=\"date-input-field\"\n    (click)=\"toggleCalendar($event)\"\n  >\n\n    @if (label) {\n      <label class=\"date-input-label\">\n        {{ label }}\n      </label>\n    }\n\n    <span\n      class=\"date-input-value\"\n      [class.date-input-placeholder]=\"!value\"\n    >\n      {{ value || placeholder }}\n    </span>\n\n    <!-- Calendar Icon -->\n\n    <span class=\"calendar-icon\">\n\n      <span class=\"calendar-top\"></span>\n\n      <span class=\"calendar-body\"></span>\n\n    </span>\n\n  </div>\n\n\n  <!-- DATE PICKER -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"date-picker\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- HEADER -->\n\n      <div class=\"date-picker-header\">\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n          (click)=\"previousMonth()\"\n        >\n          \u2039\n        </button>\n\n        <span class=\"month-title\">\n          {{ monthName }} {{ year }}\n        </span>\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n          (click)=\"nextMonth()\"\n        >\n          \u203A\n        </button>\n\n      </div>\n\n\n      <!-- WEEK DAYS -->\n\n      <div class=\"week-days\">\n\n        <span>Sun</span>\n        <span>Mon</span>\n        <span>Tue</span>\n        <span>Wed</span>\n        <span>Thu</span>\n        <span>Fri</span>\n        <span>Sat</span>\n\n      </div>\n\n\n      <!-- DAYS -->\n\n      <div class=\"calendar-days\">\n\n        @for (\n          date of calendarDays;\n          track date.getTime()\n        ) {\n\n          <button\n            type=\"button\"\n\n            class=\"calendar-day\"\n\n            [class.other-month]=\"\n              !isCurrentMonth(date)\n            \"\n\n            [class.today]=\"\n              isToday(date)\n            \"\n\n            [class.selected]=\"\n              isSelected(date)\n            \"\n\n            (click)=\"\n              selectDate(date, $event)\n            \"\n          >\n\n            {{ date.getDate() }}\n\n          </button>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [".date-input-container{--date-width: 300px;--date-height: 44px;--date-background: #ffffff;--date-border: 1px solid #a9a9a9;--date-border-hover: #777777;--date-border-focus: #68479b;--date-radius: 6px;--date-text: #222222;--date-placeholder: #777777;--date-primary: #68479b;--date-hover: #f3f0f7;--date-selected: #68479b;--date-selected-text: #ffffff;--date-font-family: Arial, Helvetica, sans-serif;--date-font-size: 14px;--date-shadow: 0 4px 12px rgba(0, 0, 0, .12);position:relative;width:var(--date-width);font-family:var(--date-font-family);box-sizing:border-box}.date-input-field{position:relative;width:100%;height:var(--date-height);display:flex;align-items:center;box-sizing:border-box;padding:0 50px 0 18px;border:var(--date-border);border-radius:var(--date-radius);background:var(--date-background);color:var(--date-text);font-size:var(--date-font-size);font-weight:600;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.date-input-field:hover{border-color:var(--date-border-hover)}.date-input-open .date-input-field{border-color:var(--date-border-focus);box-shadow:0 0 0 1px #68479b1f}.date-input-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--date-background);color:var(--date-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.date-input-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.date-input-placeholder{color:var(--date-placeholder)}.calendar-icon{position:absolute;right:17px;width:18px;height:18px;box-sizing:border-box;border:1.8px solid #555;border-radius:3px}.calendar-top{position:absolute;left:0;top:4px;width:100%;border-top:1.8px solid #555}.calendar-icon:before,.calendar-icon:after{content:\"\";position:absolute;top:-4px;width:2px;height:6px;background:#555;border-radius:2px}.calendar-icon:before{left:4px}.calendar-icon:after{right:4px}.date-picker{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:300px;z-index:1000;padding:14px;box-sizing:border-box;background:#fff;border:1px solid #d5d5d5;border-radius:var(--date-radius);box-shadow:var(--date-shadow)}.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.month-title{font-size:15px;font-weight:700;color:var(--date-text)}.month-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#555;font-size:24px;line-height:1;cursor:pointer}.month-button:hover{background:var(--date-hover);color:var(--date-primary)}.week-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;text-align:center;color:#777;font-size:12px;font-weight:600}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--date-text);font-size:13px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-day:hover{background:var(--date-hover)}.calendar-day.other-month{color:silver}.calendar-day.today{border:1px solid var(--date-primary);color:var(--date-primary)}.calendar-day.selected{background:var(--date-selected);color:var(--date-selected-text);border:none}.date-input-disabled .date-input-field{background:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}@media(max-width:768px){.date-input-container{width:100%}.date-picker{min-width:100%}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DateInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DateInput, isStandalone: true, selector: "lib-date-input", inputs: { label: "label", placeholder: "placeholder", value: "value", disabled: "disabled", readonly: "readonly", customClass: "customClass" }, outputs: { valueChange: "valueChange", dateChange: "dateChange", openedChange: "openedChange", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.customClass" } }, ngImport: i0, template: "<div\n  class=\"date-input-container\"\n  [class.date-input-disabled]=\"disabled\"\n  [class.date-input-open]=\"isOpen\"\n>\n\n  <!-- =====================================\n       INPUT FIELD\n       ===================================== -->\n\n  <div\n    class=\"date-input-field\"\n    (click)=\"toggleCalendar($event)\"\n  >\n\n    <!-- LABEL -->\n\n    @if (label) {\n\n      <label class=\"date-input-label\">\n\n        {{ label }}\n\n      </label>\n\n    }\n\n\n    <!-- VALUE -->\n\n    <span\n      class=\"date-input-value\"\n      [class.date-input-placeholder]=\"!value\"\n    >\n\n      {{ value || placeholder }}\n\n    </span>\n\n\n    <!-- CALENDAR ICON -->\n\n    <span class=\"calendar-icon\">\n\n      <span class=\"calendar-top\"></span>\n\n      <span class=\"calendar-body\"></span>\n\n    </span>\n\n  </div>\n\n\n  <!-- =====================================\n       DATE PICKER\n       ===================================== -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"date-picker\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- =================================\n           HEADER\n           ================================= -->\n\n      <div class=\"date-picker-header\">\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n\n          aria-label=\"Previous month\"\n\n          (click)=\"previousMonth($event)\"\n        >\n\n          \u2039\n\n        </button>\n\n\n        <span class=\"month-title\">\n\n          {{ monthName }} {{ year }}\n\n        </span>\n\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n\n          aria-label=\"Next month\"\n\n          (click)=\"nextMonth($event)\"\n        >\n\n          \u203A\n\n        </button>\n\n      </div>\n\n\n      <!-- =================================\n           WEEK DAYS\n           ================================= -->\n\n      <div class=\"week-days\">\n\n        <span>Sun</span>\n\n        <span>Mon</span>\n\n        <span>Tue</span>\n\n        <span>Wed</span>\n\n        <span>Thu</span>\n\n        <span>Fri</span>\n\n        <span>Sat</span>\n\n      </div>\n\n\n      <!-- =================================\n           CALENDAR DAYS\n           ================================= -->\n\n      <div class=\"calendar-days\">\n\n        @for (\n          date of calendarDays;\n          track date.getTime()\n        ) {\n\n          <button\n            type=\"button\"\n\n            class=\"calendar-day\"\n\n            [class.other-month]=\"\n              !isCurrentMonth(date)\n            \"\n\n            [class.today]=\"\n              isToday(date)\n            \"\n\n            [class.selected]=\"\n              isSelected(date)\n            \"\n\n            (click)=\"\n              selectDate(date, $event)\n            \"\n          >\n\n            {{ date.getDate() }}\n\n          </button>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [":host{--date-width: 300px;--date-height: 44px;--date-background: #ffffff;--date-border: 1px solid #a9a9a9;--date-border-hover: #777777;--date-border-focus: #68479b;--date-radius: 6px;--date-text: #222222;--date-placeholder: #777777;--date-primary: #68479b;--date-hover: #f3f0f7;--date-selected: #68479b;--date-selected-text: #ffffff;--date-font-family: Arial, Helvetica, sans-serif;--date-font-size: 14px;--date-font-weight: 600;--date-shadow: 0 4px 12px rgba(0, 0, 0, .12);--date-icon-color: #555555;--date-disabled-background: #f5f5f5;--date-disabled-border: #d0d0d0;--date-disabled-text: #999999;display:block;position:relative;width:var(--date-width);box-sizing:border-box;font-family:var(--date-font-family)}.date-input-container{position:relative;width:100%;box-sizing:border-box}.date-input-field{position:relative;width:100%;height:var(--date-height);display:flex;align-items:center;box-sizing:border-box;padding:0 50px 0 18px;border:var(--date-border);border-radius:var(--date-radius);background:var(--date-background);color:var(--date-text);font-size:var(--date-font-size);font-weight:var(--date-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.date-input-field:hover{border-color:var(--date-border-hover)}.date-input-open .date-input-field{border-color:var(--date-border-focus);box-shadow:0 0 0 1px #68479b1f}.date-input-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--date-background);color:var(--date-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.date-input-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--date-text)}.date-input-placeholder{color:var(--date-placeholder)}.calendar-icon{position:absolute;right:17px;width:18px;height:18px;box-sizing:border-box;border:1.8px solid var(--date-icon-color);border-radius:3px}.calendar-top{position:absolute;left:0;top:4px;width:100%;border-top:1.8px solid var(--date-icon-color)}.calendar-icon:before,.calendar-icon:after{content:\"\";position:absolute;top:-4px;width:2px;height:6px;background:var(--date-icon-color);border-radius:2px}.calendar-icon:before{left:4px}.calendar-icon:after{right:4px}.date-picker{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:300px;z-index:1000;padding:14px;box-sizing:border-box;background:#fff;border:1px solid #d5d5d5;border-radius:var(--date-radius);box-shadow:var(--date-shadow)}.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.month-title{font-size:15px;font-weight:700;color:var(--date-text)}.month-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#555;font-size:24px;line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease}.month-button:hover{background:var(--date-hover);color:var(--date-primary)}.week-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;text-align:center;color:#777;font-size:12px;font-weight:600}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--date-text);font-family:var(--date-font-family);font-size:13px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-day:hover{background:var(--date-hover)}.calendar-day.other-month{color:silver}.calendar-day.today{border:1px solid var(--date-primary);color:var(--date-primary)}.calendar-day.selected{background:var(--date-selected);color:var(--date-selected-text);border:none}.calendar-day.selected.today{background:var(--date-selected);color:var(--date-selected-text)}.date-input-disabled .date-input-field{background:var(--date-disabled-background);border-color:var(--date-disabled-border);color:var(--date-disabled-text);cursor:not-allowed}@media(max-width:768px){:host{width:100%}.date-picker{min-width:100%}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DateInput, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-date-input', standalone: true, imports: [], template: "<div\n  class=\"date-input-container\"\n  [class]=\"customClass\"\n  [class.date-input-disabled]=\"disabled\"\n  [class.date-input-open]=\"isOpen\"\n>\n\n  <!-- INPUT -->\n\n  <div\n    class=\"date-input-field\"\n    (click)=\"toggleCalendar($event)\"\n  >\n\n    @if (label) {\n      <label class=\"date-input-label\">\n        {{ label }}\n      </label>\n    }\n\n    <span\n      class=\"date-input-value\"\n      [class.date-input-placeholder]=\"!value\"\n    >\n      {{ value || placeholder }}\n    </span>\n\n    <!-- Calendar Icon -->\n\n    <span class=\"calendar-icon\">\n\n      <span class=\"calendar-top\"></span>\n\n      <span class=\"calendar-body\"></span>\n\n    </span>\n\n  </div>\n\n\n  <!-- DATE PICKER -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"date-picker\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- HEADER -->\n\n      <div class=\"date-picker-header\">\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n          (click)=\"previousMonth()\"\n        >\n          \u2039\n        </button>\n\n        <span class=\"month-title\">\n          {{ monthName }} {{ year }}\n        </span>\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n          (click)=\"nextMonth()\"\n        >\n          \u203A\n        </button>\n\n      </div>\n\n\n      <!-- WEEK DAYS -->\n\n      <div class=\"week-days\">\n\n        <span>Sun</span>\n        <span>Mon</span>\n        <span>Tue</span>\n        <span>Wed</span>\n        <span>Thu</span>\n        <span>Fri</span>\n        <span>Sat</span>\n\n      </div>\n\n\n      <!-- DAYS -->\n\n      <div class=\"calendar-days\">\n\n        @for (\n          date of calendarDays;\n          track date.getTime()\n        ) {\n\n          <button\n            type=\"button\"\n\n            class=\"calendar-day\"\n\n            [class.other-month]=\"\n              !isCurrentMonth(date)\n            \"\n\n            [class.today]=\"\n              isToday(date)\n            \"\n\n            [class.selected]=\"\n              isSelected(date)\n            \"\n\n            (click)=\"\n              selectDate(date, $event)\n            \"\n          >\n\n            {{ date.getDate() }}\n\n          </button>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [".date-input-container{--date-width: 300px;--date-height: 44px;--date-background: #ffffff;--date-border: 1px solid #a9a9a9;--date-border-hover: #777777;--date-border-focus: #68479b;--date-radius: 6px;--date-text: #222222;--date-placeholder: #777777;--date-primary: #68479b;--date-hover: #f3f0f7;--date-selected: #68479b;--date-selected-text: #ffffff;--date-font-family: Arial, Helvetica, sans-serif;--date-font-size: 14px;--date-shadow: 0 4px 12px rgba(0, 0, 0, .12);position:relative;width:var(--date-width);font-family:var(--date-font-family);box-sizing:border-box}.date-input-field{position:relative;width:100%;height:var(--date-height);display:flex;align-items:center;box-sizing:border-box;padding:0 50px 0 18px;border:var(--date-border);border-radius:var(--date-radius);background:var(--date-background);color:var(--date-text);font-size:var(--date-font-size);font-weight:600;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.date-input-field:hover{border-color:var(--date-border-hover)}.date-input-open .date-input-field{border-color:var(--date-border-focus);box-shadow:0 0 0 1px #68479b1f}.date-input-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--date-background);color:var(--date-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.date-input-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.date-input-placeholder{color:var(--date-placeholder)}.calendar-icon{position:absolute;right:17px;width:18px;height:18px;box-sizing:border-box;border:1.8px solid #555;border-radius:3px}.calendar-top{position:absolute;left:0;top:4px;width:100%;border-top:1.8px solid #555}.calendar-icon:before,.calendar-icon:after{content:\"\";position:absolute;top:-4px;width:2px;height:6px;background:#555;border-radius:2px}.calendar-icon:before{left:4px}.calendar-icon:after{right:4px}.date-picker{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:300px;z-index:1000;padding:14px;box-sizing:border-box;background:#fff;border:1px solid #d5d5d5;border-radius:var(--date-radius);box-shadow:var(--date-shadow)}.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.month-title{font-size:15px;font-weight:700;color:var(--date-text)}.month-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#555;font-size:24px;line-height:1;cursor:pointer}.month-button:hover{background:var(--date-hover);color:var(--date-primary)}.week-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;text-align:center;color:#777;font-size:12px;font-weight:600}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--date-text);font-size:13px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-day:hover{background:var(--date-hover)}.calendar-day.other-month{color:silver}.calendar-day.today{border:1px solid var(--date-primary);color:var(--date-primary)}.calendar-day.selected{background:var(--date-selected);color:var(--date-selected-text);border:none}.date-input-disabled .date-input-field{background:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}@media(max-width:768px){.date-input-container{width:100%}.date-picker{min-width:100%}}\n"] }]
-        }], propDecorators: { label: [{
+            args: [{ selector: 'lib-date-input', standalone: true, imports: [], template: "<div\n  class=\"date-input-container\"\n  [class.date-input-disabled]=\"disabled\"\n  [class.date-input-open]=\"isOpen\"\n>\n\n  <!-- =====================================\n       INPUT FIELD\n       ===================================== -->\n\n  <div\n    class=\"date-input-field\"\n    (click)=\"toggleCalendar($event)\"\n  >\n\n    <!-- LABEL -->\n\n    @if (label) {\n\n      <label class=\"date-input-label\">\n\n        {{ label }}\n\n      </label>\n\n    }\n\n\n    <!-- VALUE -->\n\n    <span\n      class=\"date-input-value\"\n      [class.date-input-placeholder]=\"!value\"\n    >\n\n      {{ value || placeholder }}\n\n    </span>\n\n\n    <!-- CALENDAR ICON -->\n\n    <span class=\"calendar-icon\">\n\n      <span class=\"calendar-top\"></span>\n\n      <span class=\"calendar-body\"></span>\n\n    </span>\n\n  </div>\n\n\n  <!-- =====================================\n       DATE PICKER\n       ===================================== -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"date-picker\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- =================================\n           HEADER\n           ================================= -->\n\n      <div class=\"date-picker-header\">\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n\n          aria-label=\"Previous month\"\n\n          (click)=\"previousMonth($event)\"\n        >\n\n          \u2039\n\n        </button>\n\n\n        <span class=\"month-title\">\n\n          {{ monthName }} {{ year }}\n\n        </span>\n\n\n        <button\n          type=\"button\"\n          class=\"month-button\"\n\n          aria-label=\"Next month\"\n\n          (click)=\"nextMonth($event)\"\n        >\n\n          \u203A\n\n        </button>\n\n      </div>\n\n\n      <!-- =================================\n           WEEK DAYS\n           ================================= -->\n\n      <div class=\"week-days\">\n\n        <span>Sun</span>\n\n        <span>Mon</span>\n\n        <span>Tue</span>\n\n        <span>Wed</span>\n\n        <span>Thu</span>\n\n        <span>Fri</span>\n\n        <span>Sat</span>\n\n      </div>\n\n\n      <!-- =================================\n           CALENDAR DAYS\n           ================================= -->\n\n      <div class=\"calendar-days\">\n\n        @for (\n          date of calendarDays;\n          track date.getTime()\n        ) {\n\n          <button\n            type=\"button\"\n\n            class=\"calendar-day\"\n\n            [class.other-month]=\"\n              !isCurrentMonth(date)\n            \"\n\n            [class.today]=\"\n              isToday(date)\n            \"\n\n            [class.selected]=\"\n              isSelected(date)\n            \"\n\n            (click)=\"\n              selectDate(date, $event)\n            \"\n          >\n\n            {{ date.getDate() }}\n\n          </button>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [":host{--date-width: 300px;--date-height: 44px;--date-background: #ffffff;--date-border: 1px solid #a9a9a9;--date-border-hover: #777777;--date-border-focus: #68479b;--date-radius: 6px;--date-text: #222222;--date-placeholder: #777777;--date-primary: #68479b;--date-hover: #f3f0f7;--date-selected: #68479b;--date-selected-text: #ffffff;--date-font-family: Arial, Helvetica, sans-serif;--date-font-size: 14px;--date-font-weight: 600;--date-shadow: 0 4px 12px rgba(0, 0, 0, .12);--date-icon-color: #555555;--date-disabled-background: #f5f5f5;--date-disabled-border: #d0d0d0;--date-disabled-text: #999999;display:block;position:relative;width:var(--date-width);box-sizing:border-box;font-family:var(--date-font-family)}.date-input-container{position:relative;width:100%;box-sizing:border-box}.date-input-field{position:relative;width:100%;height:var(--date-height);display:flex;align-items:center;box-sizing:border-box;padding:0 50px 0 18px;border:var(--date-border);border-radius:var(--date-radius);background:var(--date-background);color:var(--date-text);font-size:var(--date-font-size);font-weight:var(--date-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.date-input-field:hover{border-color:var(--date-border-hover)}.date-input-open .date-input-field{border-color:var(--date-border-focus);box-shadow:0 0 0 1px #68479b1f}.date-input-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--date-background);color:var(--date-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.date-input-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--date-text)}.date-input-placeholder{color:var(--date-placeholder)}.calendar-icon{position:absolute;right:17px;width:18px;height:18px;box-sizing:border-box;border:1.8px solid var(--date-icon-color);border-radius:3px}.calendar-top{position:absolute;left:0;top:4px;width:100%;border-top:1.8px solid var(--date-icon-color)}.calendar-icon:before,.calendar-icon:after{content:\"\";position:absolute;top:-4px;width:2px;height:6px;background:var(--date-icon-color);border-radius:2px}.calendar-icon:before{left:4px}.calendar-icon:after{right:4px}.date-picker{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:300px;z-index:1000;padding:14px;box-sizing:border-box;background:#fff;border:1px solid #d5d5d5;border-radius:var(--date-radius);box-shadow:var(--date-shadow)}.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.month-title{font-size:15px;font-weight:700;color:var(--date-text)}.month-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#555;font-size:24px;line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease}.month-button:hover{background:var(--date-hover);color:var(--date-primary)}.week-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;text-align:center;color:#777;font-size:12px;font-weight:600}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--date-text);font-family:var(--date-font-family);font-size:13px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.calendar-day:hover{background:var(--date-hover)}.calendar-day.other-month{color:silver}.calendar-day.today{border:1px solid var(--date-primary);color:var(--date-primary)}.calendar-day.selected{background:var(--date-selected);color:var(--date-selected-text);border:none}.calendar-day.selected.today{background:var(--date-selected);color:var(--date-selected-text)}.date-input-disabled .date-input-field{background:var(--date-disabled-background);border-color:var(--date-disabled-border);color:var(--date-disabled-text);cursor:not-allowed}@media(max-width:768px){:host{width:100%}.date-picker{min-width:100%}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -501,6 +761,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 type: Input
             }], customClass: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
             }], valueChange: [{
                 type: Output
             }], dateChange: [{
@@ -516,6 +779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             }] } });
 
 class Dropdown {
+    elementRef;
     // =========================================
     // INPUTS
     // =========================================
@@ -529,27 +793,18 @@ class Dropdown {
     // =========================================
     // OUTPUTS
     // =========================================
-    /**
-     * Emits the selected value.
-     */
     valueChange = new EventEmitter();
-    /**
-     * Emits the complete selected option.
-     */
     selectionChange = new EventEmitter();
-    /**
-     * Emits when the dropdown opens/closes.
-     */
     openedChange = new EventEmitter();
-    /**
-     * Developer click event.
-     */
     clicked = new EventEmitter();
     // =========================================
-    // INTERNAL STATE
+    // STATE
     // =========================================
     isOpen = false;
     searchText = '';
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
     // =========================================
     // FILTERED OPTIONS
     // =========================================
@@ -571,7 +826,7 @@ class Dropdown {
         return this.options.find(option => option.value === this.value);
     }
     // =========================================
-    // OPEN / CLOSE
+    // TOGGLE
     // =========================================
     toggleDropdown(event) {
         if (this.disabled) {
@@ -580,35 +835,52 @@ class Dropdown {
         if (event) {
             this.clicked.emit(event);
         }
-        this.isOpen = !this.isOpen;
+        this.isOpen =
+            !this.isOpen;
         this.openedChange.emit(this.isOpen);
         if (!this.isOpen) {
             this.searchText = '';
         }
     }
+    // =========================================
+    // DOCUMENT CLICK
+    // =========================================
     onDocumentClick(event) {
+        if (!this.isOpen) {
+            return;
+        }
         const target = event.target;
-        const dropdown = target.closest('lib-dropdown');
-        if (!dropdown && this.isOpen) {
-            this.isOpen = false;
-            this.searchText = '';
-            this.openedChange.emit(false);
+        const host = this.elementRef.nativeElement;
+        if (!host.contains(target)) {
+            this.closeDropdown();
         }
     }
     // =========================================
-    // SELECT OPTION
+    // CLOSE
+    // =========================================
+    closeDropdown() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+        this.searchText = '';
+        this.openedChange.emit(false);
+    }
+    // =========================================
+    // SELECT
     // =========================================
     selectOption(option, event) {
         if (option.disabled) {
             return;
         }
-        this.value = option.value;
+        this.value =
+            option.value;
         this.valueChange.emit(option.value);
         this.selectionChange.emit(option);
         this.clicked.emit(event);
         this.isOpen = false;
-        this.openedChange.emit(false);
         this.searchText = '';
+        this.openedChange.emit(false);
     }
     // =========================================
     // SEARCH
@@ -618,13 +890,13 @@ class Dropdown {
         this.searchText =
             input.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Dropdown, isStandalone: true, selector: "lib-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", searchable: "searchable", customClass: "customClass" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n  class=\"dropdown-container\"\n  [class]=\"customClass\"\n  [class.dropdown-disabled]=\"disabled\"\n  [class.dropdown-open]=\"isOpen\"\n>\n\n  <!-- =====================================\n       DROPDOWN FIELD\n       ===================================== -->\n\n  <div\n    class=\"dropdown-field\"\n    (click)=\"toggleDropdown($event)\"\n  >\n\n    <!-- Label -->\n\n    @if (label) {\n      <label class=\"dropdown-label\">\n        {{ label }}\n      </label>\n    }\n\n\n    <!-- Selected value -->\n\n    <span\n      class=\"dropdown-value\"\n      [class.dropdown-placeholder]=\"!selectedOption\"\n    >\n      {{\n        selectedOption?.label ||\n        placeholder\n      }}\n    </span>\n\n\n    <!-- Arrow -->\n\n    <span\n      class=\"dropdown-arrow\"\n      [class.arrow-up]=\"isOpen\"\n    >\n    </span>\n\n  </div>\n\n\n  <!-- =====================================\n       DROPDOWN MENU\n       ===================================== -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"dropdown-menu\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- Search -->\n\n      @if (searchable) {\n\n        <div class=\"dropdown-search\">\n\n          <input\n            type=\"text\"\n            class=\"dropdown-search-input\"\n\n            placeholder=\"Search...\"\n\n            [value]=\"searchText\"\n\n            (input)=\"onSearch($event)\"\n          />\n\n        </div>\n\n      }\n\n\n      <!-- Options -->\n\n      <div class=\"dropdown-options\">\n\n        @for (\n          option of filteredOptions;\n          track option.value\n        ) {\n\n          <div\n            class=\"dropdown-option\"\n\n            [class.option-disabled]=\"\n              option.disabled\n            \"\n\n            [class.option-selected]=\"\n              option.value === value\n            \"\n\n            (click)=\"\n              selectOption(option, $event)\n            \"\n          >\n\n            {{ option.label }}\n\n          </div>\n\n        }\n\n\n        <!-- No result -->\n\n        @if (filteredOptions.length === 0) {\n\n          <div class=\"dropdown-no-result\">\n            No results found\n          </div>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [".dropdown-container{--dropdown-width: 300px;--dropdown-height: 44px;--dropdown-background: #ffffff;--dropdown-border: 1px solid #a9a9a9;--dropdown-border-hover: #777777;--dropdown-border-focus: #68479b;--dropdown-radius: 6px;--dropdown-text-color: #222222;--dropdown-placeholder-color: #777777;--dropdown-menu-background: #ffffff;--dropdown-option-hover: #f3f0f7;--dropdown-option-selected: #eee8f5;--dropdown-disabled: #f5f5f5;--dropdown-font-family: Arial, Helvetica, sans-serif;--dropdown-font-size: 14px;--dropdown-font-weight: 600;--dropdown-shadow: 0 4px 12px rgba(0, 0, 0, .12);position:relative;width:var(--dropdown-width);font-family:var(--dropdown-font-family);box-sizing:border-box}.dropdown-field{position:relative;width:100%;height:var(--dropdown-height);display:flex;align-items:center;box-sizing:border-box;padding:0 48px 0 18px;border:var(--dropdown-border);border-radius:var(--dropdown-radius);background:var(--dropdown-background);color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);font-weight:var(--dropdown-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.dropdown-field:hover{border-color:var(--dropdown-border-hover)}.dropdown-open .dropdown-field{border-color:var(--dropdown-border-focus);box-shadow:0 0 0 1px #68479b1f}.dropdown-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--dropdown-background);color:var(--dropdown-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.dropdown-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text-color)}.dropdown-placeholder{color:var(--dropdown-placeholder-color)}.dropdown-arrow{position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid #555;border-bottom:2px solid #555;transform:translateY(-65%) rotate(45deg);transition:transform .2s ease}.dropdown-arrow.arrow-up{transform:translateY(-25%) rotate(225deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:1000;overflow:hidden;background:var(--dropdown-menu-background);border:1px solid #d0d0d0;border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow)}.dropdown-search{padding:8px;border-bottom:1px solid #eeeeee}.dropdown-search-input{width:100%;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid #cfcfcf;border-radius:5px;outline:none;background:#fff;font-family:var(--dropdown-font-family);font-size:14px}.dropdown-search-input:focus{border-color:var(--dropdown-border-focus)}.dropdown-options{max-height:240px;overflow-y:auto}.dropdown-option{min-height:42px;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);cursor:pointer;transition:background-color .15s ease}.dropdown-option:hover{background:var(--dropdown-option-hover)}.dropdown-option.option-selected{background:var(--dropdown-option-selected);color:var(--dropdown-border-focus);font-weight:600}.dropdown-option.option-disabled{color:#aaa;cursor:not-allowed;background:transparent}.dropdown-no-result{min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 15px;color:#888;font-size:13px}.dropdown-disabled .dropdown-field{background:var(--dropdown-disabled);color:#999;border-color:#d0d0d0;cursor:not-allowed}.dropdown-options::-webkit-scrollbar{width:6px}.dropdown-options::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}@media(max-width:768px){.dropdown-container{width:100%}.dropdown-field{height:var(--dropdown-height)}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Dropdown, isStandalone: true, selector: "lib-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", searchable: "searchable", customClass: "customClass" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.customClass" } }, ngImport: i0, template: "<div\n  class=\"dropdown-container\"\n  [class.dropdown-disabled]=\"disabled\"\n  [class.dropdown-open]=\"isOpen\"\n>\n\n  <!-- =====================================\n       FIELD\n       ===================================== -->\n\n  <div\n    class=\"dropdown-field\"\n    (click)=\"toggleDropdown($event)\"\n  >\n\n    <!-- Label -->\n\n    @if (label) {\n\n      <label class=\"dropdown-label\">\n        {{ label }}\n      </label>\n\n    }\n\n\n    <!-- Selected Value -->\n\n    <span\n      class=\"dropdown-value\"\n      [class.dropdown-placeholder]=\"\n        !selectedOption\n      \"\n    >\n\n      {{\n        selectedOption?.label ||\n        placeholder\n      }}\n\n    </span>\n\n\n    <!-- Arrow -->\n\n    <span\n      class=\"dropdown-arrow\"\n      [class.arrow-up]=\"isOpen\"\n    ></span>\n\n  </div>\n\n\n  <!-- =====================================\n       MENU\n       ===================================== -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"dropdown-menu\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- SEARCH -->\n\n      @if (searchable) {\n\n        <div class=\"dropdown-search\">\n\n          <input\n            type=\"text\"\n            class=\"dropdown-search-input\"\n\n            placeholder=\"Search...\"\n\n            [value]=\"searchText\"\n\n            (input)=\"onSearch($event)\"\n          />\n\n        </div>\n\n      }\n\n\n      <!-- OPTIONS -->\n\n      <div class=\"dropdown-options\">\n\n        @for (\n          option of filteredOptions;\n          track option.value\n        ) {\n\n          <div\n            class=\"dropdown-option\"\n\n            [class.option-disabled]=\"\n              option.disabled\n            \"\n\n            [class.option-selected]=\"\n              option.value === value\n            \"\n\n            (click)=\"\n              selectOption(option, $event)\n            \"\n          >\n\n            {{ option.label }}\n\n          </div>\n\n        }\n\n\n        <!-- NO RESULTS -->\n\n        @if (\n          filteredOptions.length === 0\n        ) {\n\n          <div class=\"dropdown-no-result\">\n\n            No results found\n\n          </div>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [":host{--dropdown-width: 300px;--dropdown-height: 44px;--dropdown-background: #ffffff;--dropdown-border: 1px solid #a9a9a9;--dropdown-border-hover: #777777;--dropdown-border-focus: #68479b;--dropdown-radius: 6px;--dropdown-text-color: #222222;--dropdown-placeholder-color: #777777;--dropdown-menu-background: #ffffff;--dropdown-option-hover: #f3f0f7;--dropdown-option-selected: #eee8f5;--dropdown-disabled: #f5f5f5;--dropdown-font-family: Arial, Helvetica, sans-serif;--dropdown-font-size: 14px;--dropdown-font-weight: 600;--dropdown-shadow: 0 4px 12px rgba(0, 0, 0, .12);--dropdown-label-color: #68479b;--dropdown-arrow-color: #555555;--dropdown-search-border: #cfcfcf;display:block;position:relative;width:var(--dropdown-width);box-sizing:border-box}.dropdown-container{position:relative;width:100%;font-family:var(--dropdown-font-family);box-sizing:border-box}.dropdown-field{position:relative;width:100%;height:var(--dropdown-height);display:flex;align-items:center;box-sizing:border-box;padding:0 48px 0 18px;border:var(--dropdown-border);border-radius:var(--dropdown-radius);background:var(--dropdown-background);color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);font-weight:var(--dropdown-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.dropdown-field:hover{border-color:var(--dropdown-border-hover)}.dropdown-open .dropdown-field{border-color:var(--dropdown-border-focus);box-shadow:0 0 0 1px #68479b1f}.dropdown-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--dropdown-background);color:var(--dropdown-label-color);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.dropdown-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text-color)}.dropdown-placeholder{color:var(--dropdown-placeholder-color)}.dropdown-arrow{position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--dropdown-arrow-color);border-bottom:2px solid var(--dropdown-arrow-color);transform:translateY(-65%) rotate(45deg);transition:transform .2s ease}.dropdown-arrow.arrow-up{transform:translateY(-25%) rotate(225deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:1000;overflow:hidden;background:var(--dropdown-menu-background);border:1px solid #d0d0d0;border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow)}.dropdown-search{padding:8px;border-bottom:1px solid #eeeeee}.dropdown-search-input{width:100%;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid var(--dropdown-search-border);border-radius:5px;outline:none;background:#fff;color:var(--dropdown-text-color);font-family:var(--dropdown-font-family);font-size:14px}.dropdown-search-input:focus{border-color:var(--dropdown-border-focus)}.dropdown-options{max-height:240px;overflow-y:auto}.dropdown-option{min-height:42px;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);cursor:pointer;transition:background-color .15s ease}.dropdown-option:hover{background:var(--dropdown-option-hover)}.dropdown-option.option-selected{background:var(--dropdown-option-selected);color:var(--dropdown-border-focus);font-weight:600}.dropdown-option.option-disabled{color:#aaa;cursor:not-allowed;background:transparent}.dropdown-no-result{min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 15px;color:#888;font-size:13px}.dropdown-disabled .dropdown-field{background:var(--dropdown-disabled);color:#999;border-color:#d0d0d0;cursor:not-allowed}.dropdown-options::-webkit-scrollbar{width:6px}.dropdown-options::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}@media(max-width:768px){:host{width:100%}.dropdown-field{height:var(--dropdown-height)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Dropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dropdown', standalone: true, imports: [], template: "<div\n  class=\"dropdown-container\"\n  [class]=\"customClass\"\n  [class.dropdown-disabled]=\"disabled\"\n  [class.dropdown-open]=\"isOpen\"\n>\n\n  <!-- =====================================\n       DROPDOWN FIELD\n       ===================================== -->\n\n  <div\n    class=\"dropdown-field\"\n    (click)=\"toggleDropdown($event)\"\n  >\n\n    <!-- Label -->\n\n    @if (label) {\n      <label class=\"dropdown-label\">\n        {{ label }}\n      </label>\n    }\n\n\n    <!-- Selected value -->\n\n    <span\n      class=\"dropdown-value\"\n      [class.dropdown-placeholder]=\"!selectedOption\"\n    >\n      {{\n        selectedOption?.label ||\n        placeholder\n      }}\n    </span>\n\n\n    <!-- Arrow -->\n\n    <span\n      class=\"dropdown-arrow\"\n      [class.arrow-up]=\"isOpen\"\n    >\n    </span>\n\n  </div>\n\n\n  <!-- =====================================\n       DROPDOWN MENU\n       ===================================== -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"dropdown-menu\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- Search -->\n\n      @if (searchable) {\n\n        <div class=\"dropdown-search\">\n\n          <input\n            type=\"text\"\n            class=\"dropdown-search-input\"\n\n            placeholder=\"Search...\"\n\n            [value]=\"searchText\"\n\n            (input)=\"onSearch($event)\"\n          />\n\n        </div>\n\n      }\n\n\n      <!-- Options -->\n\n      <div class=\"dropdown-options\">\n\n        @for (\n          option of filteredOptions;\n          track option.value\n        ) {\n\n          <div\n            class=\"dropdown-option\"\n\n            [class.option-disabled]=\"\n              option.disabled\n            \"\n\n            [class.option-selected]=\"\n              option.value === value\n            \"\n\n            (click)=\"\n              selectOption(option, $event)\n            \"\n          >\n\n            {{ option.label }}\n\n          </div>\n\n        }\n\n\n        <!-- No result -->\n\n        @if (filteredOptions.length === 0) {\n\n          <div class=\"dropdown-no-result\">\n            No results found\n          </div>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [".dropdown-container{--dropdown-width: 300px;--dropdown-height: 44px;--dropdown-background: #ffffff;--dropdown-border: 1px solid #a9a9a9;--dropdown-border-hover: #777777;--dropdown-border-focus: #68479b;--dropdown-radius: 6px;--dropdown-text-color: #222222;--dropdown-placeholder-color: #777777;--dropdown-menu-background: #ffffff;--dropdown-option-hover: #f3f0f7;--dropdown-option-selected: #eee8f5;--dropdown-disabled: #f5f5f5;--dropdown-font-family: Arial, Helvetica, sans-serif;--dropdown-font-size: 14px;--dropdown-font-weight: 600;--dropdown-shadow: 0 4px 12px rgba(0, 0, 0, .12);position:relative;width:var(--dropdown-width);font-family:var(--dropdown-font-family);box-sizing:border-box}.dropdown-field{position:relative;width:100%;height:var(--dropdown-height);display:flex;align-items:center;box-sizing:border-box;padding:0 48px 0 18px;border:var(--dropdown-border);border-radius:var(--dropdown-radius);background:var(--dropdown-background);color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);font-weight:var(--dropdown-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.dropdown-field:hover{border-color:var(--dropdown-border-hover)}.dropdown-open .dropdown-field{border-color:var(--dropdown-border-focus);box-shadow:0 0 0 1px #68479b1f}.dropdown-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--dropdown-background);color:var(--dropdown-border-focus);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.dropdown-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text-color)}.dropdown-placeholder{color:var(--dropdown-placeholder-color)}.dropdown-arrow{position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid #555;border-bottom:2px solid #555;transform:translateY(-65%) rotate(45deg);transition:transform .2s ease}.dropdown-arrow.arrow-up{transform:translateY(-25%) rotate(225deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:1000;overflow:hidden;background:var(--dropdown-menu-background);border:1px solid #d0d0d0;border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow)}.dropdown-search{padding:8px;border-bottom:1px solid #eeeeee}.dropdown-search-input{width:100%;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid #cfcfcf;border-radius:5px;outline:none;background:#fff;font-family:var(--dropdown-font-family);font-size:14px}.dropdown-search-input:focus{border-color:var(--dropdown-border-focus)}.dropdown-options{max-height:240px;overflow-y:auto}.dropdown-option{min-height:42px;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);cursor:pointer;transition:background-color .15s ease}.dropdown-option:hover{background:var(--dropdown-option-hover)}.dropdown-option.option-selected{background:var(--dropdown-option-selected);color:var(--dropdown-border-focus);font-weight:600}.dropdown-option.option-disabled{color:#aaa;cursor:not-allowed;background:transparent}.dropdown-no-result{min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 15px;color:#888;font-size:13px}.dropdown-disabled .dropdown-field{background:var(--dropdown-disabled);color:#999;border-color:#d0d0d0;cursor:not-allowed}.dropdown-options::-webkit-scrollbar{width:6px}.dropdown-options::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}@media(max-width:768px){.dropdown-container{width:100%}.dropdown-field{height:var(--dropdown-height)}}\n"] }]
-        }], propDecorators: { label: [{
+            args: [{ selector: 'lib-dropdown', standalone: true, imports: [], template: "<div\n  class=\"dropdown-container\"\n  [class.dropdown-disabled]=\"disabled\"\n  [class.dropdown-open]=\"isOpen\"\n>\n\n  <!-- =====================================\n       FIELD\n       ===================================== -->\n\n  <div\n    class=\"dropdown-field\"\n    (click)=\"toggleDropdown($event)\"\n  >\n\n    <!-- Label -->\n\n    @if (label) {\n\n      <label class=\"dropdown-label\">\n        {{ label }}\n      </label>\n\n    }\n\n\n    <!-- Selected Value -->\n\n    <span\n      class=\"dropdown-value\"\n      [class.dropdown-placeholder]=\"\n        !selectedOption\n      \"\n    >\n\n      {{\n        selectedOption?.label ||\n        placeholder\n      }}\n\n    </span>\n\n\n    <!-- Arrow -->\n\n    <span\n      class=\"dropdown-arrow\"\n      [class.arrow-up]=\"isOpen\"\n    ></span>\n\n  </div>\n\n\n  <!-- =====================================\n       MENU\n       ===================================== -->\n\n  @if (isOpen) {\n\n    <div\n      class=\"dropdown-menu\"\n      (click)=\"$event.stopPropagation()\"\n    >\n\n      <!-- SEARCH -->\n\n      @if (searchable) {\n\n        <div class=\"dropdown-search\">\n\n          <input\n            type=\"text\"\n            class=\"dropdown-search-input\"\n\n            placeholder=\"Search...\"\n\n            [value]=\"searchText\"\n\n            (input)=\"onSearch($event)\"\n          />\n\n        </div>\n\n      }\n\n\n      <!-- OPTIONS -->\n\n      <div class=\"dropdown-options\">\n\n        @for (\n          option of filteredOptions;\n          track option.value\n        ) {\n\n          <div\n            class=\"dropdown-option\"\n\n            [class.option-disabled]=\"\n              option.disabled\n            \"\n\n            [class.option-selected]=\"\n              option.value === value\n            \"\n\n            (click)=\"\n              selectOption(option, $event)\n            \"\n          >\n\n            {{ option.label }}\n\n          </div>\n\n        }\n\n\n        <!-- NO RESULTS -->\n\n        @if (\n          filteredOptions.length === 0\n        ) {\n\n          <div class=\"dropdown-no-result\">\n\n            No results found\n\n          </div>\n\n        }\n\n      </div>\n\n    </div>\n\n  }\n\n</div>", styles: [":host{--dropdown-width: 300px;--dropdown-height: 44px;--dropdown-background: #ffffff;--dropdown-border: 1px solid #a9a9a9;--dropdown-border-hover: #777777;--dropdown-border-focus: #68479b;--dropdown-radius: 6px;--dropdown-text-color: #222222;--dropdown-placeholder-color: #777777;--dropdown-menu-background: #ffffff;--dropdown-option-hover: #f3f0f7;--dropdown-option-selected: #eee8f5;--dropdown-disabled: #f5f5f5;--dropdown-font-family: Arial, Helvetica, sans-serif;--dropdown-font-size: 14px;--dropdown-font-weight: 600;--dropdown-shadow: 0 4px 12px rgba(0, 0, 0, .12);--dropdown-label-color: #68479b;--dropdown-arrow-color: #555555;--dropdown-search-border: #cfcfcf;display:block;position:relative;width:var(--dropdown-width);box-sizing:border-box}.dropdown-container{position:relative;width:100%;font-family:var(--dropdown-font-family);box-sizing:border-box}.dropdown-field{position:relative;width:100%;height:var(--dropdown-height);display:flex;align-items:center;box-sizing:border-box;padding:0 48px 0 18px;border:var(--dropdown-border);border-radius:var(--dropdown-radius);background:var(--dropdown-background);color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);font-weight:var(--dropdown-font-weight);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.dropdown-field:hover{border-color:var(--dropdown-border-hover)}.dropdown-open .dropdown-field{border-color:var(--dropdown-border-focus);box-shadow:0 0 0 1px #68479b1f}.dropdown-label{position:absolute;top:0;left:14px;transform:translateY(-50%);padding:0 6px;background:var(--dropdown-background);color:var(--dropdown-label-color);font-size:13px;font-weight:500;line-height:1;pointer-events:none}.dropdown-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dropdown-text-color)}.dropdown-placeholder{color:var(--dropdown-placeholder-color)}.dropdown-arrow{position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--dropdown-arrow-color);border-bottom:2px solid var(--dropdown-arrow-color);transform:translateY(-65%) rotate(45deg);transition:transform .2s ease}.dropdown-arrow.arrow-up{transform:translateY(-25%) rotate(225deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;z-index:1000;overflow:hidden;background:var(--dropdown-menu-background);border:1px solid #d0d0d0;border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow)}.dropdown-search{padding:8px;border-bottom:1px solid #eeeeee}.dropdown-search-input{width:100%;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid var(--dropdown-search-border);border-radius:5px;outline:none;background:#fff;color:var(--dropdown-text-color);font-family:var(--dropdown-font-family);font-size:14px}.dropdown-search-input:focus{border-color:var(--dropdown-border-focus)}.dropdown-options{max-height:240px;overflow-y:auto}.dropdown-option{min-height:42px;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;color:var(--dropdown-text-color);font-size:var(--dropdown-font-size);cursor:pointer;transition:background-color .15s ease}.dropdown-option:hover{background:var(--dropdown-option-hover)}.dropdown-option.option-selected{background:var(--dropdown-option-selected);color:var(--dropdown-border-focus);font-weight:600}.dropdown-option.option-disabled{color:#aaa;cursor:not-allowed;background:transparent}.dropdown-no-result{min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 15px;color:#888;font-size:13px}.dropdown-disabled .dropdown-field{background:var(--dropdown-disabled);color:#999;border-color:#d0d0d0;cursor:not-allowed}.dropdown-options::-webkit-scrollbar{width:6px}.dropdown-options::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}@media(max-width:768px){:host{width:100%}.dropdown-field{height:var(--dropdown-height)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -638,6 +910,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 type: Input
             }], customClass: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
             }], valueChange: [{
                 type: Output
             }], selectionChange: [{
@@ -648,7 +923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 type: Output
             }], onDocumentClick: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ['document:click',
+                    ['$event']]
             }] } });
 
 /*