ngx-kit 6.3.0 → 7.0.1

package/fesm2022/ngx-kit-date-picker.mjs

@@ -1931,7 +1931,7 @@ class NgxInputDatePickerComponent extends NgxDatePickerBase {
                 useExisting: forwardRef(() => NgxInputDatePickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    <svg\r\n      class=\"calendar-icon\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M16 2V6M8 2V6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M3 10H21\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n    </svg>\r\n    {{ calendarHeader }}\r\n  </div>\r\n  <div class=\"sub-header\">\r\n    <div class=\"icons\">\r\n      <span id=\"prev\" (click)=\"previous()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"\r\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n          \"></ng-template>\r\n      </span>\r\n    </div>\r\n    <span class=\"current-date\">\r\n      <span (click)=\"changeView('year')\">\r\n        {{ currYear }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n      <span (click)=\"changeView('month')\">\r\n        {{ displayMonth }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n    </span>\r\n    <div class=\"icons\">\r\n      <span id=\"next\" (click)=\"next()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"calendar\">\r\n    @if (view === 'day') {\r\n      <ul class=\"weeks\">\r\n        @for (w of weekDays; track $index) {\r\n          <li [title]=\"w.name\">\r\n            {{ w.min }}\r\n          </li>\r\n        }\r\n      </ul>\r\n      <ul class=\"days\">\r\n        @for (item of viewDays; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectDay($event, item)\">\r\n            {{ item.day }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'month') {\r\n      <ul class=\"months\">\r\n        @for (item of viewMonths; track $index; let i = $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectMonth($event, item)\">\r\n            {{ i + 1 }}.{{ item.displayMonth }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'year') {\r\n      <ul class=\"years\">\r\n        @for (item of viewYears; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectYear($event, item)\">\r\n            {{ item.year }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n    <!-- <pre>\r\n      currYear={{currYear}}\r\n      currMonth={{currMonth}}\r\n      {{selected|json}}\r\n    </pre> -->\r\n    <div class=\"calendar-footer\">\r\n      @if (config.clearButton) {\r\n        <button (click)=\"clear()\">\r\n          {{ localize().clear }}\r\n        </button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button (click)=\"gotoToday()\">\r\n          {{ localize().today }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultCaretDownIcon>\r\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 15px 10px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.5em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1.2em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <svg\n      class=\"calendar-icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16 2V6M8 2V6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M3 10H21\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n    </svg>\n    {{ calendarHeader }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" (click)=\"previous()\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </span>\n    </div>\n    <span class=\"current-date\">\n      <span (click)=\"changeView('year')\">\n        {{ currYear }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n      <span (click)=\"changeView('month')\">\n        {{ displayMonth }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n    </span>\n    <div class=\"icons\">\n      <span id=\"next\" (click)=\"next()\">\n        <ng-template\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </span>\n    </div>\n  </div>\n  <div class=\"calendar\">\n    @if (view === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">\n            {{ w.min }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectDay($event, item)\">\n            {{ item.day }}\n          </li>\n        }\n      </ul>\n    } @else if (view === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else if (view === 'year') {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n    <!-- <pre>\n      currYear={{currYear}}\n      currMonth={{currMonth}}\n      {{selected|json}}\n    </pre> -->\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button (click)=\"clear()\">\n          {{ localize().clear }}\n        </button>\n      }\n      @if (config.todayButton) {\n        <button (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultCaretDownIcon>\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 15px 10px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.5em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1.2em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputDatePickerComponent, decorators: [{
             type: Component,
@@ -1947,7 +1947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => NgxInputDatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    <svg\r\n      class=\"calendar-icon\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M16 2V6M8 2V6\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M3 10H21\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n      <path\r\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\" />\r\n    </svg>\r\n    {{ calendarHeader }}\r\n  </div>\r\n  <div class=\"sub-header\">\r\n    <div class=\"icons\">\r\n      <span id=\"prev\" (click)=\"previous()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"\r\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n          \"></ng-template>\r\n      </span>\r\n    </div>\r\n    <span class=\"current-date\">\r\n      <span (click)=\"changeView('year')\">\r\n        {{ currYear }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n      <span (click)=\"changeView('month')\">\r\n        {{ displayMonth }}\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\r\n      </span>\r\n    </span>\r\n    <div class=\"icons\">\r\n      <span id=\"next\" (click)=\"next()\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"calendar\">\r\n    @if (view === 'day') {\r\n      <ul class=\"weeks\">\r\n        @for (w of weekDays; track $index) {\r\n          <li [title]=\"w.name\">\r\n            {{ w.min }}\r\n          </li>\r\n        }\r\n      </ul>\r\n      <ul class=\"days\">\r\n        @for (item of viewDays; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectDay($event, item)\">\r\n            {{ item.day }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'month') {\r\n      <ul class=\"months\">\r\n        @for (item of viewMonths; track $index; let i = $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectMonth($event, item)\">\r\n            {{ i + 1 }}.{{ item.displayMonth }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'year') {\r\n      <ul class=\"years\">\r\n        @for (item of viewYears; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectYear($event, item)\">\r\n            {{ item.year }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n    <!-- <pre>\r\n      currYear={{currYear}}\r\n      currMonth={{currMonth}}\r\n      {{selected|json}}\r\n    </pre> -->\r\n    <div class=\"calendar-footer\">\r\n      @if (config.clearButton) {\r\n        <button (click)=\"clear()\">\r\n          {{ localize().clear }}\r\n        </button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button (click)=\"gotoToday()\">\r\n          {{ localize().today }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultCaretDownIcon>\r\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 15px 10px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.5em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1.2em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"] }]
+                    ], template: "<div class=\"wrapper\" #datepickerWrapper (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <svg\n      class=\"calendar-icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16 2V6M8 2V6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M3 10H21\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n      <path\n        d=\"M11.9955 14H12.0045M11.9955 18H12.0045M15.991 14H16M8 14H8.00897M8 18H8.00897\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\" />\n    </svg>\n    {{ calendarHeader }}\n  </div>\n  <div class=\"sub-header\">\n    <div class=\"icons\">\n      <span id=\"prev\" (click)=\"previous()\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </span>\n    </div>\n    <span class=\"current-date\">\n      <span (click)=\"changeView('year')\">\n        {{ currYear }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n      <span (click)=\"changeView('month')\">\n        {{ displayMonth }}\n        <ng-template\n          [ngTemplateOutlet]=\"config.caretDownIconTemplate || defaultCaretDownIcon\"></ng-template>\n      </span>\n    </span>\n    <div class=\"icons\">\n      <span id=\"next\" (click)=\"next()\">\n        <ng-template\n          [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </span>\n    </div>\n  </div>\n  <div class=\"calendar\">\n    @if (view === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">\n            {{ w.min }}\n          </li>\n        }\n      </ul>\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectDay($event, item)\">\n            {{ item.day }}\n          </li>\n        }\n      </ul>\n    } @else if (view === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else if (view === 'year') {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n    <!-- <pre>\n      currYear={{currYear}}\n      currMonth={{currMonth}}\n      {{selected|json}}\n    </pre> -->\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button (click)=\"clear()\">\n          {{ localize().clear }}\n        </button>\n      }\n      @if (config.todayButton) {\n        <button (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"40px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultCaretDownIcon>\n  <svg width=\"10px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #0e1428);--ngx-color-text: light-dark(#000, #fff);--ngx-border-color: light-dark(#c0c0c0, #c0c0c0);--ngx-datepicker-header-bg: light-dark( linear-gradient(to right, #643edf, #865bf3), linear-gradient(to right, #34158c, #441ba8) );--ngx-datepicker-header-text: light-dark(#fff, #fff);--ngx-datepicker-subheader-bg: light-dark(#e0d5ef, #0f1529);--ngx-datepicker-subheader-text: light-dark(#272727, #d2b9f9);--ngx-datepicker-font-size: 12px;--ngx-datepicker-active-bg: light-dark( linear-gradient(to bottom, #8753ff, #5325c9), linear-gradient(to bottom, #8753ff, #5325c9) );--ngx-datepicker-active-text: light-dark(#fff, #fff);--ngx-datepicker-today-color: light-dark(#5325c9, #5325c9)}.wrapper{background:var(--ngx-color-bg);box-shadow:0 15px 40px #0000001f;color:var(--ngx-color-text);border-radius:6px;overflow:hidden;font-size:var(--ngx-datepicker-font-size);width:330px}.wrapper .header{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 15px 10px;background:var(--ngx-datepicker-header-bg);color:var(--ngx-datepicker-header-text);font-size:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrapper .calendar-icon{background-color:#f3f3f33f;border-radius:29px;padding:6px;width:40px;height:40px;corner-shape:squircle;margin:0 6px}.wrapper .sub-header{display:flex;align-items:center;padding:5px 10px;background-color:var(--ngx-datepicker-subheader-bg);color:var(--ngx-datepicker-subheader-text)}.wrapper .sub-header .current-date{font-size:1.5em;flex:auto;display:flex;align-items:center}.wrapper .sub-header .current-date span{flex:auto;text-align:center}.wrapper .sub-header .icons{display:flex}.wrapper .sub-header .icons span{height:38px;width:38px;margin:0 1px;cursor:pointer;color:#878787;text-align:center;line-height:38px;font-size:1.9rem;-webkit-user-select:none;user-select:none;border:1px rgba(176,176,176,.0901960784) solid;border-radius:5px}.wrapper .sub-header .icons span:hover{background:#f2f2f225}.wrapper .calendar-footer{display:flex;justify-content:space-between;gap:5px}.wrapper .calendar-footer button{outline:none;background:none;color:inherit;border:none;border-radius:4px;padding:8px 15px;box-shadow:none;transition:all .3s;border:1px rgba(168,168,168,.1411764706) solid}.wrapper .calendar-footer button:not([disabled]):hover{cursor:pointer;background:#816ef175}.calendar{padding:10px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;text-align:center;padding:0;margin:0}.calendar .days{margin-bottom:20px}.calendar .days li{width:14.2857142857%;aspect-ratio:1/1}.calendar .months{margin-bottom:20px}.calendar .months li{width:33.3333333333%;height:44px}.calendar .years{margin-bottom:20px}.calendar .years li{width:25%;height:44px}.calendar li{z-index:1;cursor:pointer;position:relative;color:#333;font-size:1.2em;border-radius:50px;display:flex;align-items:center;justify-content:center;border:1px transparent solid;transition:all .3s;color:inherit}.calendar li:not(.active):hover{background:#dfdfdf68}.calendar li.de-active{opacity:.2}.calendar li.selected{background:var(--ngx-datepicker-active-bg)!important;color:var(--ngx-datepicker-active-text)}.calendar li.today{border:1px var(--ngx-datepicker-today-color) solid!important}.calendar .weeks{border-bottom:1px rgba(231,231,231,.3450980392) solid;margin-bottom:10px;padding-bottom:5px}.calendar .weeks li{font-weight:500;cursor:default;flex:auto;flex-wrap:nowrap}.calendar .weeks li:hover{background:none}::ng-deep body[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep body[dir=rtl] .wrapper .sub-header .icons #prev,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #next,::ng-deep html[dir=rtl] .wrapper .sub-header .icons #prev{transform:rotate(180deg)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], setConfig: [{
                 type: Input,
                 args: ['config']
@@ -2835,11 +2835,11 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     defaultHeight = 600;
     minHeight = this.defaultHeight;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxCalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, resizeAndMovable: { classPropertyName: "resizeAndMovable", publicName: "resizeAndMovable", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", selectEvent: "selectEvent", eventChange: "eventChange", eventsChange: "eventsChange" }, host: { listeners: { "window:resize": "onResize()", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerUp($event)", "document:pointercancel": "onDocumentPointerCancel($event)" } }, providers: [DateAdapterRegistry], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\r\n  <div class=\"header\">\r\n    <div class=\"nxt-prv-buttons\">\r\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"\r\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n          \"></ng-template>\r\n      </button>\r\n      @if (_config.todayButton) {\r\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\r\n          {{ localize().today }}\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\r\n\r\n    <div class=\"view-mode\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('month')\"\r\n        [class.active]=\"view === 'month'\">\r\n        {{ localize().month }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('week')\"\r\n        [class.active]=\"view === 'week'\">\r\n        {{ localize().week }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('day')\"\r\n        [class.active]=\"view === 'day'\">\r\n        {{ localize().day }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('event')\"\r\n        [class.active]=\"view === 'event'\">\r\n        {{ localize().event }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"calendar\" #calendarWrapper>\r\n    @switch (view) {\r\n      @case ('month') {\r\n        <ul class=\"weeks\">\r\n          @for (w of weeks; track $index) {\r\n            <li>{{ w }}</li>\r\n          }\r\n        </ul>\r\n\r\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\r\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\r\n            <div class=\"month-row\">\r\n              @for (\r\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\r\n                track item.date?.getTime() ?? $index\r\n              ) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"month-day\"\r\n                  [class.de-active]=\"!item.active\"\r\n                  [class.today]=\"item.isToday\"\r\n                  [class.selected]=\"item.selected\"\r\n                  (click)=\"selectDay($event, item)\">\r\n                  <span class=\"day-number\">{{ item.day }}</span>\r\n                </button>\r\n              }\r\n\r\n              <div class=\"month-event-layer\" aria-live=\"polite\">\r\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"month-event\"\r\n                    [class.continues-before]=\"event.continuesBefore\"\r\n                    [class.continues-after]=\"event.continuesAfter\"\r\n                    [class.event-start]=\"event.isStart\"\r\n                    [class.event-end]=\"event.isEnd\"\r\n                    [class.is-dragging]=\"\r\n                      interaction?.source === event ||\r\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\r\n                    \"\r\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\r\n                    [style.gridRow]=\"event.lane + 1\"\r\n                    [style.background]=\"event.backgroundColor || event.color || null\"\r\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\r\n                    [style.color]=\"event.textColor || null\"\r\n                    [title]=\"event.title || ''\"\r\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\r\n                    (click)=\"\r\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\r\n                    \">\r\n                    @if (event.isStart) {\r\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\r\n                    } @else {\r\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\r\n                    }\r\n                    @if (resizeAndMovable()) {\r\n                      @if (event.isStart) {\r\n                        <span\r\n                          class=\"resize-handle resize-handle-h resize-start\"\r\n                          title=\"Resize start\"\r\n                          (pointerdown)=\"\r\n                            startMonthEventInteraction($event, event, 'resize-start')\r\n                          \"></span>\r\n                      }\r\n                      @if (event.isEnd) {\r\n                        <span\r\n                          class=\"resize-handle resize-handle-h resize-end\"\r\n                          title=\"Resize end\"\r\n                          (pointerdown)=\"\r\n                            startMonthEventInteraction($event, event, 'resize-end')\r\n                          \"></span>\r\n                      }\r\n                    }\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('week') {\r\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\r\n      }\r\n\r\n      @case ('day') {\r\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\r\n      }\r\n\r\n      @case ('event') {\r\n        <div class=\"event-list\">\r\n          @if (eventViewItems.length) {\r\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"event-list-item\"\r\n                (click)=\"\r\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\r\n                \">\r\n                <span\r\n                  class=\"event-dot\"\r\n                  [style.background]=\"\r\n                    item.event.backgroundColor || item.event.color || null\r\n                  \"></span>\r\n                <span class=\"event-copy\">\r\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\r\n                  <small>\r\n                    {{ formatEventDate(item.start) }}\r\n                    @if (item.end.getTime() !== item.start.getTime()) {\r\n                      \u2013 {{ formatEventDate(item.end) }}\r\n                    }\r\n                  </small>\r\n                </span>\r\n              </button>\r\n            }\r\n          } @else {\r\n            <div class=\"empty-events\">No events for this month.</div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #timedCalendar>\r\n  <div class=\"timed-calendar\">\r\n    <div\r\n      class=\"timed-header\"\r\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\r\n      <div class=\"corner\"></div>\r\n      @for (day of weekDays; track day.date.getTime()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"day-header\"\r\n          [class.today]=\"day.isToday\"\r\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\r\n          <span>{{ day.label }}</span>\r\n          <strong>{{ day.dayNumber }}</strong>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"all-day-row\"\r\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\r\n      <div class=\"all-day-label\">All day</div>\r\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\r\n        <div class=\"all-day-cell\">\r\n          @for (\r\n            event of allDayByColumn[i];\r\n            track event.id ?? event.title ?? event.start.getTime()\r\n          ) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"timed-event all-day-event\"\r\n              [class.continues-before]=\"event.continuesBefore\"\r\n              [class.continues-after]=\"event.continuesAfter\"\r\n              [style.background]=\"event.backgroundColor || event.color || null\"\r\n              [style.borderColor]=\"event.borderColor || event.color || null\"\r\n              [style.color]=\"event.textColor || null\"\r\n              [title]=\"event.title || ''\"\r\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\r\n              (click)=\"onTimedEventClick($event, event, day.date)\">\r\n              <span>{{ event.title || 'Untitled event' }}</span>\r\n              @if (resizeAndMovable()) {\r\n                @if (event.isStart) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-h resize-start\"\r\n                    title=\"Resize start\"\r\n                    (pointerdown)=\"\r\n                      startTimedEventInteraction($event, event, 'resize-start')\r\n                    \"></span>\r\n                }\r\n                @if (event.isEnd) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-h resize-end\"\r\n                    title=\"Resize end\"\r\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\r\n                }\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"time-grid\"\r\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\r\n      <div class=\"time-axis\">\r\n        @for (minutes of timeSlots; track minutes) {\r\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\r\n            @if (minutes % 60 === 0) {\r\n              {{ formatTime(minutes) }}\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @for (day of weekDays; track day.date.getTime()) {\r\n        <div class=\"day-column\">\r\n          @for (minutes of timeSlots; track minutes) {\r\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\r\n          }\r\n\r\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"timed-event\"\r\n              [class.continues-before]=\"event.continuesBefore\"\r\n              [class.continues-after]=\"event.continuesAfter\"\r\n              [style.top.px]=\"event.top\"\r\n              [style.height.px]=\"event.height\"\r\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\r\n              [style.width.%]=\"100 / event.columnCount - 1\"\r\n              [style.background]=\"event.backgroundColor || event.color || null\"\r\n              [style.borderColor]=\"event.borderColor || event.color || null\"\r\n              [style.color]=\"event.textColor || null\"\r\n              [title]=\"event.title || ''\"\r\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\r\n              (click)=\"onTimedEventClick($event, event, day.date)\">\r\n              <strong>{{ event.title || 'Untitled event' }}</strong>\r\n              @if (event.height >= 42) {\r\n                <small>\r\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\r\n                </small>\r\n              }\r\n              @if (resizeAndMovable()) {\r\n                @if (event.isStart) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-v resize-start\"\r\n                    title=\"Resize start\"\r\n                    (pointerdown)=\"\r\n                      startTimedEventInteraction($event, event, 'resize-start')\r\n                    \"></span>\r\n                }\r\n                @if (event.isEnd) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-v resize-end\"\r\n                    title=\"Resize end\"\r\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\r\n                }\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;z-index:5;touch-action:none;background:transparent}.resize-handle-h{top:0;bottom:0;width:11px;cursor:ew-resize}.resize-handle-h:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:4px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-h.resize-start{inset-inline-start:-2px}.resize-handle-h.resize-end{inset-inline-end:-2px}.resize-handle-v{inset-inline:0;height:8px;cursor:ns-resize}.resize-handle-v:after{content:\"\";position:absolute;inset-inline:5px;height:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-v.resize-start{top:-2px}.resize-handle-v.resize-start:after{top:4px}.resize-handle-v.resize-end{bottom:-2px}.resize-handle-v.resize-end:after{bottom:4px}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxCalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { localize: { classPropertyName: "localize", publicName: "localize", isSignal: true, isRequired: false, transformFunction: null }, resizeAndMovable: { classPropertyName: "resizeAndMovable", publicName: "resizeAndMovable", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, setMin: { classPropertyName: "setMin", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, setMax: { classPropertyName: "setMax", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", selectEvent: "selectEvent", eventChange: "eventChange", eventsChange: "eventsChange" }, host: { listeners: { "window:resize": "onResize()", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerUp($event)", "document:pointercancel": "onDocumentPointerCancel($event)" } }, providers: [DateAdapterRegistry], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\n\n    <div class=\"view-mode\">\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('month')\"\n        [class.active]=\"view === 'month'\">\n        {{ localize().month }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view === 'week'\">\n        {{ localize().week }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view === 'day'\">\n        {{ localize().day }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view === 'event'\">\n        {{ localize().event }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar\" #calendarWrapper>\n    @switch (view) {\n      @case ('month') {\n        <ul class=\"weeks\">\n          @for (w of weeks; track $index) {\n            <li>{{ w }}</li>\n          }\n        </ul>\n\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\n            <div class=\"month-row\">\n              @for (\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\n                track item.date?.getTime() ?? $index\n              ) {\n                <button\n                  type=\"button\"\n                  class=\"month-day\"\n                  [class.de-active]=\"!item.active\"\n                  [class.today]=\"item.isToday\"\n                  [class.selected]=\"item.selected\"\n                  (click)=\"selectDay($event, item)\">\n                  <span class=\"day-number\">{{ item.day }}</span>\n                </button>\n              }\n\n              <div class=\"month-event-layer\" aria-live=\"polite\">\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\n                  <button\n                    type=\"button\"\n                    class=\"month-event\"\n                    [class.continues-before]=\"event.continuesBefore\"\n                    [class.continues-after]=\"event.continuesAfter\"\n                    [class.event-start]=\"event.isStart\"\n                    [class.event-end]=\"event.isEnd\"\n                    [class.is-dragging]=\"\n                      interaction?.source === event ||\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\n                    \"\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\n                    [style.gridRow]=\"event.lane + 1\"\n                    [style.background]=\"event.backgroundColor || event.color || null\"\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\n                    [style.color]=\"event.textColor || null\"\n                    [title]=\"event.title || ''\"\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\n                    (click)=\"\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\n                    \">\n                    @if (event.isStart) {\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\n                    } @else {\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\n                    }\n                    @if (resizeAndMovable()) {\n                      @if (event.isStart) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-start\"\n                          title=\"Resize start\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-start')\n                          \"></span>\n                      }\n                      @if (event.isEnd) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-end\"\n                          title=\"Resize end\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-end')\n                          \"></span>\n                      }\n                    }\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('week') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('day') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('event') {\n        <div class=\"event-list\">\n          @if (eventViewItems.length) {\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\n              <button\n                type=\"button\"\n                class=\"event-list-item\"\n                (click)=\"\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\n                \">\n                <span\n                  class=\"event-dot\"\n                  [style.background]=\"\n                    item.event.backgroundColor || item.event.color || null\n                  \"></span>\n                <span class=\"event-copy\">\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\n                  <small>\n                    {{ formatEventDate(item.start) }}\n                    @if (item.end.getTime() !== item.start.getTime()) {\n                      \u2013 {{ formatEventDate(item.end) }}\n                    }\n                  </small>\n                </span>\n              </button>\n            }\n          } @else {\n            <div class=\"empty-events\">No events for this month.</div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #timedCalendar>\n  <div class=\"timed-calendar\">\n    <div\n      class=\"timed-header\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"corner\"></div>\n      @for (day of weekDays; track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"day-header\"\n          [class.today]=\"day.isToday\"\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\n          <span>{{ day.label }}</span>\n          <strong>{{ day.dayNumber }}</strong>\n        </button>\n      }\n    </div>\n\n    <div\n      class=\"all-day-row\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"all-day-label\">All day</div>\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\n        <div class=\"all-day-cell\">\n          @for (\n            event of allDayByColumn[i];\n            track event.id ?? event.title ?? event.start.getTime()\n          ) {\n            <button\n              type=\"button\"\n              class=\"timed-event all-day-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <span>{{ event.title || 'Untitled event' }}</span>\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"time-grid\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"time-axis\">\n        @for (minutes of timeSlots; track minutes) {\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\n            @if (minutes % 60 === 0) {\n              {{ formatTime(minutes) }}\n            }\n          </div>\n        }\n      </div>\n\n      @for (day of weekDays; track day.date.getTime()) {\n        <div class=\"day-column\">\n          @for (minutes of timeSlots; track minutes) {\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\n          }\n\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\n            <button\n              type=\"button\"\n              class=\"timed-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.top.px]=\"event.top\"\n              [style.height.px]=\"event.height\"\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\n              [style.width.%]=\"100 / event.columnCount - 1\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <strong>{{ event.title || 'Untitled event' }}</strong>\n              @if (event.height >= 42) {\n                <small>\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\n                </small>\n              }\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;z-index:5;touch-action:none;background:transparent}.resize-handle-h{top:0;bottom:0;width:11px;cursor:ew-resize}.resize-handle-h:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:4px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-h.resize-start{inset-inline-start:-2px}.resize-handle-h.resize-end{inset-inline-end:-2px}.resize-handle-v{inset-inline:0;height:8px;cursor:ns-resize}.resize-handle-v:after{content:\"\";position:absolute;inset-inline:5px;height:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-v.resize-start{top:-2px}.resize-handle-v.resize-start:after{top:4px}.resize-handle-v.resize-end{bottom:-2px}.resize-handle-v.resize-end:after{bottom:4px}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-calendar', imports: [CommonModule], providers: [DateAdapterRegistry], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\r\n  <div class=\"header\">\r\n    <div class=\"nxt-prv-buttons\">\r\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"\r\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n          \"></ng-template>\r\n      </button>\r\n      @if (_config.todayButton) {\r\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\r\n          {{ localize().today }}\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\r\n\r\n    <div class=\"view-mode\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('month')\"\r\n        [class.active]=\"view === 'month'\">\r\n        {{ localize().month }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('week')\"\r\n        [class.active]=\"view === 'week'\">\r\n        {{ localize().week }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('day')\"\r\n        [class.active]=\"view === 'day'\">\r\n        {{ localize().day }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dtp-btn\"\r\n        (click)=\"changeView('event')\"\r\n        [class.active]=\"view === 'event'\">\r\n        {{ localize().event }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"calendar\" #calendarWrapper>\r\n    @switch (view) {\r\n      @case ('month') {\r\n        <ul class=\"weeks\">\r\n          @for (w of weeks; track $index) {\r\n            <li>{{ w }}</li>\r\n          }\r\n        </ul>\r\n\r\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\r\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\r\n            <div class=\"month-row\">\r\n              @for (\r\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\r\n                track item.date?.getTime() ?? $index\r\n              ) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"month-day\"\r\n                  [class.de-active]=\"!item.active\"\r\n                  [class.today]=\"item.isToday\"\r\n                  [class.selected]=\"item.selected\"\r\n                  (click)=\"selectDay($event, item)\">\r\n                  <span class=\"day-number\">{{ item.day }}</span>\r\n                </button>\r\n              }\r\n\r\n              <div class=\"month-event-layer\" aria-live=\"polite\">\r\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"month-event\"\r\n                    [class.continues-before]=\"event.continuesBefore\"\r\n                    [class.continues-after]=\"event.continuesAfter\"\r\n                    [class.event-start]=\"event.isStart\"\r\n                    [class.event-end]=\"event.isEnd\"\r\n                    [class.is-dragging]=\"\r\n                      interaction?.source === event ||\r\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\r\n                    \"\r\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\r\n                    [style.gridRow]=\"event.lane + 1\"\r\n                    [style.background]=\"event.backgroundColor || event.color || null\"\r\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\r\n                    [style.color]=\"event.textColor || null\"\r\n                    [title]=\"event.title || ''\"\r\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\r\n                    (click)=\"\r\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\r\n                    \">\r\n                    @if (event.isStart) {\r\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\r\n                    } @else {\r\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\r\n                    }\r\n                    @if (resizeAndMovable()) {\r\n                      @if (event.isStart) {\r\n                        <span\r\n                          class=\"resize-handle resize-handle-h resize-start\"\r\n                          title=\"Resize start\"\r\n                          (pointerdown)=\"\r\n                            startMonthEventInteraction($event, event, 'resize-start')\r\n                          \"></span>\r\n                      }\r\n                      @if (event.isEnd) {\r\n                        <span\r\n                          class=\"resize-handle resize-handle-h resize-end\"\r\n                          title=\"Resize end\"\r\n                          (pointerdown)=\"\r\n                            startMonthEventInteraction($event, event, 'resize-end')\r\n                          \"></span>\r\n                      }\r\n                    }\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('week') {\r\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\r\n      }\r\n\r\n      @case ('day') {\r\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\r\n      }\r\n\r\n      @case ('event') {\r\n        <div class=\"event-list\">\r\n          @if (eventViewItems.length) {\r\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"event-list-item\"\r\n                (click)=\"\r\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\r\n                \">\r\n                <span\r\n                  class=\"event-dot\"\r\n                  [style.background]=\"\r\n                    item.event.backgroundColor || item.event.color || null\r\n                  \"></span>\r\n                <span class=\"event-copy\">\r\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\r\n                  <small>\r\n                    {{ formatEventDate(item.start) }}\r\n                    @if (item.end.getTime() !== item.start.getTime()) {\r\n                      \u2013 {{ formatEventDate(item.end) }}\r\n                    }\r\n                  </small>\r\n                </span>\r\n              </button>\r\n            }\r\n          } @else {\r\n            <div class=\"empty-events\">No events for this month.</div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #timedCalendar>\r\n  <div class=\"timed-calendar\">\r\n    <div\r\n      class=\"timed-header\"\r\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\r\n      <div class=\"corner\"></div>\r\n      @for (day of weekDays; track day.date.getTime()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"day-header\"\r\n          [class.today]=\"day.isToday\"\r\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\r\n          <span>{{ day.label }}</span>\r\n          <strong>{{ day.dayNumber }}</strong>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"all-day-row\"\r\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\r\n      <div class=\"all-day-label\">All day</div>\r\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\r\n        <div class=\"all-day-cell\">\r\n          @for (\r\n            event of allDayByColumn[i];\r\n            track event.id ?? event.title ?? event.start.getTime()\r\n          ) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"timed-event all-day-event\"\r\n              [class.continues-before]=\"event.continuesBefore\"\r\n              [class.continues-after]=\"event.continuesAfter\"\r\n              [style.background]=\"event.backgroundColor || event.color || null\"\r\n              [style.borderColor]=\"event.borderColor || event.color || null\"\r\n              [style.color]=\"event.textColor || null\"\r\n              [title]=\"event.title || ''\"\r\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\r\n              (click)=\"onTimedEventClick($event, event, day.date)\">\r\n              <span>{{ event.title || 'Untitled event' }}</span>\r\n              @if (resizeAndMovable()) {\r\n                @if (event.isStart) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-h resize-start\"\r\n                    title=\"Resize start\"\r\n                    (pointerdown)=\"\r\n                      startTimedEventInteraction($event, event, 'resize-start')\r\n                    \"></span>\r\n                }\r\n                @if (event.isEnd) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-h resize-end\"\r\n                    title=\"Resize end\"\r\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\r\n                }\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"time-grid\"\r\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\r\n      <div class=\"time-axis\">\r\n        @for (minutes of timeSlots; track minutes) {\r\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\r\n            @if (minutes % 60 === 0) {\r\n              {{ formatTime(minutes) }}\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      @for (day of weekDays; track day.date.getTime()) {\r\n        <div class=\"day-column\">\r\n          @for (minutes of timeSlots; track minutes) {\r\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\r\n          }\r\n\r\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"timed-event\"\r\n              [class.continues-before]=\"event.continuesBefore\"\r\n              [class.continues-after]=\"event.continuesAfter\"\r\n              [style.top.px]=\"event.top\"\r\n              [style.height.px]=\"event.height\"\r\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\r\n              [style.width.%]=\"100 / event.columnCount - 1\"\r\n              [style.background]=\"event.backgroundColor || event.color || null\"\r\n              [style.borderColor]=\"event.borderColor || event.color || null\"\r\n              [style.color]=\"event.textColor || null\"\r\n              [title]=\"event.title || ''\"\r\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\r\n              (click)=\"onTimedEventClick($event, event, day.date)\">\r\n              <strong>{{ event.title || 'Untitled event' }}</strong>\r\n              @if (event.height >= 42) {\r\n                <small>\r\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\r\n                </small>\r\n              }\r\n              @if (resizeAndMovable()) {\r\n                @if (event.isStart) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-v resize-start\"\r\n                    title=\"Resize start\"\r\n                    (pointerdown)=\"\r\n                      startTimedEventInteraction($event, event, 'resize-start')\r\n                    \"></span>\r\n                }\r\n                @if (event.isEnd) {\r\n                  <span\r\n                    class=\"resize-handle resize-handle-v resize-end\"\r\n                    title=\"Resize end\"\r\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\r\n                }\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;z-index:5;touch-action:none;background:transparent}.resize-handle-h{top:0;bottom:0;width:11px;cursor:ew-resize}.resize-handle-h:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:4px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-h.resize-start{inset-inline-start:-2px}.resize-handle-h.resize-end{inset-inline-end:-2px}.resize-handle-v{inset-inline:0;height:8px;cursor:ns-resize}.resize-handle-v:after{content:\"\";position:absolute;inset-inline:5px;height:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-v.resize-start{top:-2px}.resize-handle-v.resize-start:after{top:4px}.resize-handle-v.resize-end{bottom:-2px}.resize-handle-v.resize-end:after{bottom:4px}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"] }]
