@indigina/ui-kit 1.1.240 → 1.1.241

package/fesm2022/indigina-ui-kit.mjs

@@ -8590,17 +8590,16 @@ class KitFilterDateComponent {
             const endDate = this.endDate();
             return (!endDate || this.useLocalTimeZone()) ? endDate : convertDateToLocal(endDate);
         }, ...(ngDevMode ? [{ debugName: "localEndDate" }] : []));
+        this.pointerDownStartedInsideArea = false;
+        this.onDocumentMouseDown = (event) => {
+            this.pointerDownStartedInsideArea = this.isEventInsideAllowedArea(event.target);
+        };
         this.onDocumentClick = (event) => {
-            const datePicker = document.querySelector('.kit-datepicker-popup');
-            const popupElement = this.popup()?.popupHTMLElement;
-            const isClickOutsideDatePicker = !datePicker?.contains(event.target) &&
-                !event.target.matches('.k-link') &&
-                !event.target?.parentElement?.parentElement?.matches('.k-calendar-nav');
-            if (!popupElement?.contains(event.target)
-                && !this.anchor()?.nativeElement.contains(event.target)
-                && isClickOutsideDatePicker) {
+            const clickInsideArea = this.isEventInsideAllowedArea(event.target);
+            if (!this.pointerDownStartedInsideArea && !clickInsideArea) {
                 this.popup()?.close();
             }
+            this.pointerDownStartedInsideArea = false;
         };
     }
     ngOnInit() {
@@ -8681,11 +8680,28 @@ class KitFilterDateComponent {
         }
     }
     addOutsideClickListener() {
+        document.addEventListener('mousedown', this.onDocumentMouseDown, true);
         document.addEventListener('click', this.onDocumentClick, true);
     }
     removeOutsideClickListener() {
+        document.removeEventListener('mousedown', this.onDocumentMouseDown, true);
         document.removeEventListener('click', this.onDocumentClick, true);
     }
+    isEventInsideAllowedArea(target) {
+        if (!target) {
+            return false;
+        }
+        const popupElement = this.popup()?.popupHTMLElement;
+        const anchorElement = this.anchor()?.nativeElement;
+        const datePicker = document.querySelector('.kit-datepicker-popup');
+        const targetEl = target instanceof HTMLElement ? target : null;
+        const insideDatePicker = !!(datePicker?.contains(target) ||
+            targetEl?.matches('.k-link') ||
+            targetEl?.parentElement?.parentElement?.matches('.k-calendar-nav'));
+        return !!(popupElement?.contains(target) ||
+            anchorElement?.contains(target) ||
+            insideDatePicker);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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" }, 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: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size"], outputs: ["changed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }