@indigina/ui-kit 1.1.219 → 1.1.220
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/indigina-ui-kit.mjs +45 -28
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +5 -2
- package/package.json +1 -1
|
@@ -4698,17 +4698,22 @@ class KitPopupComponent {
|
|
|
4698
4698
|
this.kitButtonKind = KitButtonKind;
|
|
4699
4699
|
this.kitButtonType = KitButtonType;
|
|
4700
4700
|
this.popupRef = null;
|
|
4701
|
+
this.onDocumentClick = (event) => {
|
|
4702
|
+
if (!this.popupRef) {
|
|
4703
|
+
return;
|
|
4704
|
+
}
|
|
4705
|
+
const target = event.target;
|
|
4706
|
+
if (target && !this.popupRef?.popupElement.contains(target) && !this.anchorElement?.contains(target)) {
|
|
4707
|
+
this.close();
|
|
4708
|
+
}
|
|
4709
|
+
};
|
|
4701
4710
|
}
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
return;
|
|
4705
|
-
}
|
|
4706
|
-
if (!this.popupRef?.popupElement.contains(event.target) && !this.anchorElement?.contains(event.target)) {
|
|
4707
|
-
this.close();
|
|
4708
|
-
}
|
|
4711
|
+
ngOnInit() {
|
|
4712
|
+
this.addOutsideClickListener();
|
|
4709
4713
|
}
|
|
4710
4714
|
ngOnDestroy() {
|
|
4711
4715
|
this.close();
|
|
4716
|
+
this.removeOutsideClickListener();
|
|
4712
4717
|
}
|
|
4713
4718
|
toggle(options) {
|
|
4714
4719
|
if (this.popupRef) {
|
|
@@ -4744,8 +4749,16 @@ class KitPopupComponent {
|
|
|
4744
4749
|
this.onApply.emit();
|
|
4745
4750
|
this.close();
|
|
4746
4751
|
}
|
|
4752
|
+
addOutsideClickListener() {
|
|
4753
|
+
if (this.closeOnOutsideClick()) {
|
|
4754
|
+
document.addEventListener('click', this.onDocumentClick, true);
|
|
4755
|
+
}
|
|
4756
|
+
}
|
|
4757
|
+
removeOutsideClickListener() {
|
|
4758
|
+
document.removeEventListener('click', this.onDocumentClick, true);
|
|
4759
|
+
}
|
|
4747
4760
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitPopupComponent, deps: [{ token: i1$c.PopupService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4748
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" },
|
|
4761
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, providers: [
|
|
4749
4762
|
PopupService,
|
|
4750
4763
|
{
|
|
4751
4764
|
provide: POPUP_CONTAINER,
|
|
@@ -4772,9 +4785,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
4772
4785
|
}], ctorParameters: () => [{ type: i1$c.PopupService }], propDecorators: { popupTemplate: [{
|
|
4773
4786
|
type: ViewChild,
|
|
4774
4787
|
args: ['popupTemplate']
|
|
4775
|
-
}], documentClick: [{
|
|
4776
|
-
type: HostListener,
|
|
4777
|
-
args: ['document:click', ['$event']]
|
|
4778
4788
|
}] } });
|
|
4779
4789
|
|
|
4780
4790
|
var KitDatepickerSize;
|
|
@@ -8428,22 +8438,26 @@ class KitFilterDateComponent {
|
|
|
8428
8438
|
const endDate = this.endDate();
|
|
8429
8439
|
return (!endDate || this.useLocalTimeZone()) ? endDate : convertDateToLocal(endDate);
|
|
8430
8440
|
}, ...(ngDevMode ? [{ debugName: "localEndDate" }] : []));
|
|
8431
|
-
|
|
8432
|
-
|
|
8433
|
-
|
|
8434
|
-
|
|
8435
|
-
|
|
8436
|
-
|
|
8437
|
-
!event.target
|
|
8438
|
-
|
|
8439
|
-
|
|
8440
|
-
|
|
8441
|
-
|
|
8442
|
-
}
|
|
8441
|
+
this.onDocumentClick = (event) => {
|
|
8442
|
+
const datePicker = document.querySelector('.kit-datepicker-popup');
|
|
8443
|
+
const popupElement = this.popup()?.popupHTMLElement;
|
|
8444
|
+
const isClickOutsideDatePicker = !datePicker?.contains(event.target) &&
|
|
8445
|
+
!event.target.matches('.k-link') &&
|
|
8446
|
+
!event.target?.parentElement?.parentElement?.matches('.k-calendar-nav');
|
|
8447
|
+
if (!popupElement?.contains(event.target)
|
|
8448
|
+
&& !this.anchor()?.nativeElement.contains(event.target)
|
|
8449
|
+
&& isClickOutsideDatePicker) {
|
|
8450
|
+
this.popup()?.close();
|
|
8451
|
+
}
|
|
8452
|
+
};
|
|
8443
8453
|
}
|
|
8444
8454
|
ngOnInit() {
|
|
8445
8455
|
this.initializeSelectedValues();
|
|
8446
8456
|
this.showPopupOnInit();
|
|
8457
|
+
this.addOutsideClickListener();
|
|
8458
|
+
}
|
|
8459
|
+
ngOnDestroy() {
|
|
8460
|
+
this.removeOutsideClickListener();
|
|
8447
8461
|
}
|
|
8448
8462
|
removeFilter() {
|
|
8449
8463
|
this.popup()?.close();
|
|
@@ -8514,8 +8528,14 @@ class KitFilterDateComponent {
|
|
|
8514
8528
|
requestAnimationFrame(() => this.onPopupToggle());
|
|
8515
8529
|
}
|
|
8516
8530
|
}
|
|
8531
|
+
addOutsideClickListener() {
|
|
8532
|
+
document.addEventListener('click', this.onDocumentClick, true);
|
|
8533
|
+
}
|
|
8534
|
+
removeOutsideClickListener() {
|
|
8535
|
+
document.removeEventListener('click', this.onDocumentClick, true);
|
|
8536
|
+
}
|
|
8517
8537
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8518
|
-
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" },
|
|
8538
|
+
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", "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"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8519
8539
|
}
|
|
8520
8540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterDateComponent, decorators: [{
|
|
8521
8541
|
type: Component,
|
|
@@ -8526,10 +8546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
8526
8546
|
DatePipe,
|
|
8527
8547
|
KitPopupComponent,
|
|
8528
8548
|
], 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"] }]
|
|
8529
|
-
}]
|
|
8530
|
-
type: HostListener,
|
|
8531
|
-
args: ['document:click', ['$event']]
|
|
8532
|
-
}] } });
|
|
8549
|
+
}] });
|
|
8533
8550
|
|
|
8534
8551
|
class KitFilterRadioComponent {
|
|
8535
8552
|
constructor(translateService) {
|