@goat-bravos/intern-hub-layout 4.0.4 → 4.0.6

package/fesm2022/goat-bravos-intern-hub-layout.mjs

@@ -612,6 +612,12 @@ class InputTextComponent {
             return '';
         return `${this.currentLength}/${this.maxLength}`;
     }
+    /** Block invalid characters (e, E, +, -) for number inputs */
+    onKeydown(event) {
+        if (this.typeInput === 'number' && ['e', 'E', '+', '-'].includes(event.key)) {
+            event.preventDefault();
+        }
+    }
     onInput(event) {
         const input = event.target;
         let newValue = input.value;
@@ -624,11 +630,11 @@ class InputTextComponent {
         this.valueChange.emit(this._value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputTextComponent, isStandalone: true, selector: "app-input-text", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", width: "width", maxLength: "maxLength", showLimit: "showLimit", icon: "icon", widthIcon: "widthIcon", heightIcon: "heightIcon", typeInput: "typeInput", showLabel: "showLabel", placeholderColor: "placeholderColor", border: "border", borderRadius: "borderRadius", padding: "padding", height: "height", fontSizeContent: "fontSizeContent", fontWeightContent: "fontWeightContent", colorContent: "colorContent", fontSizeLabel: "fontSizeLabel", fontWeightLabel: "fontWeightLabel", colorLabel: "colorLabel", errorMessage: "errorMessage", backgroundColor: "backgroundColor", borderColor: "borderColor", borderColorHover: "borderColorHover", value: "value" }, outputs: { valueChange: "valueChange", iconClick: "iconClick" }, ngImport: i0, template: "<div class=\"input-form\">\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\">\r\n      @if (showLabel) {\r\n        <span\r\n          class=\"label-text\"\r\n          [class.hidden]=\"!headerInput\"\r\n          [style.font-size]=\"fontSizeLabel || null\"\r\n          [style.font-weight]=\"fontWeightLabel || null\"\r\n          [style.color]=\"colorLabel || null\"\r\n        >\r\n          {{ headerInput }}\r\n          @if (required) {\r\n            <span class=\"required-mark\">*</span>\r\n          }\r\n        </span>\r\n      }\r\n      <div class=\"input-field-wrapper\">\r\n        <input\r\n          [type]=\"typeInput\"\r\n          class=\"input-form-field\"\r\n          [placeholder]=\"placeholder\"\r\n          [readonly]=\"readonly\"\r\n          [required]=\"required\"\r\n          [style.width]=\"width\"\r\n          [style.height]=\"height\"\r\n          [style.padding]=\"padding\"\r\n          [style.border]=\"border || null\"\r\n          [style.border-radius]=\"borderRadius\"\r\n          [style.background-color]=\"backgroundColor\"\r\n          [style.--placeholder-color]=\"placeholderColor || null\"\r\n          [style.font-size]=\"fontSizeContent || null\"\r\n          [style.font-weight]=\"fontWeightContent || null\"\r\n          [style.color]=\"colorContent || null\"\r\n          [style.--border-color]=\"borderColor || null\"\r\n          [style.--border-color-hover]=\"borderColorHover || null\"\r\n          [value]=\"value\"\r\n          (input)=\"onInput($event)\"\r\n          [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n        />\r\n        @if (icon) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"input-icon-button\"\r\n            [class.clickable]=\"iconClick.observed\"\r\n            (click)=\"onIconClick()\"\r\n            [attr.aria-label]=\"icon\"\r\n            [disabled]=\"!iconClick.observed\"\r\n          >\r\n            <i\r\n              [class]=\"icon\"\r\n              [style.width]=\"widthIcon\"\r\n              [style.height]=\"heightIcon\"\r\n              class=\"input-icon\"\r\n            ></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </label>\r\n  </div>\r\n  <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n    <span class=\"error-message\">{{ errorMessage }}</span>\r\n    <span>{{ limit }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{display:none}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--border-color, var(--neutral-color-200));border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--placeholder-color, var(--neutral-color-300));opacity:1}.input-form-field:hover{border-color:var(--border-color-hover, var(--neutral-color-400))}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:space-between}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: InputTextComponent, isStandalone: true, selector: "app-input-text", inputs: { headerInput: "headerInput", placeholder: "placeholder", readonly: "readonly", required: "required", width: "width", maxLength: "maxLength", showLimit: "showLimit", icon: "icon", widthIcon: "widthIcon", heightIcon: "heightIcon", typeInput: "typeInput", showLabel: "showLabel", placeholderColor: "placeholderColor", border: "border", borderRadius: "borderRadius", padding: "padding", height: "height", fontSizeContent: "fontSizeContent", fontWeightContent: "fontWeightContent", colorContent: "colorContent", fontSizeLabel: "fontSizeLabel", fontWeightLabel: "fontWeightLabel", colorLabel: "colorLabel", errorMessage: "errorMessage", backgroundColor: "backgroundColor", borderColor: "borderColor", borderColorHover: "borderColorHover", value: "value" }, outputs: { valueChange: "valueChange", iconClick: "iconClick" }, ngImport: i0, template: "<div class=\"input-form\">\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\">\r\n      @if (showLabel) {\r\n        <span\r\n          class=\"label-text\"\r\n          [class.hidden]=\"!headerInput\"\r\n          [style.font-size]=\"fontSizeLabel || null\"\r\n          [style.font-weight]=\"fontWeightLabel || null\"\r\n          [style.color]=\"colorLabel || null\"\r\n        >\r\n          {{ headerInput }}\r\n          @if (required) {\r\n            <span class=\"required-mark\">*</span>\r\n          }\r\n        </span>\r\n      }\r\n      <div class=\"input-field-wrapper\">\r\n        <input\r\n          [type]=\"typeInput\"\r\n          class=\"input-form-field\"\r\n          [placeholder]=\"placeholder\"\r\n          [readonly]=\"readonly\"\r\n          [required]=\"required\"\r\n          [style.width]=\"width\"\r\n          [style.height]=\"height\"\r\n          [style.padding]=\"padding\"\r\n          [style.border]=\"border || null\"\r\n          [style.border-radius]=\"borderRadius\"\r\n          [style.background-color]=\"backgroundColor\"\r\n          [style.--placeholder-color]=\"placeholderColor || null\"\r\n          [style.font-size]=\"fontSizeContent || null\"\r\n          [style.font-weight]=\"fontWeightContent || null\"\r\n          [style.color]=\"colorContent || null\"\r\n          [style.--border-color]=\"borderColor || null\"\r\n          [style.--border-color-hover]=\"borderColorHover || null\"\r\n          [value]=\"value\"\r\n          (input)=\"onInput($event)\"\r\n          (keydown)=\"onKeydown($event)\"\r\n          [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n        />\r\n        @if (icon) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"input-icon-button\"\r\n            [class.clickable]=\"iconClick.observed\"\r\n            (click)=\"onIconClick()\"\r\n            [attr.aria-label]=\"icon\"\r\n            [disabled]=\"!iconClick.observed\"\r\n          >\r\n            <i\r\n              [class]=\"icon\"\r\n              [style.width]=\"widthIcon\"\r\n              [style.height]=\"heightIcon\"\r\n              class=\"input-icon\"\r\n            ></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </label>\r\n  </div>\r\n  <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n    <span class=\"error-message\">{{ errorMessage }}</span>\r\n    <span>{{ limit }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{display:none}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--border-color, var(--neutral-color-200));border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--placeholder-color, var(--neutral-color-300));opacity:1}.input-form-field:hover{border-color:var(--border-color-hover, var(--neutral-color-400))}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=number]{-moz-appearance:textfield;appearance:textfield}.input-form-field[type=number]::-webkit-outer-spin-button,.input-form-field[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:space-between}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\">\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\">\r\n      @if (showLabel) {\r\n        <span\r\n          class=\"label-text\"\r\n          [class.hidden]=\"!headerInput\"\r\n          [style.font-size]=\"fontSizeLabel || null\"\r\n          [style.font-weight]=\"fontWeightLabel || null\"\r\n          [style.color]=\"colorLabel || null\"\r\n        >\r\n          {{ headerInput }}\r\n          @if (required) {\r\n            <span class=\"required-mark\">*</span>\r\n          }\r\n        </span>\r\n      }\r\n      <div class=\"input-field-wrapper\">\r\n        <input\r\n          [type]=\"typeInput\"\r\n          class=\"input-form-field\"\r\n          [placeholder]=\"placeholder\"\r\n          [readonly]=\"readonly\"\r\n          [required]=\"required\"\r\n          [style.width]=\"width\"\r\n          [style.height]=\"height\"\r\n          [style.padding]=\"padding\"\r\n          [style.border]=\"border || null\"\r\n          [style.border-radius]=\"borderRadius\"\r\n          [style.background-color]=\"backgroundColor\"\r\n          [style.--placeholder-color]=\"placeholderColor || null\"\r\n          [style.font-size]=\"fontSizeContent || null\"\r\n          [style.font-weight]=\"fontWeightContent || null\"\r\n          [style.color]=\"colorContent || null\"\r\n          [style.--border-color]=\"borderColor || null\"\r\n          [style.--border-color-hover]=\"borderColorHover || null\"\r\n          [value]=\"value\"\r\n          (input)=\"onInput($event)\"\r\n          [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n        />\r\n        @if (icon) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"input-icon-button\"\r\n            [class.clickable]=\"iconClick.observed\"\r\n            (click)=\"onIconClick()\"\r\n            [attr.aria-label]=\"icon\"\r\n            [disabled]=\"!iconClick.observed\"\r\n          >\r\n            <i\r\n              [class]=\"icon\"\r\n              [style.width]=\"widthIcon\"\r\n              [style.height]=\"heightIcon\"\r\n              class=\"input-icon\"\r\n            ></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </label>\r\n  </div>\r\n  <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n    <span class=\"error-message\">{{ errorMessage }}</span>\r\n    <span>{{ limit }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{display:none}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--border-color, var(--neutral-color-200));border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--placeholder-color, var(--neutral-color-300));opacity:1}.input-form-field:hover{border-color:var(--border-color-hover, var(--neutral-color-400))}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:space-between}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"] }]
