ngx-kit 6.2.0 → 6.3.0

package/drawer-menu/README.md

@@ -1,77 +1,125 @@
-# ngx-kit/drawer-menu
-
-A side drawer menu with 7 different opening/closing effects (from simple to 3D/jelly), 3 behaviors for the page content (overlay/push/reveal), and a responsive default open/closed state based on screen size.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Basic usage
-
-```html
-<ngx-drawer-menu
-  side="start"
-  effect="jelly"
-  contentBehavior="push"
-  [width]="280"
-  [openOnDesktop]="true"
-  [openOnMobile]="false"
-  [(open)]="isOpen"
->
-  <div drawerContent>
-    <!-- menu content -->
-    <a routerLink="/home">Home</a>
-    <a routerLink="/settings">Settings</a>
-  </div>
-
-  <!-- main page content (default, no select) -->
-  <router-outlet />
-</ngx-drawer-menu>
-```
-
-## API
-
-| Input | Type | Default | Description |
-| --- | --- | --- | --- |
-| `side` | `'start' \| 'end'` | `'start'` | Logical — automatically flips under RTL |
-| `effect` | `'slide' \| 'curtain' \| 'jelly' \| 'pull' \| 'rotate3d' \| 'flip3d' \| 'scale'` | `'slide'` | The panel's own open/close effect (described below) |
-| `contentBehavior` | `'overlay' \| 'push' \| 'reveal'` | `'overlay'` | How the main page content behaves |
-| `width` | `number` | `280` | Panel width in pixels |
-| `swipeEnabled` | `boolean` | `true` | Open by swiping from the screen edge |
-| `swipeEdgeSize` | `number` | `24` | Width of the invisible edge zone that a swipe can start from |
-| `backdropClose` | `boolean` | `true` | Close on backdrop click (or dimming the content in push/reveal) |
-| `curtainStrips` | `number` | `7` | Only for `effect="curtain"` |
-| `open` | `boolean` (model, two-way) | `false` | Controllable via `[(open)]` |
-| `respondToViewport` | `boolean` | `true` | Crossing `mobileBreakpoint` **live** (not just on first load) syncs `open` with `openOnDesktop`/`openOnMobile` |
-| `openOnDesktop` / `openOnMobile` | `boolean` | `true` / `false` | |
-| `mobileBreakpoint` | `number` | `768` | |
-
-### Effects (`effect`)
-
-| Value | Description |
-| --- | --- |
-| `slide` | Classic simple slide |
-| `curtain` | Several same-colored vertical strips that collapse with a staggered delay, revealing the content |
-| `jelly` | A multi-stage spring oscillation that settles down (inspired by the [Jelly Slide Menu](https://dribbble.com/shots/2307371) effect) |
-| `pull` | A single rubber-band stretch |
-| `rotate3d` | A 3D rotation around a hinge, like a door opening |
-| `flip3d` | Flips with depth on the Z axis, like a book cover |
-| `scale` | Zooms in from the center with a fade |
-
-### Content behavior (`contentBehavior`)
-
-| Value | Description |
-| --- | --- |
-| `overlay` | Content stays in place, the drawer floats over it (with a backdrop) |
-| `push` | Content is pushed aside by the drawer's width |
-| `reveal` | Content shrinks/recedes slightly, as if the drawer is revealed behind it (the iOS effect) |
-
-## Architecture note: embedding inside a bounded area
-
-By default, the drawer takes up the full height of the nearest positioned ancestor (which is what you want for a full app shell). If you want to embed it inside a bounded card/area (not the whole page), just give that container `position: relative` and a defined height — the drawer will automatically confine itself to that box (thanks to the `perspective` it uses for 3D effects, which per the CSS spec creates a containing block for `position:fixed` descendants).
-
-## Dark mode and RTL
-
-Supported automatically; drag math (which, unlike CSS logical properties, needs the real physical direction) uses the shared `DirectionService`, so it works correctly even with a live `dir` change.
+# ngx-kit/drawer-menu
+
+A gesture-first Angular navigation drawer designed for desktop and mobile.
+
+## Highlights
+
+- Logical `start` / `end` placement with RTL/LTR support.
+- Mouse + touch + pen drag using Pointer Events.
+- Open from the screen edge when closed.
+- Drag the drawer itself to close it.
+- Live 0..1 gesture progress — effects react while dragging.
+- Fabric / curtain / spring / elastic effects.
+- `overlay`, `push`, and `reveal` content modes.
+- Desktop/mobile responsive state.
+- True docked desktop sidebar: open means it occupies layout space and clicking the page never closes it.
+- Mobile overlay behavior with backdrop and edge swipe.
+- Pin/unpin support.
+- Controlled state with `[(open)]`.
+- Reduced-motion support.
+- Escape and backdrop closing.
+
+## Recommended configuration
+
+```html
+<ngx-drawer-menu
+  side="start"
+  mode="push"
+  effect="fabric"
+  [width]="300"
+  [openOnDesktop]="true"
+  [openOnMobile]="false"
+  [mobileBreakpoint]="960"
+  [(open)]="drawerOpen"
+  [(pinned)]="drawerPinned">
+  <router-outlet />
+
+  <div drawerContent>
+    <!-- navigation -->
+  </div>
+</ngx-drawer-menu>
+```
+
+## Behavior model
+
+The drawer owns one continuous `progress` value between `0` and `1`.
+
+- `0`: fully closed.
+- `1`: fully open.
+- Pointer dragging directly changes progress.
+- On release, velocity and the configured threshold decide the final state.
+
+This is the key to getting a physical-feeling drawer instead of a drawer that simply jumps between CSS classes.
+
+## Inputs
+
+| Input               | Default   | Purpose                                                      |
+| ------------------- | --------- | ------------------------------------------------------------ |
+| `side`              | `start`   | Logical drawer side.                                         |
+| `mode`              | `overlay` | `overlay`, `push`, or `reveal`.                              |
+| `effect`            | `fabric`  | `slide`, `spring`, `fabric`, `curtain`, `elastic`, `reveal`. |
+| `width`             | `300`     | Drawer width in px.                                          |
+| `maxWidth`          | `420`     | Safety cap for drawer width.                                 |
+| `edgeSize`          | `34`      | Edge swipe activation area.                                  |
+| `swipeEnabled`      | `true`    | Enables gesture interaction.                                 |
+| `backdropClose`     | `true`    | Close on backdrop press.                                     |
+| `escapeClose`       | `true`    | Close on Escape.                                             |
+| `open`              | `true`    | Two-way state via `[(open)]`.                                |
+| `pinned`            | `false`   | Persistent drawer state via `[(pinned)]`.                    |
+| `mobileBreakpoint`  | `768`     | Mobile breakpoint.                                           |
+| `openOnDesktop`     | `true`    | State on desktop.                                            |
+| `openOnMobile`      | `false`   | State on mobile/tablet.                                      |
+| `respondToViewport` | `true`    | Enables live responsive switching.                           |
+| `transitionMs`      | `420`     | Settle animation duration.                                   |
+
+## Responsive behavior
+
+By default:
+
+- Desktop >= 768px: open.
+- Mobile < 768px: closed.
+- Crossing the breakpoint updates the drawer live.
+- A pinned drawer is not closed by responsive rules.
+
+A full `responsive` object is also available when a single config object is preferable:
+
+```html
+<ngx-drawer-menu
+  [responsive]="{
+    mode: 'auto',
+    breakpoint: 960,
+    desktopOpen: true,
+    mobileOpen: false,
+    respectPinned: true
+  }"></ngx-drawer-menu>
+```
+
+## Recommended responsive behavior
+
+When `respondToViewport` is enabled, the drawer uses a real sidebar on desktop and an overlay drawer on mobile by default:
+
+```html
+<ngx-drawer-menu
+  side="start"
+  [responsive]="{
+    mode: 'auto',
+    breakpoint: 960,
+    desktopOpen: true,
+    mobileOpen: false,
+    desktopBehavior: 'dock',
+    mobileBehavior: 'overlay',
+    respectPinned: true
+  }"
+  effect="fabric"
+  [width]="300">
+  <router-outlet />
+  <nav drawerContent>...</nav>
+</ngx-drawer-menu>
+```
+
+In this setup:
+
+- `>= 960px`: the open drawer is a real docked sidebar; it owns layout width and does not create a backdrop.
+- `< 960px`: the drawer is an overlay; the page is dimmed and clicking the backdrop can close it.
+- On desktop the drawer can still be dragged closed from its full-height edge handle.
+- When closed, the screen edge remains a mouse/touch drag target and opens the drawer.

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

@@ -2212,6 +2212,8 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     defaultLocalization = inject(NGX_CALENDAR_LOCALIZATION);
     localize = input(this.defaultLocalization, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "localize" }] : /* istanbul ignore next */ []));