+            args: [{ selector: 'ngx-calendar', imports: [CommonModule], providers: [DateAdapterRegistry], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\" [class.is-interacting]=\"!!interaction\">\n  <div class=\"header\">\n    <div class=\"nxt-prv-buttons\">\n      <button type=\"button\" class=\"previous dtp-btn\" (click)=\"previous()\" title=\"Previous\">\n        <ng-template\n          [ngTemplateOutlet]=\"\n            _config.previousButtonTemplate || defaultPreviousBTNTemplate\n          \"></ng-template>\n      </button>\n      @if (_config.todayButton) {\n        <button type=\"button\" class=\"today dtp-btn\" (click)=\"gotoToday()\">\n          {{ localize().today }}\n        </button>\n      }\n      <button type=\"button\" class=\"next dtp-btn\" (click)=\"next()\" title=\"Next\">\n        <ng-template\n          [ngTemplateOutlet]=\"_config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n      </button>\n    </div>\n\n    <div class=\"current-date\" aria-live=\"polite\">{{ headerText }}</div>\n\n    <div class=\"view-mode\">\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('month')\"\n        [class.active]=\"view === 'month'\">\n        {{ localize().month }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('week')\"\n        [class.active]=\"view === 'week'\">\n        {{ localize().week }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('day')\"\n        [class.active]=\"view === 'day'\">\n        {{ localize().day }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"dtp-btn\"\n        (click)=\"changeView('event')\"\n        [class.active]=\"view === 'event'\">\n        {{ localize().event }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar\" #calendarWrapper>\n    @switch (view) {\n      @case ('month') {\n        <ul class=\"weeks\">\n          @for (w of weeks; track $index) {\n            <li>{{ w }}</li>\n          }\n        </ul>\n\n        <div class=\"month-grid\" [style.minHeight.px]=\"minHeight\">\n          @for (row of monthEventRows; track $index; let rowIndex = $index) {\n            <div class=\"month-row\">\n              @for (\n                item of viewDays.slice(rowIndex * 7, rowIndex * 7 + 7);\n                track item.date?.getTime() ?? $index\n              ) {\n                <button\n                  type=\"button\"\n                  class=\"month-day\"\n                  [class.de-active]=\"!item.active\"\n                  [class.today]=\"item.isToday\"\n                  [class.selected]=\"item.selected\"\n                  (click)=\"selectDay($event, item)\">\n                  <span class=\"day-number\">{{ item.day }}</span>\n                </button>\n              }\n\n              <div class=\"month-event-layer\" aria-live=\"polite\">\n                @for (event of row; track event.id ?? event.start.getTime() ?? $index) {\n                  <button\n                    type=\"button\"\n                    class=\"month-event\"\n                    [class.continues-before]=\"event.continuesBefore\"\n                    [class.continues-after]=\"event.continuesAfter\"\n                    [class.event-start]=\"event.isStart\"\n                    [class.event-end]=\"event.isEnd\"\n                    [class.is-dragging]=\"\n                      interaction?.source === event ||\n                      (interaction?.source?.id != null && interaction?.source?.id === event.id)\n                    \"\n                    [style.gridColumn]=\"event.startColumn + 1 + ' / ' + (event.endColumn + 2)\"\n                    [style.gridRow]=\"event.lane + 1\"\n                    [style.background]=\"event.backgroundColor || event.color || null\"\n                    [style.borderColor]=\"event.borderColor || event.color || null\"\n                    [style.color]=\"event.textColor || null\"\n                    [title]=\"event.title || ''\"\n                    (pointerdown)=\"startMonthEventInteraction($event, event)\"\n                    (click)=\"\n                      onclickEvent($event, { date: event.start, day: 0, active: true }, event)\n                    \">\n                    @if (event.isStart) {\n                      <span class=\"event-title\">{{ event.title || 'Untitled event' }}</span>\n                    } @else {\n                      <span class=\"event-title continuation-title\">{{ event.title || '' }}</span>\n                    }\n                    @if (resizeAndMovable()) {\n                      @if (event.isStart) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-start\"\n                          title=\"Resize start\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-start')\n                          \"></span>\n                      }\n                      @if (event.isEnd) {\n                        <span\n                          class=\"resize-handle resize-handle-h resize-end\"\n                          title=\"Resize end\"\n                          (pointerdown)=\"\n                            startMonthEventInteraction($event, event, 'resize-end')\n                          \"></span>\n                      }\n                    }\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @case ('week') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('day') {\n        <ng-container [ngTemplateOutlet]=\"timedCalendar\"></ng-container>\n      }\n\n      @case ('event') {\n        <div class=\"event-list\">\n          @if (eventViewItems.length) {\n            @for (item of eventViewItems; track item.event.id ?? item.start.getTime()) {\n              <button\n                type=\"button\"\n                class=\"event-list-item\"\n                (click)=\"\n                  onclickEvent($event, { date: item.start, day: 0, active: true }, item.event)\n                \">\n                <span\n                  class=\"event-dot\"\n                  [style.background]=\"\n                    item.event.backgroundColor || item.event.color || null\n                  \"></span>\n                <span class=\"event-copy\">\n                  <strong>{{ item.event.title || 'Untitled event' }}</strong>\n                  <small>\n                    {{ formatEventDate(item.start) }}\n                    @if (item.end.getTime() !== item.start.getTime()) {\n                      \u2013 {{ formatEventDate(item.end) }}\n                    }\n                  </small>\n                </span>\n              </button>\n            }\n          } @else {\n            <div class=\"empty-events\">No events for this month.</div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<ng-template #timedCalendar>\n  <div class=\"timed-calendar\">\n    <div\n      class=\"timed-header\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"corner\"></div>\n      @for (day of weekDays; track day.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"day-header\"\n          [class.today]=\"day.isToday\"\n          (click)=\"selectDay($event, { date: day.date, day: 0, active: true })\">\n          <span>{{ day.label }}</span>\n          <strong>{{ day.dayNumber }}</strong>\n        </button>\n      }\n    </div>\n\n    <div\n      class=\"all-day-row\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"all-day-label\">All day</div>\n      @for (day of weekDays; track day.date.getTime(); let i = $index) {\n        <div class=\"all-day-cell\">\n          @for (\n            event of allDayByColumn[i];\n            track event.id ?? event.title ?? event.start.getTime()\n          ) {\n            <button\n              type=\"button\"\n              class=\"timed-event all-day-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <span>{{ event.title || 'Untitled event' }}</span>\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-h resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div\n      class=\"time-grid\"\n      [style.gridTemplateColumns]=\"'64px repeat(' + weekDays.length + ', minmax(0, 1fr))'\">\n      <div class=\"time-axis\">\n        @for (minutes of timeSlots; track minutes) {\n          <div class=\"time-label\" [style.top.px]=\"(minutes / 60) * hourHeight\">\n            @if (minutes % 60 === 0) {\n              {{ formatTime(minutes) }}\n            }\n          </div>\n        }\n      </div>\n\n      @for (day of weekDays; track day.date.getTime()) {\n        <div class=\"day-column\">\n          @for (minutes of timeSlots; track minutes) {\n            <div class=\"time-slot\" [class.hour]=\"minutes % 60 === 0\"></div>\n          }\n\n          @for (event of day.events; track event.id ?? event.title ?? event.start.getTime()) {\n            <button\n              type=\"button\"\n              class=\"timed-event\"\n              [class.continues-before]=\"event.continuesBefore\"\n              [class.continues-after]=\"event.continuesAfter\"\n              [style.top.px]=\"event.top\"\n              [style.height.px]=\"event.height\"\n              [style.insetInlineStart.%]=\"event.column * (100 / event.columnCount)\"\n              [style.width.%]=\"100 / event.columnCount - 1\"\n              [style.background]=\"event.backgroundColor || event.color || null\"\n              [style.borderColor]=\"event.borderColor || event.color || null\"\n              [style.color]=\"event.textColor || null\"\n              [title]=\"event.title || ''\"\n              (pointerdown)=\"startTimedEventInteraction($event, event)\"\n              (click)=\"onTimedEventClick($event, event, day.date)\">\n              <strong>{{ event.title || 'Untitled event' }}</strong>\n              @if (event.height >= 42) {\n                <small>\n                  {{ formatTime(event.start.getHours() * 60 + event.start.getMinutes()) }}\n                </small>\n              }\n              @if (resizeAndMovable()) {\n                @if (event.isStart) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-start\"\n                    title=\"Resize start\"\n                    (pointerdown)=\"\n                      startTimedEventInteraction($event, event, 'resize-start')\n                    \"></span>\n                }\n                @if (event.isEnd) {\n                  <span\n                    class=\"resize-handle resize-handle-v resize-end\"\n                    title=\"Resize end\"\n                    (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\n                }\n              }\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"15px\" height=\"30px\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #171a24);--ngx-color-text: light-dark(#16181d, #f7f7f8);--ngx-border-color: light-dark(#e1e4ea, #303541);--ngx-muted: color-mix(in srgb, var(--ngx-color-text) 55%, transparent);--ngx-event-bg: light-dark(#eef0ff, #2f3150);--ngx-event-text: light-dark(#3547a4, #dce1ff);--ngx-today: #3f51b5}.wrapper{background:var(--ngx-color-bg);color:var(--ngx-color-text);border:1px solid var(--ngx-border-color);border-radius:10px;overflow:hidden}.wrapper .dtp-btn{background:none;border:none;color:inherit;border-radius:6px;padding:5px 12px;box-shadow:0 0 4px #0000001f;transition:background .16s ease,transform .16s ease;display:inline-flex;align-items:center;justify-content:center}.wrapper .dtp-btn:not([disabled]):hover{cursor:pointer;background:#7f7fa02e}.wrapper .dtp-btn.active{background:#7f7fa03d}.wrapper .dtp-btn svg{fill:currentColor}.wrapper .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid var(--ngx-border-color)}.wrapper .header .current-date{text-align:center;flex:1;min-width:0;font-weight:700}.wrapper .nxt-prv-buttons,.wrapper .view-mode{display:flex;align-items:center;gap:4px}.calendar{padding:10px;min-width:0}.weeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;padding:0;margin:0 0 8px;border-inline-start:1px solid var(--ngx-border-color)}.weeks li{padding:7px 4px;text-align:center;color:var(--ngx-muted);font-size:11px;font-weight:700;border-inline-end:1px solid var(--ngx-border-color)}.month-grid{display:grid;grid-template-rows:repeat(6,minmax(92px,1fr));border-inline-start:1px solid var(--ngx-border-color);border-top:1px solid var(--ngx-border-color);position:relative}.month-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:92px;border-bottom:1px solid var(--ngx-border-color)}.month-day{position:relative;min-width:0;min-height:92px;overflow:hidden;padding:4px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background .15s ease}.month-day:hover{background:#7f7fa00d}.month-day.de-active{opacity:.48}.month-day.selected{outline:2px solid rgba(63,81,181,.3);outline-offset:-2px}.month-day.today .day-number{background:#3f51b51a;color:var(--ngx-today);font-weight:800}.day-number{width:27px;height:27px;display:grid;place-items:center;margin-inline-start:auto;border-radius:50%;font-size:12px;font-weight:600}.month-event-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,26px);pointer-events:none;padding-top:34px}.month-event{position:relative;z-index:3;min-width:0;height:22px;margin-inline:2px;padding:2px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;font-weight:600;line-height:17px;text-align:start;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:grab;touch-action:none;box-sizing:border-box}.month-event:active{cursor:grabbing}.month-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024}.month-event.is-dragging{opacity:.78;box-shadow:0 5px 14px #0003}.month-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px;margin-inline-start:0}.month-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px;margin-inline-end:0}.event-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.continuation-title{opacity:.85}.resize-handle{position:absolute;z-index:5;touch-action:none;background:transparent}.resize-handle-h{top:0;bottom:0;width:11px;cursor:ew-resize}.resize-handle-h:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:4px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-h.resize-start{inset-inline-start:-2px}.resize-handle-h.resize-end{inset-inline-end:-2px}.resize-handle-v{inset-inline:0;height:8px;cursor:ns-resize}.resize-handle-v:after{content:\"\";position:absolute;inset-inline:5px;height:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-handle-v.resize-start{top:-2px}.resize-handle-v.resize-start:after{top:4px}.resize-handle-v.resize-end{bottom:-2px}.resize-handle-v.resize-end:after{bottom:4px}.timed-calendar{min-width:0;border:1px solid var(--ngx-border-color);border-radius:8px;overflow:auto}.timed-header,.all-day-row,.time-grid{display:grid;min-width:620px}.timed-header{position:sticky;top:0;z-index:5;background:var(--ngx-color-bg);border-bottom:1px solid var(--ngx-border-color)}.corner{border-inline-end:1px solid var(--ngx-border-color)}.day-header{min-width:0;height:58px;padding:6px;border:0;border-inline-end:1px solid var(--ngx-border-color);background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.day-header span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ngx-muted)}.day-header strong{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:14px}.day-header.today strong{background:var(--ngx-today);color:#fff}.day-header:hover{background:#7f7fa012}.all-day-row{min-height:34px;border-bottom:1px solid var(--ngx-border-color);background:color-mix(in srgb,var(--ngx-color-bg) 94%,currentColor)}.all-day-row .all-day-label{padding:8px 5px;color:var(--ngx-muted);font-size:10px;border-inline-end:1px solid var(--ngx-border-color);text-align:center}.all-day-row .all-day-cell{min-width:0;padding:4px;border-inline-end:1px solid var(--ngx-border-color);display:flex;flex-direction:column;gap:3px}.time-grid{position:relative;align-items:stretch;min-height:1536px}.time-axis{position:relative;border-inline-end:1px solid var(--ngx-border-color);background:var(--ngx-color-bg)}.time-label{position:absolute;inset-inline:0 5px;transform:translateY(-50%);text-align:end;color:var(--ngx-muted);font-size:10px;pointer-events:none}.day-column{position:relative;min-width:0;height:1536px;border-inline-end:1px solid var(--ngx-border-color);background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--ngx-border-color) 32px,transparent 33px,transparent 63px,var(--ngx-border-color) 64px)}.time-slot{height:32px;pointer-events:none;border-bottom:1px dashed color-mix(in srgb,var(--ngx-border-color) 55%,transparent)}.time-slot.hour{border-bottom-style:solid;border-bottom-color:var(--ngx-border-color)}.timed-event{position:absolute;z-index:2;min-width:24px;padding:4px 7px;border:1px solid transparent;border-radius:5px;overflow:hidden;background:var(--ngx-event-bg);color:var(--ngx-event-text);font:inherit;font-size:11px;line-height:15px;text-align:start;cursor:grab;box-sizing:border-box;touch-action:none;transition:filter .12s ease,box-shadow .12s ease}.timed-event:hover{filter:brightness(.97);box-shadow:0 2px 7px #00000024;z-index:4}.timed-event strong,.timed-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timed-event small{opacity:.72;font-size:10px}.timed-event.continues-before{border-start-start-radius:2px;border-end-start-radius:2px}.timed-event.continues-after{border-start-end-radius:2px;border-end-end-radius:2px}.timed-event.all-day-event{cursor:grab;position:relative;inset:auto!important;width:100%!important;min-height:24px;height:24px;padding-block:2px}.event-list{display:flex;flex-direction:column;gap:6px}.event-list-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--ngx-border-color);border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer}.event-list-item:hover{background:#7f7fa014}.event-list-item .event-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ngx-today)}.event-list-item .event-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.event-list-item .event-copy strong,.event-list-item .event-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-list-item .event-copy small{opacity:.58}.empty-events{padding:30px;text-align:center;opacity:.55}:host-context([dir=rtl]) .nxt-prv-buttons .previous svg{transform:rotate(180deg)}:host-context([dir=rtl]) .nxt-prv-buttons .next svg{transform:rotate(180deg)}@media(max-width:700px){.wrapper .header{flex-wrap:wrap}.wrapper .header .current-date{order:-1;flex-basis:100%}.view-mode{width:100%;justify-content:center}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], resizeAndMovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeAndMovable", required: false }] }], config: [{
                 type: Input
             }], locale: [{
@@ -3193,7 +3193,7 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
                 useExisting: forwardRef(() => NgxDateRangePickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\r\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <path d=\"M16 2V6M8 2V6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\r\n        <path\r\n          d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 17.7712 21 14V12C21 8.22876 19.8284 5.17157 19.8284 5.17157C4 4 13 4 13 4Z\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.5\" />\r\n        <path d=\"M3 10H21\" stroke=\"currentColor\" stroke-width=\"1.5\" />\r\n      </svg>\r\n    </div>\r\n    <div class=\"header-copy\">\r\n      <div class=\"header-title\">Date range</div>\r\n      <div class=\"header-value\">{{ calendarHeader }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"sub-header\">\r\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"\r\n          config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n        \"></ng-template>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\r\n      <span>{{ displayMonth }}</span>\r\n      <span>{{ currYear }}</span>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"calendar\">\r\n    @if (view === 'day') {\r\n      <ul class=\"weeks\">\r\n        @for (w of weekDays; track $index) {\r\n          <li [title]=\"w.name\">{{ w.min }}</li>\r\n        }\r\n      </ul>\r\n\r\n      <ul class=\"days\">\r\n        @for (item of viewDays; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.in-range]=\"item.inRange\"\r\n            [class.in-range-preview]=\"item.inRangePreview\"\r\n            [class.range-start]=\"item.rangeStart\"\r\n            [class.range-end]=\"item.rangeEnd\"\r\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\r\n            (mouseenter)=\"onDayEnter(item)\"\r\n            (mouseleave)=\"onDayLeave()\"\r\n            (click)=\"selectDay($event, item)\"\r\n            [attr.aria-selected]=\"\r\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\r\n            \">\r\n            <span class=\"day-number\">{{ item.day }}</span>\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'month') {\r\n      <ul class=\"months\">\r\n        @for (item of viewMonths; track $index; let i = $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectMonth($event, item)\">\r\n            {{ i + 1 }}.{{ item.displayMonth }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <ul class=\"years\">\r\n        @for (item of viewYears; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectYear($event, item)\">\r\n            {{ item.year }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n\r\n    <div class=\"calendar-footer\">\r\n      @if (config.clearButton) {\r\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}:host-context([dir=rtl]) .days li.range-start:before{border-radius:0 20px 20px 0}:host-context([dir=rtl]) .days li.range-end:before{border-radius:20px 0 0 20px}:host-context([dir=rtl]) .days li.range-start.range-end:before{border-radius:20px}:host-context([dir=rtl]) #prev,:host-context([dir=rtl]) #next{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M16 2V6M8 2V6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        <path\n          d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 17.7712 21 14V12C21 8.22876 19.8284 5.17157 19.8284 5.17157C4 4 13 4 13 4Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\" />\n        <path d=\"M3 10H21\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n      </svg>\n    </div>\n    <div class=\"header-copy\">\n      <div class=\"header-title\">Date range</div>\n      <div class=\"header-value\">{{ calendarHeader }}</div>\n    </div>\n  </div>\n\n  <div class=\"sub-header\">\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\n      <ng-template\n        [ngTemplateOutlet]=\"\n          config.previousButtonTemplate || defaultPreviousBTNTemplate\n        \"></ng-template>\n    </button>\n\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\n      <span>{{ displayMonth }}</span>\n      <span>{{ currYear }}</span>\n    </button>\n\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\n      <ng-template\n        [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n    </button>\n  </div>\n\n  <div class=\"calendar\">\n    @if (view === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">{{ w.min }}</li>\n        }\n      </ul>\n\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.in-range]=\"item.inRange\"\n            [class.in-range-preview]=\"item.inRangePreview\"\n            [class.range-start]=\"item.rangeStart\"\n            [class.range-end]=\"item.rangeEnd\"\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\n            (mouseenter)=\"onDayEnter(item)\"\n            (mouseleave)=\"onDayLeave()\"\n            (click)=\"selectDay($event, item)\"\n            [attr.aria-selected]=\"\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\n            \">\n            <span class=\"day-number\">{{ item.day }}</span>\n          </li>\n        }\n      </ul>\n    } @else if (view === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\n      }\n      @if (config.todayButton) {\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}:host-context([dir=rtl]) .days li.range-start:before{border-radius:0 20px 20px 0}:host-context([dir=rtl]) .days li.range-end:before{border-radius:20px 0 0 20px}:host-context([dir=rtl]) .days li.range-start.range-end:before{border-radius:20px}:host-context([dir=rtl]) #prev,:host-context([dir=rtl]) #next{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDateRangePickerComponent, decorators: [{
             type: Component,
@@ -3209,7 +3209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => NgxDateRangePickerComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\r\n  <div class=\"header\">\r\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\r\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <path d=\"M16 2V6M8 2V6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\r\n        <path\r\n          d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 17.7712 21 14V12C21 8.22876 19.8284 5.17157 19.8284 5.17157C4 4 13 4 13 4Z\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.5\" />\r\n        <path d=\"M3 10H21\" stroke=\"currentColor\" stroke-width=\"1.5\" />\r\n      </svg>\r\n    </div>\r\n    <div class=\"header-copy\">\r\n      <div class=\"header-title\">Date range</div>\r\n      <div class=\"header-value\">{{ calendarHeader }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"sub-header\">\r\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"\r\n          config.previousButtonTemplate || defaultPreviousBTNTemplate\r\n        \"></ng-template>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\r\n      <span>{{ displayMonth }}</span>\r\n      <span>{{ currYear }}</span>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"calendar\">\r\n    @if (view === 'day') {\r\n      <ul class=\"weeks\">\r\n        @for (w of weekDays; track $index) {\r\n          <li [title]=\"w.name\">{{ w.min }}</li>\r\n        }\r\n      </ul>\r\n\r\n      <ul class=\"days\">\r\n        @for (item of viewDays; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.in-range]=\"item.inRange\"\r\n            [class.in-range-preview]=\"item.inRangePreview\"\r\n            [class.range-start]=\"item.rangeStart\"\r\n            [class.range-end]=\"item.rangeEnd\"\r\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\r\n            (mouseenter)=\"onDayEnter(item)\"\r\n            (mouseleave)=\"onDayLeave()\"\r\n            (click)=\"selectDay($event, item)\"\r\n            [attr.aria-selected]=\"\r\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\r\n            \">\r\n            <span class=\"day-number\">{{ item.day }}</span>\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else if (view === 'month') {\r\n      <ul class=\"months\">\r\n        @for (item of viewMonths; track $index; let i = $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectMonth($event, item)\">\r\n            {{ i + 1 }}.{{ item.displayMonth }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <ul class=\"years\">\r\n        @for (item of viewYears; track $index) {\r\n          <li\r\n            [class.de-active]=\"!item.active\"\r\n            [class.today]=\"item.isToday\"\r\n            [class.selected]=\"item.selected\"\r\n            (click)=\"selectYear($event, item)\">\r\n            {{ item.year }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n\r\n    <div class=\"calendar-footer\">\r\n      @if (config.clearButton) {\r\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\r\n      }\r\n      @if (config.todayButton) {\r\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultPreviousBTNTemplate>\r\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #defaultNextBTNTemplate>\r\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}:host-context([dir=rtl]) .days li.range-start:before{border-radius:0 20px 20px 0}:host-context([dir=rtl]) .days li.range-end:before{border-radius:20px 0 0 20px}:host-context([dir=rtl]) .days li.range-start.range-end:before{border-radius:20px}:host-context([dir=rtl]) #prev,:host-context([dir=rtl]) #next{transform:rotate(180deg)}\n"] }]
+                    ], template: "<div class=\"wrapper\" (click)=\"stopPagination($event)\">\n  <div class=\"header\">\n    <div class=\"calendar-icon\" aria-hidden=\"true\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M16 2V6M8 2V6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        <path\n          d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 17.7712 21 14V12C21 8.22876 19.8284 5.17157 19.8284 5.17157C4 4 13 4 13 4Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\" />\n        <path d=\"M3 10H21\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n      </svg>\n    </div>\n    <div class=\"header-copy\">\n      <div class=\"header-title\">Date range</div>\n      <div class=\"header-value\">{{ calendarHeader }}</div>\n    </div>\n  </div>\n\n  <div class=\"sub-header\">\n    <button type=\"button\" class=\"nav-button\" id=\"prev\" (click)=\"previous()\" aria-label=\"Previous\">\n      <ng-template\n        [ngTemplateOutlet]=\"\n          config.previousButtonTemplate || defaultPreviousBTNTemplate\n        \"></ng-template>\n    </button>\n\n    <button type=\"button\" class=\"current-date\" (click)=\"changeView('month')\">\n      <span>{{ displayMonth }}</span>\n      <span>{{ currYear }}</span>\n    </button>\n\n    <button type=\"button\" class=\"nav-button\" id=\"next\" (click)=\"next()\" aria-label=\"Next\">\n      <ng-template\n        [ngTemplateOutlet]=\"config.nextButtonTemplate || defaultNextBTNTemplate\"></ng-template>\n    </button>\n  </div>\n\n  <div class=\"calendar\">\n    @if (view === 'day') {\n      <ul class=\"weeks\">\n        @for (w of weekDays; track $index) {\n          <li [title]=\"w.name\">{{ w.min }}</li>\n        }\n      </ul>\n\n      <ul class=\"days\">\n        @for (item of viewDays; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.in-range]=\"item.inRange\"\n            [class.in-range-preview]=\"item.inRangePreview\"\n            [class.range-start]=\"item.rangeStart\"\n            [class.range-end]=\"item.rangeEnd\"\n            [class.range-single]=\"item.rangeStart && item.rangeEnd\"\n            (mouseenter)=\"onDayEnter(item)\"\n            (mouseleave)=\"onDayLeave()\"\n            (click)=\"selectDay($event, item)\"\n            [attr.aria-selected]=\"\n              item.rangeStart || item.rangeEnd || item.inRange || item.inRangePreview\n            \">\n            <span class=\"day-number\">{{ item.day }}</span>\n          </li>\n        }\n      </ul>\n    } @else if (view === 'month') {\n      <ul class=\"months\">\n        @for (item of viewMonths; track $index; let i = $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectMonth($event, item)\">\n            {{ i + 1 }}.{{ item.displayMonth }}\n          </li>\n        }\n      </ul>\n    } @else {\n      <ul class=\"years\">\n        @for (item of viewYears; track $index) {\n          <li\n            [class.de-active]=\"!item.active\"\n            [class.today]=\"item.isToday\"\n            [class.selected]=\"item.selected\"\n            (click)=\"selectYear($event, item)\">\n            {{ item.year }}\n          </li>\n        }\n      </ul>\n    }\n\n    <div class=\"calendar-footer\">\n      @if (config.clearButton) {\n        <button type=\"button\" (click)=\"clear()\">{{ localize().clear }}</button>\n      }\n      @if (config.todayButton) {\n        <button type=\"button\" (click)=\"gotoToday()\">{{ localize().today }}</button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultPreviousBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\" />\n  </svg>\n</ng-template>\n\n<ng-template #defaultNextBTNTemplate>\n  <svg width=\"14\" height=\"28\" viewBox=\"0 0 320 512\">\n    <path\n      fill=\"currentColor\"\n      d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\" />\n  </svg>\n</ng-template>\n", styles: [":host{--ngx-range-bg: light-dark(#ffffff, #10162b);--ngx-range-text: light-dark(#171717, #f4f4f5);--ngx-range-muted: light-dark(#8a8f98, #72798a);--ngx-range-border: light-dark(#e6e8ee, #272d40);--ngx-range-accent: light-dark(#6544e8, #8d6cff);--ngx-range-accent-soft: light-dark(#eeeaff, #2b2252);--ngx-range-hover: light-dark(#f4f2ff, #211b38)}.wrapper{width:336px;overflow:hidden;border:1px solid var(--ngx-range-border);border-radius:14px;background:var(--ngx-range-bg);color:var(--ngx-range-text);box-shadow:0 18px 55px #0000002e;font-size:13px}.header{display:flex;gap:12px;padding:15px 16px;background:linear-gradient(135deg,#6747e9,#8b64f5);color:#fff}.header .calendar-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#ffffff29}.header .header-copy{min-width:0;flex:1}.header .header-title{opacity:.75;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.header .header-value{margin-top:3px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--ngx-range-border)}.sub-header button{color:inherit;border:0;background:transparent;cursor:pointer}.sub-header .nav-button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px}.sub-header .nav-button:hover{background:var(--ngx-range-hover)}.sub-header .current-date{display:flex;justify-content:center;gap:6px;font-weight:700;font-size:14px}.calendar{padding:10px 12px 12px}.calendar ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}.calendar .weeks li,.calendar .days li{width:14.2857142857%}.calendar .weeks{margin-bottom:4px}.calendar .weeks li{height:30px;display:grid;place-items:center;color:var(--ngx-range-muted);font-size:11px;font-weight:700}.calendar .days li{position:relative;height:40px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.calendar .days li:before{content:\"\";position:absolute;inset:4px 0;background:transparent;z-index:0}.calendar .days li .day-number{position:relative;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;transition:transform .12s ease,background .12s ease}.calendar .days li:not(.de-active):hover .day-number{background:var(--ngx-range-hover)}.calendar .days li.de-active{color:var(--ngx-range-muted);opacity:.45;cursor:default}.calendar .days li.in-range:before,.calendar .days li.in-range-preview:before{background:var(--ngx-range-accent-soft)}.calendar .days li.range-start:before{border-radius:20px 0 0 20px}.calendar .days li.range-end:before{border-radius:0 20px 20px 0}.calendar .days li.range-start.range-end:before{border-radius:20px}.calendar .days li.range-start .day-number,.calendar .days li.range-end .day-number{background:var(--ngx-range-accent);color:#fff;font-weight:700;box-shadow:0 3px 10px #6544e847}.calendar .days li.range-single .day-number{box-shadow:none}.calendar .days li.today:not(.range-start):not(.range-end) .day-number{outline:1.5px solid var(--ngx-range-accent);outline-offset:-1px}.calendar .days li.in-range:not(.range-start):not(.range-end) .day-number{color:var(--ngx-range-text)}.calendar .months li,.calendar .years li{height:46px;width:33.333%;display:grid;place-items:center;border-radius:10px;cursor:pointer}.calendar .months li:hover,.calendar .years li:hover{background:var(--ngx-range-hover)}.calendar .months li.selected,.calendar .years li.selected{background:var(--ngx-range-accent);color:#fff}.calendar .months li.de-active,.calendar .years li.de-active{opacity:.4}.calendar .years li{width:25%}.calendar .calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ngx-range-border)}.calendar .calendar-footer button{min-height:34px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-weight:600}.calendar .calendar-footer button:hover{background:var(--ngx-range-hover)}:host-context([dir=rtl]) .days li.range-start:before{border-radius:0 20px 20px 0}:host-context([dir=rtl]) .days li.range-end:before{border-radius:20px 0 0 20px}:host-context([dir=rtl]) .days li.range-start.range-end:before{border-radius:20px}:host-context([dir=rtl]) #prev,:host-context([dir=rtl]) #next{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], locale: [{
                 type: Input
             }], min: [{
@@ -3357,9 +3357,7 @@ class NgxInputDateRangePicker {
         };
         const startText = format(start);
         const endText = format(end);
-        const value = startText && endText
-            ? `${startText}${this.rangeSeparator}${endText}`
-            : startText;
+        const value = startText && endText ? `${startText}${this.rangeSeparator}${endText}` : startText;
         this.renderer.setProperty(this.el.nativeElement, 'value', value);
     }
     destroyDatePicker() {