+            args: [{ selector: 'app-input-text', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"input-form\">\r\n  <div class=\"input-form-content\">\r\n    <label class=\"input-form-label\">\r\n      @if (showLabel) {\r\n        <span\r\n          class=\"label-text\"\r\n          [class.hidden]=\"!headerInput\"\r\n          [style.font-size]=\"fontSizeLabel || null\"\r\n          [style.font-weight]=\"fontWeightLabel || null\"\r\n          [style.color]=\"colorLabel || null\"\r\n        >\r\n          {{ headerInput }}\r\n          @if (required) {\r\n            <span class=\"required-mark\">*</span>\r\n          }\r\n        </span>\r\n      }\r\n      <div class=\"input-field-wrapper\">\r\n        <input\r\n          [type]=\"typeInput\"\r\n          class=\"input-form-field\"\r\n          [placeholder]=\"placeholder\"\r\n          [readonly]=\"readonly\"\r\n          [required]=\"required\"\r\n          [style.width]=\"width\"\r\n          [style.height]=\"height\"\r\n          [style.padding]=\"padding\"\r\n          [style.border]=\"border || null\"\r\n          [style.border-radius]=\"borderRadius\"\r\n          [style.background-color]=\"backgroundColor\"\r\n          [style.--placeholder-color]=\"placeholderColor || null\"\r\n          [style.font-size]=\"fontSizeContent || null\"\r\n          [style.font-weight]=\"fontWeightContent || null\"\r\n          [style.color]=\"colorContent || null\"\r\n          [style.--border-color]=\"borderColor || null\"\r\n          [style.--border-color-hover]=\"borderColorHover || null\"\r\n          [value]=\"value\"\r\n          (input)=\"onInput($event)\"\r\n          (keydown)=\"onKeydown($event)\"\r\n          [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\r\n        />\r\n        @if (icon) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"input-icon-button\"\r\n            [class.clickable]=\"iconClick.observed\"\r\n            (click)=\"onIconClick()\"\r\n            [attr.aria-label]=\"icon\"\r\n            [disabled]=\"!iconClick.observed\"\r\n          >\r\n            <i\r\n              [class]=\"icon\"\r\n              [style.width]=\"widthIcon\"\r\n              [style.height]=\"heightIcon\"\r\n              class=\"input-icon\"\r\n            ></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </label>\r\n  </div>\r\n  <div class=\"limit\" [class.hidden]=\"!(maxLength > 0 && showLimit)\">\r\n    <span class=\"error-message\">{{ errorMessage }}</span>\r\n    <span>{{ limit }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".input-form{display:flex;flex-direction:column;justify-content:space-between;gap:4px}.hidden{display:none}.input-form-label{display:block;font-size:var(--font-sm);font-weight:700;color:var(--neutral-color-700)}.label-text{display:block;margin-bottom:4px;height:20px}.required-mark{color:var(--utility-600);margin-left:2px}.input-form-field{padding:8px 12px;border:1px solid var(--border-color, var(--neutral-color-200));border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--neutral-color-875);height:36px;width:100%;box-sizing:border-box;background-color:var(--neutral-color-10);transition:border-color .2s ease,box-shadow .2s ease}.input-form-field::placeholder{color:var(--placeholder-color, var(--neutral-color-300));opacity:1}.input-form-field:hover{border-color:var(--border-color-hover, var(--neutral-color-400))}.input-form-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 2px rgba(var(--brand-500-rgb, 39, 64, 180),.15)}.input-form-field:read-only{background-color:var(--neutral-color-25);cursor:not-allowed}.input-form-field[type=number]{-moz-appearance:textfield;appearance:textfield}.input-form-field[type=number]::-webkit-outer-spin-button,.input-form-field[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.input-form-field[type=password]{font-family:Verdana,sans-serif;font-size:16px;letter-spacing:3px}.input-form-field[type=password]::placeholder{font-family:inherit;font-size:var(--font-sm);letter-spacing:normal}.input-field-wrapper:has(.input-icon-button) .input-form-field{padding-right:36px}.input-field-wrapper{position:relative;display:flex;align-items:center}.input-icon-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--neutral-color-500);transition:color .2s ease;outline:none}.input-icon-button.clickable{cursor:pointer}.input-icon-button.clickable:hover .input-icon{color:var(--brand-500)}.input-icon-button:disabled{cursor:default;pointer-events:none}.input-icon{font-size:14px!important;width:14px;height:14px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.input-icon:before{font-size:14px!important}.limit{display:flex;justify-content:space-between}.limit span{font-size:var(--font-xs, 12px);color:var(--neutral-color-500)}\n"] }]
         }], propDecorators: { headerInput: [{
                 type: Input
             }], placeholder: [{
@@ -1003,10 +1009,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             }] } });
 
 class PopUpConfirmComponent {
-    imgUrl = '';
+    imgUrl = 'https://s3.vn-hcm-1.vietnix.cloud/bravos/uploads/success-popup.svg';
     title = '';
     content = '';
     colorButton = 'var(--brand-600)';
+    confirmLabel = 'Đồng ý';
+    cancelLabel = 'Quay Lại';
+    showCancel = true;
     confirmClick = new EventEmitter();
     cancelClick = new EventEmitter();
     onConfirm() {
@@ -1016,11 +1025,11 @@ class PopUpConfirmComponent {
         this.cancelClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopUpConfirmComponent, isStandalone: true, selector: "app-pop-up-confirm", inputs: { imgUrl: "imgUrl", title: "title", content: "content", colorButton: "colorButton" }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, ngImport: i0, template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["buttonData", "size", "content", "fontSize", "leftIcon", "leftIconData", "rightIcon", "rightIconData", "color", "backgroundColor", "border", "borderRadius", "width", "height", "padding", "marginLeft", "marginRight", "borderColor"], outputs: ["buttonClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopUpConfirmComponent, isStandalone: true, selector: "app-pop-up-confirm", inputs: { imgUrl: "imgUrl", title: "title", content: "content", colorButton: "colorButton", confirmLabel: "confirmLabel", cancelLabel: "cancelLabel", showCancel: "showCancel" }, outputs: { confirmClick: "confirmClick", cancelClick: "cancelClick" }, ngImport: i0, template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container *ngIf=\"showCancel\" size=\"md\" [content]=\"cancelLabel\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" [content]=\"confirmLabel\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10, #fff);border-radius:var(--radius-lg, 16px);padding:24px;min-width:320px;max-width:400px;width:100%;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15);display:flex;flex-direction:column;align-items:center}.pop-up-confirm-content{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}.pop-up-title{font-size:var(--font-xl, 18px);font-weight:600;color:var(--neutral-color-875, #1e2225);margin:0}.pop-up-content{font-size:var(--font-sm, 14px);color:var(--neutral-color-500, #6b7280);margin:0;line-height:1.5}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:32px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["buttonData", "size", "content", "fontSize", "leftIcon", "leftIconData", "rightIcon", "rightIconData", "color", "backgroundColor", "border", "borderRadius", "width", "height", "padding", "marginLeft", "marginRight", "borderColor"], outputs: ["buttonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container size=\"md\" content=\"Quay L\u1EA1i\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" content=\"\u0110\u1ED3ng \u00DD\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10);border-radius:var(--radius-lg);padding:24px;min-width:320px;max-width:400px;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15)}.pop-up-confirm-content{display:flex;gap:16px;align-items:center;justify-content:center;flex-direction:column;margin-bottom:24px;width:352px;height:172px}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.pop-up-title{font-size:var(--font-xl);font-weight:600;color:var(--neutral-color-875);margin:0}.pop-up-content{font-size:var(--font-sm);color:var(--neutral-color-500);margin:0}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;padding:16px 8px}\n"] }]
+            args: [{ selector: 'app-pop-up-confirm', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div class=\"pop-up-confirm-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\">\r\n    <div class=\"pop-up-confirm\">\r\n        <div class=\"pop-up-confirm-content\">\r\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\r\n            <div class=\"pop-up-confirm-text\">\r\n                <p class=\"pop-up-title\" id=\"popup-title\">{{title}}</p>\r\n                <p class=\"pop-up-content\">{{content}}</p>\r\n            </div>\r\n        </div>\r\n        <div class=\"pop-up-confirm-actions\">\r\n            <app-button-container *ngIf=\"showCancel\" size=\"md\" [content]=\"cancelLabel\" backgroundColor=\"var(--neutral-100)\" color=\"var(--neutral-800)\" (buttonClick)=\"onCancel()\"></app-button-container>\r\n            <app-button-container size=\"md\" [content]=\"confirmLabel\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onConfirm()\"></app-button-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pop-up-confirm-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-confirm{background-color:var(--neutral-color-10, #fff);border-radius:var(--radius-lg, 16px);padding:24px;min-width:320px;max-width:400px;width:100%;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15);display:flex;flex-direction:column;align-items:center}.pop-up-confirm-content{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.pop-up-confirm-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-confirm-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}.pop-up-title{font-size:var(--font-xl, 18px);font-weight:600;color:var(--neutral-color-875, #1e2225);margin:0}.pop-up-content{font-size:var(--font-sm, 14px);color:var(--neutral-color-500, #6b7280);margin:0;line-height:1.5}.pop-up-confirm-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:32px;width:100%}\n"] }]
         }], propDecorators: { imgUrl: [{
                 type: Input
             }], title: [{
@@ -1029,12 +1038,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 type: Input
             }], colorButton: [{
                 type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }], showCancel: [{
+                type: Input
             }], confirmClick: [{
                 type: Output
             }], cancelClick: [{
                 type: Output
             }] } });
 
