@indigina/ui-kit 1.1.190 → 1.1.192

package/fesm2022/indigina-ui-kit.mjs

@@ -4700,10 +4700,6 @@ class KitDatepickerComponent {
          * Defines a value that is going to be applied as a datepicker format
          */
         this.format = 'dd MMM yyyy';
-        /**
-         * Determines if the date should be treated as local time (true) or UTC (false)
-         */
-        this.useLocalTimeZone = true;
         /**
          * Defines the size of the datepicker input field
          */
@@ -4735,10 +4731,9 @@ class KitDatepickerComponent {
         }
     }
     onValueChange(value) {
-        const date = this.useLocalTimeZone ? value : this.toUTCDate(value);
-        this.changed.emit(date);
-        this.defaultDate = date;
-        this.onChange(date);
+        this.changed.emit(value);
+        this.defaultDate = value;
+        this.onChange(value);
     }
     onPopupToggle() {
         this.datepicker.focus();
@@ -4760,14 +4755,8 @@ class KitDatepickerComponent {
     setDisabledState(disabled) {
         this.disabled = disabled;
     }
-    toUTCDate(value) {
-        const year = value.getFullYear();
-        const month = value.getMonth();
-        const day = value.getDate();
-        return new Date(Date.UTC(year, month, day, 0, 0, 0));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitDatepickerComponent, isStandalone: false, selector: "kit-datepicker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { listeners: { "document:click": "documentClick($event)" } }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitDatepickerComponent, isStandalone: false, selector: "kit-datepicker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { listeners: { "document:click": "documentClick($event)" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KitDatepickerComponent),
                 multi: true,
@@ -4801,8 +4790,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], messageText: [{
                 type: Input
-            }], useLocalTimeZone: [{
-                type: Input
             }], changed: [{
                 type: Output
             }], datepicker: [{
@@ -4999,6 +4986,27 @@ class KitTabsComponent {
          * Defines the reference to the tabs content
          */
         this.tabs = contentChildren(KitTabComponent);
+        this.interceptInputKeys = (event) => {
+            const target = event.target;
+            const isTextInput = [
+                'INPUT',
+                'TEXTAREA',
+            ].includes(target.nodeName) || target.hasAttribute('contenteditable');
+            const keysToProtect = [
+                'ArrowLeft',
+                'ArrowRight',
+                'Backspace',
+            ];
+            if (isTextInput && keysToProtect.includes(event.key)) {
+                event.stopImmediatePropagation();
+            }
+        };
+    }
+    ngOnInit() {
+        document.addEventListener('keydown', this.interceptInputKeys, true);
+    }
+    ngOnDestroy() {
+        document.removeEventListener('keydown', this.interceptInputKeys, true);
     }
     onTabSelect(event) {
         this.tabSelected.emit({
@@ -6751,7 +6759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const kitDataStateToODataString = (state) => toODataString(state);
+const kitDataStateToODataString = (state, utcDates = false) => toODataString(state, { utcDates });
 
 class KitPageLayoutComponent {
     constructor(kitNavigationMenuService) {
@@ -7418,9 +7426,7 @@ const normalizeGuidFilter = (filter) => {
     const guidFormat = /'((\{)?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(\})?)'/g;
     return filter.replace(guidFormat, '$1');
 };
-const kitBuildOdataFilter = (filter) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({
-    filter,
-})));
+const kitBuildOdataFilter = (filter) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({ filter }, true)));
 const kitBuildFilters = (filters) => ({
     logic: KitFilterLogic.AND,
     filters: filters.map(filter => filterEmptyValues(filter.value) ?? []),
@@ -8008,6 +8014,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ buildTranslateKey(displayedValues[0]) | translate }}\n        <span class=\"tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ? (buildTranslateKey(displayedValues[0]) | translate) : '' }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-checkbox class=\"checkbox-item\"\n                  [label]=\"'kit.filters.all' | translate\"\n                  [(ngModel)]=\"allSelected\"\n                  (changed)=\"toggleAll($event)\">\n    </kit-checkbox>\n\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox .tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
         }], ctorParameters: () => [] });
 
+const convertDateToUTC = (date, isEndOfDay) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const day = date.getDate();
+    return isEndOfDay ? new Date(Date.UTC(year, month, day, 23, 59, 59)) : new Date(Date.UTC(year, month, day, 0, 0, 0));
+};
+const convertDateToLocal = (date) => {
+    const year = date.getUTCFullYear();
+    const month = date.getUTCMonth();
+    const day = date.getUTCDate();
+    return new Date(year, month, day);
+};
+
 class KitFilterDateComponent {
     constructor() {
         this.filter = input.required();
@@ -8021,6 +8040,14 @@ class KitFilterDateComponent {
         this.selectedValues = signal({});
         this.pillDateFormat = 'dd/MM/yy';
         this.kitPillTheme = KitPillTheme;
+        this.localStartDate = computed(() => {
+            const startDate = this.startDate();
+            return (!startDate || this.useLocalTimeZone()) ? startDate : convertDateToLocal(startDate);
+        });
+        this.localEndDate = computed(() => {
+            const endDate = this.endDate();
+            return (!endDate || this.useLocalTimeZone()) ? endDate : convertDateToLocal(endDate);
+        });
     }
     documentClick(event) {
         const datePicker = document.querySelector('.kit-datepicker-popup');
@@ -8056,10 +8083,12 @@ class KitFilterDateComponent {
         }
     }
     onFromDateChange(date) {
-        this.startDate.set(date);
+        const startDate = this.useLocalTimeZone() ? date : convertDateToUTC(date);
+        this.startDate.set(startDate);
     }
     onToDateChange(date) {
-        this.endDate.set(date);
+        const endDate = this.useLocalTimeZone() ? date : convertDateToUTC(date, true);
+        this.endDate.set(endDate);
     }
     applyButtonDisabled() {
         return !this.startDate() && !this.endDate();
@@ -8106,7 +8135,7 @@ class KitFilterDateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"startDate()\"\n                      [max]=\"endDate()\"\n                      [useLocalTimeZone]=\"useLocalTimeZone()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"endDate()\"\n                      [min]=\"startDate()\"\n                      [useLocalTimeZone]=\"useLocalTimeZone()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "useLocalTimeZone", "size"], outputs: ["changed"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [max]=\"localEndDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"localEndDate()\"\n                      [min]=\"localStartDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size"], outputs: ["changed"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitFilterDateComponent, decorators: [{
             type: Component,
@@ -8116,7 +8145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         KitDatepickerModule,
                         DatePipe,
                         KitPopupComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"startDate()\"\n                      [max]=\"endDate()\"\n                      [useLocalTimeZone]=\"useLocalTimeZone()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"endDate()\"\n                      [min]=\"startDate()\"\n                      [useLocalTimeZone]=\"useLocalTimeZone()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [max]=\"localEndDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"localEndDate()\"\n                      [min]=\"localStartDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"] }]
         }], propDecorators: { documentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -9310,7 +9339,7 @@ class KitSchedulerToolbarComponent {
         this.toolbarService.navigate(action);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitSchedulerToolbarComponent, deps: [{ token: i1$e.ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KitSchedulerToolbarComponent, isStandalone: true, selector: "kit-scheduler-toolbar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-scheduler-toolbar\">\n  <div class=\"kit-scheduler-toolbar-nav\">\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_LEFT\"\n                (clicked)=\"prev()\"\n    ></kit-button>\n    <kit-button label=\"Today\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"today()\"></kit-button>\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n                (clicked)=\"next()\">\n    </kit-button>\n  </div>\n  <ng-content select=\"[views-selector]\"></ng-content>\n  <kit-datepicker class=\"kit-scheduler-toolbar-datepicker\"\n                  [defaultDate]=\"selectedDate()\"\n                  [size]=\"kitDatepickerSize.SMALL\"\n                  [format]=\"getDatepickerFormat()\"\n                  (changed)=\"onDateChange($event)\"\n  ></kit-datepicker>\n</div>\n", styles: [".kit-scheduler-toolbar{display:flex;align-items:center;gap:20px;width:100%}.kit-scheduler-toolbar-nav{display:flex;align-items:center;gap:1px;padding-right:20px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-scheduler-toolbar-datepicker{margin-left:auto;width:220px}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "useLocalTimeZone", "size"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KitSchedulerToolbarComponent, isStandalone: true, selector: "kit-scheduler-toolbar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-scheduler-toolbar\">\n  <div class=\"kit-scheduler-toolbar-nav\">\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_LEFT\"\n                (clicked)=\"prev()\"\n    ></kit-button>\n    <kit-button label=\"Today\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"today()\"></kit-button>\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n                (clicked)=\"next()\">\n    </kit-button>\n  </div>\n  <ng-content select=\"[views-selector]\"></ng-content>\n  <kit-datepicker class=\"kit-scheduler-toolbar-datepicker\"\n                  [defaultDate]=\"selectedDate()\"\n                  [size]=\"kitDatepickerSize.SMALL\"\n                  [format]=\"getDatepickerFormat()\"\n                  (changed)=\"onDateChange($event)\"\n  ></kit-datepicker>\n</div>\n", styles: [".kit-scheduler-toolbar{display:flex;align-items:center;gap:20px;width:100%}.kit-scheduler-toolbar-nav{display:flex;align-items:center;gap:1px;padding-right:20px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-scheduler-toolbar-datepicker{margin-left:auto;width:220px}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitSchedulerToolbarComponent, decorators: [{
             type: Component,