+    resizeAndMovable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeAndMovable" }] : /* istanbul ignore next */ []));
     _config = new NgxDatePickerConfig();
     set config(val) {
         this._config = { ...new NgxDatePickerConfig(), ...val };
@@ -2635,14 +2637,14 @@ class NgxCalendarComponent extends NgxDatePickerBase {
         this.selectEvent.emit({ date, event });
     }
     startMonthEventInteraction(ev, segment, type = 'move') {
-        if (ev.button !== 0)
+        if (ev.button !== 0 || !this.resizeAndMovable())
             return;
         ev.preventDefault();
         ev.stopPropagation();
         this.beginInteraction(ev, segment, type, 'month');
     }
     startTimedEventInteraction(ev, event, type = 'move') {
-        if (ev.button !== 0)
+        if (ev.button !== 0 || !this.resizeAndMovable())
             return;
         ev.preventDefault();
         ev.stopPropagation();
@@ -2715,7 +2717,7 @@ class NgxCalendarComponent extends NgxDatePickerBase {
     monthPointerDelta(ev) {
         if (!this.interaction || this.view !== 'month')
             return null;
-        const root = this.calendarWrapper()?.nativeElement.querySelector('.days');
+        const root = this.calendarWrapper()?.nativeElement.querySelector('.month-grid');
         if (!root)
             return null;
         const rect = root.getBoundingClientRect();
@@ -2833,12 +2835,12 @@ 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 }, 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\n                    @if (event.isStart) {\n                      <span\n                        class=\"resize-handle 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-end\"\n                        title=\"Resize end\"\n                        (pointerdown)=\"\n                          startMonthEventInteraction($event, event, 'resize-end')\n                        \"></span>\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 (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\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 (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\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;top:0;bottom:0;width:7px;z-index:5;cursor:ew-resize;touch-action:none}.resize-handle:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:3px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-start{inset-inline-start:0}.resize-end{inset-inline-end:0}.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\">\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 });
 }
 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\">\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\n                    @if (event.isStart) {\n                      <span\n                        class=\"resize-handle 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-end\"\n                        title=\"Resize end\"\n                        (pointerdown)=\"\n                          startMonthEventInteraction($event, event, 'resize-end')\n                        \"></span>\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 (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\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 (event.isStart) {\n                <span\n                  class=\"resize-handle resize-start\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-start')\"></span>\n              }\n              @if (event.isEnd) {\n                <span\n                  class=\"resize-handle resize-end\"\n                  (pointerdown)=\"startTimedEventInteraction($event, event, 'resize-end')\"></span>\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;top:0;bottom:0;width:7px;z-index:5;cursor:ew-resize;touch-action:none}.resize-handle:after{content:\"\";position:absolute;top:5px;bottom:5px;inset-inline-start:3px;width:2px;border-radius:2px;background:currentColor;opacity:.45}.resize-start{inset-inline-start:0}.resize-end{inset-inline-end:0}.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 }] }], config: [{
+            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"] }]
+        }], 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: [{
                 type: Input
@@ -3191,7 +3193,7 @@ class NgxDateRangePickerComponent extends NgxDatePickerBase {
                 useExisting: forwardRef(() => NgxDateRangePickerComponent),
                 multi: true,
             },
-        ], 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"] }] });
+        ], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDateRangePickerComponent, decorators: [{
             type: Component,
@@ -3207,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)\">\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"] }]
+                    ], 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"] }]
         }], propDecorators: { localize: [{ type: i0.Input, args: [{ isSignal: true, alias: "localize", required: false }] }], locale: [{
                 type: Input
             }], min: [{