+class PopUpInfoComponent {
+    imgUrl = 'https://s3.vn-hcm-1.vietnix.cloud/bravos/uploads/success-popup.svg';
+    title = '';
+    content = '';
+    colorButton = 'var(--brand-600)';
+    actionLabel = 'Đồng ý';
+    actionClick = new EventEmitter();
+    onAction() {
+        this.actionClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopUpInfoComponent, isStandalone: true, selector: "app-pop-up-info", inputs: { imgUrl: "imgUrl", title: "title", content: "content", colorButton: "colorButton", actionLabel: "actionLabel" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"pop-up-info-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"pop-up-info-title\">\n    <div class=\"pop-up-info\">\n        <div class=\"pop-up-info-content\">\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\n            <div class=\"pop-up-info-text\">\n                <p class=\"pop-up-info-title\" id=\"pop-up-info-title\">{{title}}</p>\n                <p class=\"pop-up-info-desc\">{{content}}</p>\n            </div>\n        </div>\n        <div class=\"pop-up-info-actions\">\n            <app-button-container size=\"md\" [content]=\"actionLabel\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onAction()\"></app-button-container>\n        </div>\n    </div>\n</div>\n", styles: [".pop-up-info-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-info{background-color:var(--neutral-color-10, #fff);border-radius:var(--radius-lg, 16px);padding:24px;min-width:320px;max-width:400px;width:100%;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15);display:flex;flex-direction:column;align-items:center}.pop-up-info-content{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.pop-up-info-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-info-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}.pop-up-info-title{font-size:var(--font-xl, 18px);font-weight:600;color:var(--neutral-color-875, #1e2225);margin:0}.pop-up-info-desc{font-size:var(--font-sm, 14px);color:var(--neutral-color-500, #6b7280);margin:0;line-height:1.5}.pop-up-info-actions{display:flex;justify-content:center;align-items:center;margin-top:32px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonContainerComponent, selector: "app-button-container", inputs: ["buttonData", "size", "content", "fontSize", "leftIcon", "leftIconData", "rightIcon", "rightIconData", "color", "backgroundColor", "border", "borderRadius", "width", "height", "padding", "marginLeft", "marginRight", "borderColor"], outputs: ["buttonClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopUpInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pop-up-info', standalone: true, imports: [CommonModule, ButtonContainerComponent], template: "<div class=\"pop-up-info-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"pop-up-info-title\">\n    <div class=\"pop-up-info\">\n        <div class=\"pop-up-info-content\">\n            <img *ngIf=\"imgUrl\" [src]=\"imgUrl\" alt=\"\">\n            <div class=\"pop-up-info-text\">\n                <p class=\"pop-up-info-title\" id=\"pop-up-info-title\">{{title}}</p>\n                <p class=\"pop-up-info-desc\">{{content}}</p>\n            </div>\n        </div>\n        <div class=\"pop-up-info-actions\">\n            <app-button-container size=\"md\" [content]=\"actionLabel\" [backgroundColor]=\"colorButton\" color=\"#fff\" (buttonClick)=\"onAction()\"></app-button-container>\n        </div>\n    </div>\n</div>\n", styles: [".pop-up-info-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--neutral-color-875-rgb, 30, 34, 37),.5);display:flex;justify-content:center;align-items:center;z-index:1000}.pop-up-info{background-color:var(--neutral-color-10, #fff);border-radius:var(--radius-lg, 16px);padding:24px;min-width:320px;max-width:400px;width:100%;box-shadow:0 4px 20px rgba(var(--neutral-color-875-rgb, 30, 34, 37),.15);display:flex;flex-direction:column;align-items:center}.pop-up-info-content{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.pop-up-info-content img{width:96px;height:96px;object-fit:contain;flex-shrink:0}.pop-up-info-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}.pop-up-info-title{font-size:var(--font-xl, 18px);font-weight:600;color:var(--neutral-color-875, #1e2225);margin:0}.pop-up-info-desc{font-size:var(--font-sm, 14px);color:var(--neutral-color-500, #6b7280);margin:0;line-height:1.5}.pop-up-info-actions{display:flex;justify-content:center;align-items:center;margin-top:32px;width:100%}\n"] }]
+        }], propDecorators: { imgUrl: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], colorButton: [{
+                type: Input
+            }], actionLabel: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
 class ModalComponent {
     title = '';
     isOpen = false;
@@ -1268,6 +1313,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             }] } });
 
 class DatePickerComponent {
+    el;
+    keydownHandler = (e) => this.onInputKeydown(e);
+    pasteHandler = (e) => this.onInputPaste(e);
+    inputHandler = (e) => this.onInputAutoSeparator(e);
+    isDeleting = false;
+    constructor(el) {
+        this.el = el;
+    }
     // ============ Input Properties ============
     /** Picker mode: date, week, month, quarter, year */
     mode = 'date';
@@ -1354,6 +1407,96 @@ class DatePickerComponent {
     ngOnInit() {
         this.initializeFormat();
     }
+    ngAfterViewInit() {
+        this.attachInputListeners();
+    }
+    ngOnDestroy() {
+        this.detachInputListeners();
+    }
+    // ============ Input Filtering ============
+    /** Allow: digits, date separators (/ - : .), and control keys */
+    ALLOWED_KEYS = new Set([
+        'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+        'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+        'Home', 'End',
+    ]);
+    onInputKeydown(e) {
+        // Track delete actions to prevent auto-separator from re-inserting
+        this.isDeleting = e.key === 'Backspace' || e.key === 'Delete';
+        // Allow control combinations (Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X, Ctrl+Z)
+        if (e.ctrlKey || e.metaKey)
+            return;
+        // Allow navigation and control keys
+        if (this.ALLOWED_KEYS.has(e.key))
+            return;
+        // Allow digits (0-9)
+        if (/^\d$/.test(e.key))
+            return;
+        // Allow date/time separators: / - : . and space
+        if (/^[/\-:. ]$/.test(e.key))
+            return;
+        // Block everything else (letters, symbols, etc.)
+        e.preventDefault();
+    }
+    onInputPaste(e) {
+        const pastedText = e.clipboardData?.getData('text') || '';
+        // Only allow pasting if content contains only digits and date separators
+        if (!/^[\d/\-:. ]+$/.test(pastedText)) {
+            e.preventDefault();
+        }
+    }
+    /**
+     * Auto-insert separator characters (e.g. '/') as user types digits.
+     * Parses the format string to find separator positions.
+     * E.g. 'dd/MM/yyyy' → separators at index 2 and 5
+     */
+    onInputAutoSeparator(e) {
+        // Skip auto-separator when user is deleting
+        if (this.isDeleting) {
+            this.isDeleting = false;
+            return;
+        }
+        const input = e.target;
+        const value = input.value;
+        const fmt = this.fullFormat;
+        // Build an array of separator positions from the format string
+        // Format chars like d, M, y, H, m, s, w, Q are "data" chars; everything else is a separator
+        const separatorPositions = [];
+        const formatChars = 'dMysSHhmwQ[]';
+        for (let i = 0; i < fmt.length; i++) {
+            if (!formatChars.includes(fmt[i])) {
+                separatorPositions.push({ index: i, char: fmt[i] });
+            }
+        }
+        // Only auto-insert if the user just typed a digit (value ends with digit)
+        // and the current length matches a separator position
+        if (!value || !/\d$/.test(value))
+            return;
+        const nextSep = separatorPositions.find(sp => sp.index === value.length);
+        if (nextSep) {
+            input.value = value + nextSep.char;
+            // Move cursor to end
+            input.setSelectionRange(input.value.length, input.value.length);
+            // Dispatch input event so ng-zorro picks up the change
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+    }
+    attachInputListeners() {
+        const inputs = this.el.nativeElement.querySelectorAll('input');
+        inputs.forEach((input) => {
+            input.addEventListener('keydown', this.keydownHandler);
+            input.addEventListener('paste', this.pasteHandler);
+            input.addEventListener('input', this.inputHandler);
+        });
+    }
+    detachInputListeners() {
+        const inputs = this.el.nativeElement.querySelectorAll('input');
+        inputs.forEach((input) => {
+            input.removeEventListener('keydown', this.keydownHandler);
+            input.removeEventListener('paste', this.pasteHandler);
+            input.removeEventListener('input', this.inputHandler);
+        });
+    }
     // ============ Methods ============
     initializeFormat() {
         // Set default format based on mode if not explicitly set
@@ -1427,14 +1570,14 @@ class DatePickerComponent {
             this.onChange(today);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { mode: "mode", showTime: "showTime", isRange: "isRange", rangeMode: "rangeMode", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", allowClear: "allowClear", size: "size", bordered: "bordered", inline: "inline", popupClassName: "popupClassName", dropdownPosition: "dropdownPosition", disabledDate: "disabledDate", width: "width", height: "height" }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange", openChange: "openChange", ok: "ok", panelChange: "panelChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"placeholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    inputWidth=\"40px\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--inline\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"rangePlaceholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range\"\r\n  ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range date-picker--inline\"\r\n  ></nz-range-picker>\r\n}\r\n", styles: [":host{display:block;--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-200);--date-picker-today-color: var(--brand-500)}:host .ant-picker{border:1px solid var(--neutral-color-200)!important;border-radius:8px;cursor:pointer}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--date-picker-primary-color)!important;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;height:100%;padding:8px 12px;box-sizing:border-box;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker .ant-picker-suffix{color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear{background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear:hover{color:var(--date-picker-primary-hover)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--date-picker-primary-color)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--date-picker-primary-color)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-400);--date-picker-today-color: var(--brand-500)}::ng-deep .ant-picker-dropdown .ant-picker-panel-container{border-radius:12px}::ng-deep .ant-picker-dropdown .ant-picker-header-super-prev-btn,::ng-deep .ant-picker-dropdown .ant-picker-header-super-next-btn{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-header button{color:var(--neutral-color-600)}::ng-deep .ant-picker-dropdown .ant-picker-header button:hover{color:var(--date-picker-primary-color)}::ng-deep .ant-picker-dropdown .ant-picker-cell:before,::ng-deep .ant-picker-dropdown .ant-picker-cell-inner:before{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--neutral-color-50)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:transparent!important;border:transparent!important;color:var(--theme-blue-600)!important;font-weight:600}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:first-child .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-year-panel .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-month-panel .ant-picker-cell-inner{padding:0 8px;min-width:60px;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{background:var(--neutral-color-400);color:var(--neutral-color-10);font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i2.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: NzTimePickerModule }] });
+        ], ngImport: i0, template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"placeholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    inputWidth=\"40px\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--inline\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"rangePlaceholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range\"\r\n  ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range date-picker--inline\"\r\n  ></nz-range-picker>\r\n}\r\n", styles: [":host{display:block;--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-200);--date-picker-today-color: var(--brand-500)}:host .ant-picker{border:1px solid var(--neutral-color-200)!important;border-radius:8px;cursor:pointer}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--date-picker-primary-color)!important;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;height:100%;padding:8px 12px;box-sizing:border-box;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker .ant-picker-suffix{color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear{background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear:hover{color:var(--date-picker-primary-hover)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--date-picker-primary-color)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--date-picker-primary-color)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-400);--date-picker-today-color: var(--brand-500)}::ng-deep .ant-picker-dropdown .ant-picker-panel-container{border-radius:12px}::ng-deep .ant-picker-dropdown .ant-picker-header-super-prev-btn,::ng-deep .ant-picker-dropdown .ant-picker-header-super-next-btn{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-header button{color:var(--neutral-color-600)}::ng-deep .ant-picker-dropdown .ant-picker-header button:hover{color:var(--date-picker-primary-color)}::ng-deep .ant-picker-dropdown .ant-picker-cell:before,::ng-deep .ant-picker-dropdown .ant-picker-cell-inner:before{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--neutral-color-50)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:transparent!important;border:transparent!important;color:var(--theme-blue-600)!important;font-weight:600}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row .ant-picker-cell-week{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel th:first-child{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td{background-color:transparent!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:before,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:before{background-color:var(--date-picker-primary-color)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover .ant-picker-cell .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:nth-child(2) .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:nth-child(2) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:nth-child(2):before,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:nth-child(2):before{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:last-child .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:last-child:before,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:last-child:before{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row:not(.ant-picker-week-panel-row-selected):hover td:before{background-color:var(--neutral-color-200)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row:not(.ant-picker-week-panel-row-selected):hover .ant-picker-cell .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--date-picker-text-color)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-year-panel .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-month-panel .ant-picker-cell-inner{padding:0 8px;min-width:60px;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{background:var(--neutral-color-400);color:var(--neutral-color-10);font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "directive", type: i2.NzRangePickerComponent, selector: "nz-range-picker", exportAs: ["nzRangePicker"] }, { kind: "ngmodule", type: NzTimePickerModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -1444,8 +1587,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"placeholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    inputWidth=\"40px\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--inline\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"rangePlaceholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range\"\r\n  ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range date-picker--inline\"\r\n  ></nz-range-picker>\r\n}\r\n", styles: [":host{display:block;--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-200);--date-picker-today-color: var(--brand-500)}:host .ant-picker{border:1px solid var(--neutral-color-200)!important;border-radius:8px;cursor:pointer}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--date-picker-primary-color)!important;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;height:100%;padding:8px 12px;box-sizing:border-box;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker .ant-picker-suffix{color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear{background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear:hover{color:var(--date-picker-primary-hover)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--date-picker-primary-color)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--date-picker-primary-color)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-400);--date-picker-today-color: var(--brand-500)}::ng-deep .ant-picker-dropdown .ant-picker-panel-container{border-radius:12px}::ng-deep .ant-picker-dropdown .ant-picker-header-super-prev-btn,::ng-deep .ant-picker-dropdown .ant-picker-header-super-next-btn{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-header button{color:var(--neutral-color-600)}::ng-deep .ant-picker-dropdown .ant-picker-header button:hover{color:var(--date-picker-primary-color)}::ng-deep .ant-picker-dropdown .ant-picker-cell:before,::ng-deep .ant-picker-dropdown .ant-picker-cell-inner:before{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--neutral-color-50)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:transparent!important;border:transparent!important;color:var(--theme-blue-600)!important;font-weight:600}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:first-child .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-year-panel .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-month-panel .ant-picker-cell-inner{padding:0 8px;min-width:60px;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{background:var(--neutral-color-400);color:var(--neutral-color-10);font-weight:600}\n"] }]
-        }], propDecorators: { mode: [{
+                    ], template: "<!-- Single Date Picker -->\r\n@if (!isRange && !inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"placeholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    inputWidth=\"40px\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Inline Single Date Picker -->\r\n@if (!isRange && inline) {\r\n  <nz-date-picker\r\n    [nzMode]=\"mode\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--inline\"\r\n  ></nz-date-picker>\r\n}\r\n\r\n<!-- Range Date Picker -->\r\n@if (isRange && !inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzPlaceHolder]=\"rangePlaceholder\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzAllowClear]=\"allowClear\"\r\n    [nzSize]=\"size\"\r\n    [nzVariant]=\"bordered ? 'outlined' : 'borderless'\"\r\n    [nzDropdownClassName]=\"popupClassName\"\r\n    [nzPlacement]=\"dropdownPosition\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOpenChange)=\"onOpenChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range\"\r\n  ></nz-range-picker>\r\n}\r\n\r\n<!-- Inline Range Date Picker -->\r\n@if (isRange && inline) {\r\n  <nz-range-picker\r\n    [nzMode]=\"rangeMode\"\r\n    [(ngModel)]=\"selectedRange\"\r\n    [nzFormat]=\"fullFormat\"\r\n    [nzShowTime]=\"showTime\"\r\n    [nzDisabled]=\"disabled\"\r\n    [nzDisabledDate]=\"disabledDate\"\r\n    [nzInline]=\"true\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    (ngModelChange)=\"onRangeChange($event)\"\r\n    (nzOnOk)=\"onOk($event)\"\r\n    (nzOnPanelChange)=\"onPanelChange($event)\"\r\n    class=\"date-picker date-picker--range date-picker--inline\"\r\n  ></nz-range-picker>\r\n}\r\n", styles: [":host{display:block;--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-200);--date-picker-today-color: var(--brand-500)}:host .ant-picker{border:1px solid var(--neutral-color-200)!important;border-radius:8px;cursor:pointer}:host .ant-picker:hover,:host .ant-picker-focused{border:1px solid var(--date-picker-primary-color)!important;cursor:pointer}.date-picker{width:100%}.date-picker ::ng-deep .ant-picker{width:100%;height:100%;padding:8px 12px;box-sizing:border-box;background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker:hover{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker:focus,.date-picker ::ng-deep .ant-picker.ant-picker-focused{border-color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker input{color:var(--date-picker-text-color)}.date-picker ::ng-deep .ant-picker input::placeholder{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker .ant-picker-suffix{color:var(--date-picker-primary-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear{background-color:var(--date-picker-bg-color)}.date-picker ::ng-deep .ant-picker .ant-picker-clear:hover{color:var(--date-picker-primary-hover)}.date-picker ::ng-deep .ant-picker-large{border-radius:calc(var(--date-picker-border-radius) + 2px)}.date-picker ::ng-deep .ant-picker-large input{font-size:16px}.date-picker ::ng-deep .ant-picker-small{border-radius:calc(var(--date-picker-border-radius) - 2px)}.date-picker ::ng-deep .ant-picker-small input{font-size:12px}.date-picker ::ng-deep .ant-picker-disabled{background-color:var(--date-picker-hover-bg);cursor:not-allowed}.date-picker ::ng-deep .ant-picker-disabled input{color:var(--date-picker-disabled-color)}.date-picker ::ng-deep .ant-picker-borderless{border:none;box-shadow:none}.date-picker ::ng-deep .ant-picker-borderless:focus,.date-picker ::ng-deep .ant-picker-borderless.ant-picker-focused{box-shadow:none}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-separator{color:var(--date-picker-primary-color)}.date-picker--range ::ng-deep .ant-picker-range .ant-picker-active-bar{background-color:var(--date-picker-primary-color)}.date-picker--inline ::ng-deep .ant-picker{border:1px solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius);padding:16px}.date-picker--inline ::ng-deep .ant-picker-panel-container{box-shadow:none}::ng-deep .ant-picker-dropdown{--date-picker-primary-color: var(--brand-500);--date-picker-primary-hover: var(--brand-600);--date-picker-border-color: var(--neutral-color-200);--date-picker-border-radius: 8px;--date-picker-text-color: var(--neutral-color-800);--date-picker-bg-color: var(--neutral-color-50);--date-picker-disabled-color: var(--neutral-color-400);--date-picker-hover-bg: var(--neutral-color-400);--date-picker-today-color: var(--brand-500)}::ng-deep .ant-picker-dropdown .ant-picker-panel-container{border-radius:12px}::ng-deep .ant-picker-dropdown .ant-picker-header-super-prev-btn,::ng-deep .ant-picker-dropdown .ant-picker-header-super-next-btn{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-header button{color:var(--neutral-color-600)}::ng-deep .ant-picker-dropdown .ant-picker-header button:hover{color:var(--date-picker-primary-color)}::ng-deep .ant-picker-dropdown .ant-picker-cell:before,::ng-deep .ant-picker-dropdown .ant-picker-cell-inner:before{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-today):not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--neutral-color-50)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today:not(.ant-picker-cell-selected):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:transparent!important;border:transparent!important;color:var(--theme-blue-600)!important;font-weight:600}::ng-deep .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-50)!important;border:none!important;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start:not(.ant-picker-cell-range-end):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-end:not(.ant-picker-cell-range-start):not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-start.ant-picker-cell-range-end:not(.ant-picker-week-panel-row-selected) .ant-picker-cell-inner{border-radius:8px!important;background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row .ant-picker-cell-week{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel th:first-child{display:none!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td{background-color:transparent!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:before,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:before{background-color:var(--date-picker-primary-color)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover .ant-picker-cell .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:nth-child(2) .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:nth-child(2) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:nth-child(2):before,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:nth-child(2):before{border-radius:8px 0 0 8px!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:last-child .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:last-child .ant-picker-cell-inner{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected td:last-child:before,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover td:last-child:before{border-radius:0 8px 8px 0!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected .ant-picker-cell:hover .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row-selected:hover .ant-picker-cell:hover .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row:not(.ant-picker-week-panel-row-selected):hover td:before{background-color:var(--neutral-color-200)!important}::ng-deep .ant-picker-dropdown .ant-picker-week-panel-row:not(.ant-picker-week-panel-row-selected):hover .ant-picker-cell .ant-picker-cell-inner{background-color:var(--neutral-color-200)!important;color:var(--date-picker-text-color)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-in-range.ant-picker-cell-week .ant-picker-cell-inner{background-color:var(--date-picker-primary-color)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover:not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important;border-radius:0!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-start:not(.ant-picker-cell-range-hover-end):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:8px 0 0 8px!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-cell-range-hover-end:not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-in-range) .ant-picker-cell-inner{border-radius:0 8px 8px 0!important;background-color:var(--neutral-color-400)!important;color:var(--neutral-color-10)!important}::ng-deep .ant-picker-dropdown .ant-picker-year-panel .ant-picker-cell-inner,::ng-deep .ant-picker-dropdown .ant-picker-month-panel .ant-picker-cell-inner{padding:0 8px;min-width:60px;border-radius:8px!important}::ng-deep .ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{background:var(--neutral-color-400);color:var(--neutral-color-10);font-weight:600}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { mode: [{
                 type: Input
             }], showTime: [{
                 type: Input
@@ -1500,5 +1643,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApprovalListComponent, ApprovalListItemComponent, AvatarUploadButtonComponent, BUTTON_SIZE_MAP, ButtonContainerComponent, DatePickerComponent, FileUploadDropzoneComponent, FunctionalLabelComponent, HeaderComponent, IconComponent, InputCalendarComponent, InputStepperComponent, InputTextComponent, LabelButtonComponent, ModalComponent, PopUpConfirmComponent, SidebarComponent, TableBodyComponent, TableHeaderComponent };
+export { ApprovalListComponent, ApprovalListItemComponent, AvatarUploadButtonComponent, BUTTON_SIZE_MAP, ButtonContainerComponent, DatePickerComponent, FileUploadDropzoneComponent, FunctionalLabelComponent, HeaderComponent, IconComponent, InputCalendarComponent, InputStepperComponent, InputTextComponent, LabelButtonComponent, ModalComponent, PopUpConfirmComponent, PopUpInfoComponent, SidebarComponent, TableBodyComponent, TableHeaderComponent };
 //# sourceMappingURL=goat-bravos-intern-hub-layout.mjs.map