@indigina/ui-kit 1.1.439 → 1.1.440
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1$6 from '@angular/common';
|
|
2
2
|
import { NgClass, NgTemplateOutlet, CommonModule, DatePipe, AsyncPipe, TitleCasePipe, DecimalPipe, Location } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, effect, ElementRef, NgZone, Renderer2, Directive, viewChild, model, output, forwardRef, signal, HostListener, TemplateRef, ContentChild, computed, NgModule, RendererFactory2, ViewChild, DOCUMENT, ViewContainerRef, DestroyRef, contentChild, contentChildren, ContentChildren, viewChildren, Pipe, Injector, runInInjectionContext } from '@angular/core';
|
|
4
|
+
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, effect, ElementRef, NgZone, Renderer2, Directive, viewChild, model, output, forwardRef, signal, HostListener, TemplateRef, ContentChild, computed, NgModule, RendererFactory2, ViewChild, DOCUMENT, ViewContainerRef, DestroyRef, contentChild, afterNextRender, contentChildren, ContentChildren, viewChildren, Pipe, Injector, runInInjectionContext } from '@angular/core';
|
|
5
5
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
6
6
|
import { ButtonModule, ButtonGroupModule, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
|
|
7
7
|
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
|
@@ -4420,9 +4420,22 @@ var KitMultiselectItemsDirection;
|
|
|
4420
4420
|
})(KitMultiselectItemsDirection || (KitMultiselectItemsDirection = {}));
|
|
4421
4421
|
|
|
4422
4422
|
class KitMultiselectComponent {
|
|
4423
|
+
get canAddAllAsOption() {
|
|
4424
|
+
return this.shouldAddAllAsOption() && !!this.items.length;
|
|
4425
|
+
}
|
|
4426
|
+
get isAllAsOptionAdded() {
|
|
4427
|
+
return this.items[0]?.value === this.allOption().value;
|
|
4428
|
+
}
|
|
4429
|
+
get hasSelectedAllOption() {
|
|
4430
|
+
return !!this.selectedItems?.some(item => item === this.allOption().value);
|
|
4431
|
+
}
|
|
4432
|
+
get allEnabledItems() {
|
|
4433
|
+
return this.items.filter(item => !item.disabled).map(item => item.value);
|
|
4434
|
+
}
|
|
4423
4435
|
constructor() {
|
|
4424
4436
|
this.elementRef = inject(ElementRef);
|
|
4425
4437
|
this.translateService = inject(TranslateService);
|
|
4438
|
+
this.destroyRef = inject(DestroyRef);
|
|
4426
4439
|
/**
|
|
4427
4440
|
* An items list which is going to be rendered as multiselect items
|
|
4428
4441
|
*/
|
|
@@ -4442,7 +4455,9 @@ class KitMultiselectComponent {
|
|
|
4442
4455
|
this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
4443
4456
|
this.filterable = input(true, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
|
|
4444
4457
|
this.itemsDirection = input(KitMultiselectItemsDirection.LTR, ...(ngDevMode ? [{ debugName: "itemsDirection" }] : /* istanbul ignore next */ []));
|
|
4445
|
-
this.
|
|
4458
|
+
this.autoSummaryTag = input(false, ...(ngDevMode ? [{ debugName: "autoSummaryTag" }] : /* istanbul ignore next */ []));
|
|
4459
|
+
this.autoSummaryTagContainerClass = input(null, ...(ngDevMode ? [{ debugName: "autoSummaryTagContainerClass" }] : /* istanbul ignore next */ []));
|
|
4460
|
+
this.fallbackGroupChipWidth = input(40, ...(ngDevMode ? [{ debugName: "fallbackGroupChipWidth" }] : /* istanbul ignore next */ []));
|
|
4446
4461
|
/**
|
|
4447
4462
|
* An action which is emitted when value is changed
|
|
4448
4463
|
*/
|
|
@@ -4454,6 +4469,10 @@ class KitMultiselectComponent {
|
|
|
4454
4469
|
value: 'all',
|
|
4455
4470
|
}), ...(ngDevMode ? [{ debugName: "allOption" }] : /* istanbul ignore next */ []));
|
|
4456
4471
|
this.multiSelectGroupTagTemplate = contentChild(KitMultiselectGroupTagTemplateDirective, { ...(ngDevMode ? { debugName: "multiSelectGroupTagTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
4472
|
+
this.autoSummaryTagValue = signal(999, ...(ngDevMode ? [{ debugName: "autoSummaryTagValue" }] : /* istanbul ignore next */ []));
|
|
4473
|
+
this.measuredGroupChipWidth = 0;
|
|
4474
|
+
this.isMeasuring = false;
|
|
4475
|
+
this.pendingRecalculateId = null;
|
|
4457
4476
|
this.destroy$ = new Subject();
|
|
4458
4477
|
/**
|
|
4459
4478
|
* Function that should be called every time the form control value changes
|
|
@@ -4465,18 +4484,12 @@ class KitMultiselectComponent {
|
|
|
4465
4484
|
*/
|
|
4466
4485
|
this.onTouched = () => {
|
|
4467
4486
|
};
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
}
|
|
4475
|
-
get hasSelectedAllOption() {
|
|
4476
|
-
return !!this.selectedItems?.some(item => item === this.allOption().value);
|
|
4477
|
-
}
|
|
4478
|
-
get allEnabledItems() {
|
|
4479
|
-
return this.items.filter(item => !item.disabled).map(item => item.value);
|
|
4487
|
+
afterNextRender(() => {
|
|
4488
|
+
if (this.autoSummaryTag()) {
|
|
4489
|
+
this.setupResizeObserver();
|
|
4490
|
+
this.scheduleRecalculate();
|
|
4491
|
+
}
|
|
4492
|
+
});
|
|
4480
4493
|
}
|
|
4481
4494
|
ngOnInit() {
|
|
4482
4495
|
this.elementRef.nativeElement.querySelector('.k-input-inner').readonly = true;
|
|
@@ -4499,6 +4512,9 @@ class KitMultiselectComponent {
|
|
|
4499
4512
|
];
|
|
4500
4513
|
}
|
|
4501
4514
|
}
|
|
4515
|
+
if (selectedItems && this.autoSummaryTag() && !this.isMeasuring) {
|
|
4516
|
+
this.scheduleRecalculate();
|
|
4517
|
+
}
|
|
4502
4518
|
}
|
|
4503
4519
|
ngOnDestroy() {
|
|
4504
4520
|
this.destroy$.next();
|
|
@@ -4510,6 +4526,9 @@ class KitMultiselectComponent {
|
|
|
4510
4526
|
onValueChange(value) {
|
|
4511
4527
|
this.onChange(value);
|
|
4512
4528
|
this.changed.emit(value);
|
|
4529
|
+
if (this.autoSummaryTag() && !this.isMeasuring) {
|
|
4530
|
+
this.scheduleRecalculate();
|
|
4531
|
+
}
|
|
4513
4532
|
}
|
|
4514
4533
|
writeValue(value) {
|
|
4515
4534
|
this.selectedItems = value;
|
|
@@ -4532,6 +4551,95 @@ class KitMultiselectComponent {
|
|
|
4532
4551
|
focus() {
|
|
4533
4552
|
this.multiselectComponent().focus();
|
|
4534
4553
|
}
|
|
4554
|
+
setupResizeObserver() {
|
|
4555
|
+
const containerClass = this.autoSummaryTagContainerClass();
|
|
4556
|
+
let containerEl = this.elementRef.nativeElement;
|
|
4557
|
+
if (containerClass) {
|
|
4558
|
+
let el = this.elementRef.nativeElement;
|
|
4559
|
+
while (el) {
|
|
4560
|
+
if (el.classList.contains(containerClass)) {
|
|
4561
|
+
containerEl = el;
|
|
4562
|
+
break;
|
|
4563
|
+
}
|
|
4564
|
+
el = el.parentElement;
|
|
4565
|
+
}
|
|
4566
|
+
}
|
|
4567
|
+
const observer = new ResizeObserver(() => {
|
|
4568
|
+
if (!this.isMeasuring) {
|
|
4569
|
+
this.scheduleRecalculate();
|
|
4570
|
+
}
|
|
4571
|
+
});
|
|
4572
|
+
observer.observe(containerEl);
|
|
4573
|
+
this.destroyRef.onDestroy(() => observer.disconnect());
|
|
4574
|
+
}
|
|
4575
|
+
scheduleRecalculate() {
|
|
4576
|
+
if (this.pendingRecalculateId !== null) {
|
|
4577
|
+
clearTimeout(this.pendingRecalculateId);
|
|
4578
|
+
}
|
|
4579
|
+
this.autoSummaryTagValue.set(999);
|
|
4580
|
+
this.pendingRecalculateId = setTimeout(() => {
|
|
4581
|
+
this.pendingRecalculateId = null;
|
|
4582
|
+
this.doMeasureAndCalculate();
|
|
4583
|
+
}, 0);
|
|
4584
|
+
}
|
|
4585
|
+
doMeasureAndCalculate() {
|
|
4586
|
+
if (this.measuredGroupChipWidth === 0 && (this.selectedItems?.length ?? 0) >= 2) {
|
|
4587
|
+
this.measureGroupChipWidth();
|
|
4588
|
+
}
|
|
4589
|
+
else {
|
|
4590
|
+
this.calculateSummaryTag();
|
|
4591
|
+
}
|
|
4592
|
+
}
|
|
4593
|
+
measureGroupChipWidth() {
|
|
4594
|
+
this.isMeasuring = true;
|
|
4595
|
+
this.autoSummaryTagValue.set(1);
|
|
4596
|
+
setTimeout(() => {
|
|
4597
|
+
const hostEl = this.elementRef.nativeElement;
|
|
4598
|
+
const groupChipEl = hostEl.querySelector('.k-chip:has(.group-tag)');
|
|
4599
|
+
this.measuredGroupChipWidth = groupChipEl ? groupChipEl.offsetWidth : this.fallbackGroupChipWidth();
|
|
4600
|
+
this.autoSummaryTagValue.set(999);
|
|
4601
|
+
setTimeout(() => {
|
|
4602
|
+
this.isMeasuring = false;
|
|
4603
|
+
this.calculateSummaryTag();
|
|
4604
|
+
}, 0);
|
|
4605
|
+
}, 0);
|
|
4606
|
+
}
|
|
4607
|
+
calculateSummaryTag() {
|
|
4608
|
+
const hostEl = this.elementRef.nativeElement.querySelector('.k-input-values');
|
|
4609
|
+
const hostRect = hostEl.getBoundingClientRect();
|
|
4610
|
+
if (!hostRect.width) {
|
|
4611
|
+
return;
|
|
4612
|
+
}
|
|
4613
|
+
const chips = Array.from(hostEl.querySelectorAll('.k-chip:not(:has(.group-tag))'));
|
|
4614
|
+
if (chips.length === 0) {
|
|
4615
|
+
this.autoSummaryTagValue.set(999);
|
|
4616
|
+
return;
|
|
4617
|
+
}
|
|
4618
|
+
const firstChipRect = chips[0].getBoundingClientRect();
|
|
4619
|
+
const lastChipRect = chips.at(-1)?.getBoundingClientRect();
|
|
4620
|
+
const allInSingleRow = lastChipRect ? lastChipRect.top === firstChipRect.top : false;
|
|
4621
|
+
const allFitInContainer = lastChipRect ? lastChipRect.right <= (hostRect.right - 12) : false;
|
|
4622
|
+
if (allInSingleRow && allFitInContainer) {
|
|
4623
|
+
this.autoSummaryTagValue.set(chips.length);
|
|
4624
|
+
return;
|
|
4625
|
+
}
|
|
4626
|
+
const groupChipWidth = this.measuredGroupChipWidth || this.fallbackGroupChipWidth();
|
|
4627
|
+
let fittingCount = 0;
|
|
4628
|
+
for (const chip of chips) {
|
|
4629
|
+
const chipRect = chip.getBoundingClientRect();
|
|
4630
|
+
const isInFirstRow = chipRect.top === firstChipRect.top;
|
|
4631
|
+
if (isInFirstRow && chipRect.right + groupChipWidth <= hostRect.right) {
|
|
4632
|
+
fittingCount++;
|
|
4633
|
+
}
|
|
4634
|
+
else {
|
|
4635
|
+
if (!isInFirstRow) {
|
|
4636
|
+
fittingCount--;
|
|
4637
|
+
}
|
|
4638
|
+
break;
|
|
4639
|
+
}
|
|
4640
|
+
}
|
|
4641
|
+
this.autoSummaryTagValue.set(Math.max(1, fittingCount));
|
|
4642
|
+
}
|
|
4535
4643
|
addAllAsOption() {
|
|
4536
4644
|
this.items = [
|
|
4537
4645
|
this.allOption(),
|
|
@@ -4582,11 +4690,11 @@ class KitMultiselectComponent {
|
|
|
4582
4690
|
});
|
|
4583
4691
|
}
|
|
4584
4692
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4585
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMultiselectComponent, isStandalone: true, selector: "kit-multiselect", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", 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 }, shouldAddAllAsOption: { classPropertyName: "shouldAddAllAsOption", publicName: "shouldAddAllAsOption", isSignal: true, isRequired: false, transformFunction: null }, allOptionLabel: { classPropertyName: "allOptionLabel", publicName: "allOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tagMapper: { classPropertyName: "tagMapper", publicName: "tagMapper", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, useCheckboxes: { classPropertyName: "useCheckboxes", publicName: "useCheckboxes", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, itemsDirection: { classPropertyName: "itemsDirection", publicName: "itemsDirection", isSignal: true, isRequired: false, transformFunction: null },
|
|
4693
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitMultiselectComponent, isStandalone: true, selector: "kit-multiselect", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", 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 }, shouldAddAllAsOption: { classPropertyName: "shouldAddAllAsOption", publicName: "shouldAddAllAsOption", isSignal: true, isRequired: false, transformFunction: null }, allOptionLabel: { classPropertyName: "allOptionLabel", publicName: "allOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tagMapper: { classPropertyName: "tagMapper", publicName: "tagMapper", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, useCheckboxes: { classPropertyName: "useCheckboxes", publicName: "useCheckboxes", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, itemsDirection: { classPropertyName: "itemsDirection", publicName: "itemsDirection", isSignal: true, isRequired: false, transformFunction: null }, autoSummaryTag: { classPropertyName: "autoSummaryTag", publicName: "autoSummaryTag", isSignal: true, isRequired: false, transformFunction: null }, autoSummaryTagContainerClass: { classPropertyName: "autoSummaryTagContainerClass", publicName: "autoSummaryTagContainerClass", isSignal: true, isRequired: false, transformFunction: null }, fallbackGroupChipWidth: { classPropertyName: "fallbackGroupChipWidth", publicName: "fallbackGroupChipWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [{
|
|
4586
4694
|
provide: NG_VALUE_ACCESSOR,
|
|
4587
4695
|
useExisting: forwardRef(() => KitMultiselectComponent),
|
|
4588
4696
|
multi: true,
|
|
4589
|
-
}], queries: [{ propertyName: "multiSelectGroupTagTemplate", first: true, predicate: KitMultiselectGroupTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"
|
|
4697
|
+
}], queries: [{ propertyName: "multiSelectGroupTagTemplate", first: true, predicate: KitMultiselectGroupTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i1$4.SummaryTagDirective, selector: "[kendoMultiSelectSummaryTag]", inputs: ["kendoMultiSelectSummaryTag"] }, { kind: "directive", type: i1$4.GroupTagTemplateDirective, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]" }, { kind: "directive", type: i1$4.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4590
4698
|
}
|
|
4591
4699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMultiselectComponent, decorators: [{
|
|
4592
4700
|
type: Component,
|
|
@@ -4602,8 +4710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
4602
4710
|
KitFormMessageComponent,
|
|
4603
4711
|
KitFormLabelComponent,
|
|
4604
4712
|
NgClass,
|
|
4605
|
-
], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"
|
|
4606
|
-
}], propDecorators: { items: [{
|
|
4713
|
+
], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\"\n [class.invalid]=\"invalid()\">\n @if (label) {\n <kit-form-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-form-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"[size(), itemsDirection()]\"\n [data]=\"items\"\n [disabled]=\"disabled\"\n [autoClose]=\"autoClose\"\n [placeholder]=\"placeholder\"\n [valuePrimitive]=\"true\"\n [itemDisabled]=\"onItemDisabled()\"\n [popupSettings]=\"buildPopupSettings()\"\n [tagMapper]=\"tagMapper()\"\n [kendoMultiSelectSummaryTag]=\"autoSummaryTagValue()\"\n [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [allowCustom]=\"allowCustom()\"\n [filterable]=\"filterable()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate\n let-dataItem>\n <span class=\"chip-text\"\n [class.all-option]=\"dataItem.value === allOption().value\"\n [ngClass]=\"dataItem?.optionClass\">\n {{ dataItem?.text }}\n </span>\n <kit-svg-icon class=\"chip-icon\"\n [icon]=\"KitSvgIcon.CROSS\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectItemTemplate\n let-dataItem>\n <span class=\"option-text\"\n [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>\n <ng-container *ngTemplateOutlet=\"multiSelectGroupTagTemplate(); context: { dataItems }\"/>\n </ng-template>\n </kendo-multiselect>\n\n @if (messageText) {\n <kit-form-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-chip:last-child:has(.k-chip-content .group-tag) .k-chip-actions{display:none}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"] }]
|
|
4714
|
+
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
4607
4715
|
type: Input
|
|
4608
4716
|
}], selectedItems: [{
|
|
4609
4717
|
type: Input
|
|
@@ -4619,7 +4727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
4619
4727
|
type: Input
|
|
4620
4728
|
}], messageText: [{
|
|
4621
4729
|
type: Input
|
|
4622
|
-
}], shouldAddAllAsOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldAddAllAsOption", required: false }] }], allOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allOptionLabel", required: false }] }], tagMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagMapper", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], useCheckboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCheckboxes", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], listHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "listHeight", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], itemsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsDirection", required: false }] }],
|
|
4730
|
+
}], shouldAddAllAsOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldAddAllAsOption", required: false }] }], allOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allOptionLabel", required: false }] }], tagMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagMapper", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], useCheckboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCheckboxes", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], listHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "listHeight", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], itemsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsDirection", required: false }] }], autoSummaryTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSummaryTag", required: false }] }], autoSummaryTagContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSummaryTagContainerClass", required: false }] }], fallbackGroupChipWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackGroupChipWidth", required: false }] }], changed: [{
|
|
4623
4731
|
type: Output
|
|
4624
4732
|
}], multiselectComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MultiSelectComponent), { isSignal: true }] }], multiSelectGroupTagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitMultiselectGroupTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
4625
4733
|
|