@indigina/ui-kit 1.1.414 → 1.1.416
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.
|
@@ -833,6 +833,7 @@ var KitFormErrorCode;
|
|
|
833
833
|
KitFormErrorCode["Required"] = "required";
|
|
834
834
|
KitFormErrorCode["Email"] = "email";
|
|
835
835
|
KitFormErrorCode["MaxLength"] = "maxlength";
|
|
836
|
+
KitFormErrorCode["Duplicate"] = "duplicate";
|
|
836
837
|
})(KitFormErrorCode || (KitFormErrorCode = {}));
|
|
837
838
|
|
|
838
839
|
class KitFormErrors {
|
|
@@ -844,6 +845,7 @@ class KitFormErrors {
|
|
|
844
845
|
[KitFormErrorCode.MaxLength]: (errors) => this.translateService.instant('kit.formControlError.invalidLength', {
|
|
845
846
|
requiredLength: errors.requiredLength,
|
|
846
847
|
}),
|
|
848
|
+
[KitFormErrorCode.Duplicate]: () => this.translateService.instant('kit.formControlError.duplicate'),
|
|
847
849
|
};
|
|
848
850
|
}
|
|
849
851
|
getErrors(control) {
|
|
@@ -884,6 +886,8 @@ class KitTextboxActionsComponent {
|
|
|
884
886
|
this.validationErrors = signal([], ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
|
|
885
887
|
this.documentClickListener = null;
|
|
886
888
|
this.selectListener = null;
|
|
889
|
+
this.onChange = (_value) => { };
|
|
890
|
+
this.onTouched = () => { };
|
|
887
891
|
effect(() => {
|
|
888
892
|
const validators = this.validators();
|
|
889
893
|
this.formControl.setValidators(validators);
|
|
@@ -904,9 +908,6 @@ class KitTextboxActionsComponent {
|
|
|
904
908
|
this.removeSelectListener();
|
|
905
909
|
}
|
|
906
910
|
});
|
|
907
|
-
this.formControl.valueChanges.subscribe(() => {
|
|
908
|
-
this.updateValidationErrors();
|
|
909
|
-
});
|
|
910
911
|
}
|
|
911
912
|
ngOnInit() {
|
|
912
913
|
this.formControl.setValue(this.defaultValue(), { emitEvent: false });
|
|
@@ -916,11 +917,13 @@ class KitTextboxActionsComponent {
|
|
|
916
917
|
this.removeSelectListener();
|
|
917
918
|
}
|
|
918
919
|
updateValidationErrors() {
|
|
919
|
-
this.
|
|
920
|
+
const valueUnchanged = this.formControl.value === this.defaultValue();
|
|
921
|
+
this.validationErrors.set(valueUnchanged ? [] : this.kitFormErrors.getErrors(this.formControl));
|
|
920
922
|
}
|
|
921
923
|
onTextboxChange(value) {
|
|
922
924
|
this.formControl.setValue(value.trim());
|
|
923
925
|
this.formControl.markAsTouched();
|
|
926
|
+
this.formControl.markAsDirty();
|
|
924
927
|
this.updateValidationErrors();
|
|
925
928
|
}
|
|
926
929
|
revertChanges() {
|
|
@@ -931,14 +934,30 @@ class KitTextboxActionsComponent {
|
|
|
931
934
|
this.validationErrors.set([]);
|
|
932
935
|
this.canceled.emit();
|
|
933
936
|
}
|
|
937
|
+
isSaveDisabled() {
|
|
938
|
+
const hasErrors = this.formControl.invalid;
|
|
939
|
+
const valueUnchanged = this.formControl.value === this.defaultValue();
|
|
940
|
+
const isEmpty = !this.formControl.value?.trim();
|
|
941
|
+
return hasErrors || valueUnchanged || isEmpty;
|
|
942
|
+
}
|
|
934
943
|
save() {
|
|
935
|
-
this.
|
|
936
|
-
|
|
937
|
-
if (this.formControl.valid && this.formControl.value !== this.defaultValue()) {
|
|
938
|
-
this.isTextboxFocused.set(false);
|
|
939
|
-
this.defaultValue.set(this.formControl.value);
|
|
940
|
-
this.saved.emit(this.formControl.value);
|
|
944
|
+
if (this.isSaveDisabled()) {
|
|
945
|
+
return;
|
|
941
946
|
}
|
|
947
|
+
this.isTextboxFocused.set(false);
|
|
948
|
+
this.defaultValue.set(this.formControl.value);
|
|
949
|
+
this.onChange(this.formControl.value);
|
|
950
|
+
this.onTouched();
|
|
951
|
+
this.saved.emit(this.formControl.value);
|
|
952
|
+
}
|
|
953
|
+
writeValue(value) {
|
|
954
|
+
this.defaultValue.set(value);
|
|
955
|
+
}
|
|
956
|
+
registerOnChange(fn) {
|
|
957
|
+
this.onChange = fn;
|
|
958
|
+
}
|
|
959
|
+
registerOnTouched(fn) {
|
|
960
|
+
this.onTouched = fn;
|
|
942
961
|
}
|
|
943
962
|
addDocumentClickListener() {
|
|
944
963
|
if (this.documentClickListener) {
|
|
@@ -1003,7 +1022,12 @@ class KitTextboxActionsComponent {
|
|
|
1003
1022
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KitTextboxActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1004
1023
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: KitTextboxActionsComponent, isStandalone: true, selector: "kit-textbox-actions", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, clearOnFocus: { classPropertyName: "clearOnFocus", publicName: "clearOnFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultValue: "defaultValueChange", saved: "saved", canceled: "canceled" }, providers: [
|
|
1005
1024
|
KitFormErrors,
|
|
1006
|
-
|
|
1025
|
+
{
|
|
1026
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1027
|
+
useExisting: forwardRef(() => KitTextboxActionsComponent),
|
|
1028
|
+
multi: true,
|
|
1029
|
+
},
|
|
1030
|
+
], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <kit-input-label class=\"label\"\n [text]=\"label()\"\n [for]=\"$any(textbox)\"/>\n}\n<div class=\"kit-textbox-wrapper\">\n <kit-textbox #textbox\n class=\"textbox\"\n maxLength=\"250\"\n [disabled]=\"disabled()\"\n [defaultValue]=\"defaultValue()\"\n [placeholder]=\"placeholder()\"\n [showStateIcon]=\"false\"\n [state]=\"validationErrors().length ? kitTextboxState.ERROR : kitTextboxState.DEFAULT\"\n [messageText]=\"validationErrors().join('. ')\"\n (changed)=\"onTextboxChange($event)\" />\n @if (isTextboxFocused() && showActions()) {\n <div class=\"kit-textbox-actions\">\n <kit-button [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"isSaveDisabled()\"\n (clicked)=\"save()\"/>\n <kit-button [icon]=\"kitSvgIcon.CROSS\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"revertChanges()\"/>\n </div>\n }\n</div>\n", styles: [".label{display:block;margin-bottom:4px}.kit-textbox-wrapper{width:100%;display:flex;gap:10px}.kit-textbox-wrapper .textbox{width:100%}.kit-textbox-actions{display:flex;align-items:start;gap:10px}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1007
1031
|
}
|
|
1008
1032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KitTextboxActionsComponent, decorators: [{
|
|
1009
1033
|
type: Component,
|
|
@@ -1015,7 +1039,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1015
1039
|
KitInputLabelComponent,
|
|
1016
1040
|
], providers: [
|
|
1017
1041
|
KitFormErrors,
|
|
1018
|
-
|
|
1042
|
+
{
|
|
1043
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1044
|
+
useExisting: forwardRef(() => KitTextboxActionsComponent),
|
|
1045
|
+
multi: true,
|
|
1046
|
+
},
|
|
1047
|
+
], template: "@if (label()) {\n <kit-input-label class=\"label\"\n [text]=\"label()\"\n [for]=\"$any(textbox)\"/>\n}\n<div class=\"kit-textbox-wrapper\">\n <kit-textbox #textbox\n class=\"textbox\"\n maxLength=\"250\"\n [disabled]=\"disabled()\"\n [defaultValue]=\"defaultValue()\"\n [placeholder]=\"placeholder()\"\n [showStateIcon]=\"false\"\n [state]=\"validationErrors().length ? kitTextboxState.ERROR : kitTextboxState.DEFAULT\"\n [messageText]=\"validationErrors().join('. ')\"\n (changed)=\"onTextboxChange($event)\" />\n @if (isTextboxFocused() && showActions()) {\n <div class=\"kit-textbox-actions\">\n <kit-button [icon]=\"kitSvgIcon.CHECK\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [type]=\"kitButtonType.GHOST\"\n [disabled]=\"isSaveDisabled()\"\n (clicked)=\"save()\"/>\n <kit-button [icon]=\"kitSvgIcon.CROSS\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"revertChanges()\"/>\n </div>\n }\n</div>\n", styles: [".label{display:block;margin-bottom:4px}.kit-textbox-wrapper{width:100%;display:flex;gap:10px}.kit-textbox-wrapper .textbox{width:100%}.kit-textbox-actions{display:flex;align-items:start;gap:10px}\n"] }]
|
|
1019
1048
|
}], ctorParameters: () => [], propDecorators: { defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }, { type: i0.Output, args: ["defaultValueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], clearOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnFocus", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], kitTextboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }] } });
|
|
1020
1049
|
|
|
1021
1050
|
var KitNumericTextboxState;
|
|
@@ -4395,7 +4424,7 @@ class KitMultiselectComponent {
|
|
|
4395
4424
|
provide: NG_VALUE_ACCESSOR,
|
|
4396
4425
|
useExisting: forwardRef(() => KitMultiselectComponent),
|
|
4397
4426
|
multi: true,
|
|
4398
|
-
}], viewQueries: [{ propertyName: "multiselect", 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 @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-input-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n [ngClass]=\"size()\"\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 [
|
|
4427
|
+
}], viewQueries: [{ propertyName: "multiselect", 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 @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-input-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"size()\"\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 [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate 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 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 </kendo-multiselect>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-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-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-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: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;padding:4px;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-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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$3.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$3.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$3.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4399
4428
|
}
|
|
4400
4429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KitMultiselectComponent, decorators: [{
|
|
4401
4430
|
type: Component,
|
|
@@ -4412,7 +4441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
4412
4441
|
KitInputMessageComponent,
|
|
4413
4442
|
KitInputLabelComponent,
|
|
4414
4443
|
NgClass,
|
|
4415
|
-
], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-input-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n [ngClass]=\"size()\"\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 [
|
|
4444
|
+
], template: "<div class=\"kit-multiselect\"\n [class.disabled]=\"disabled\"\n [class.all-option-selected]=\"hasSelectedAllOption\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n [for]=\"multiselect\"\n ></kit-input-label>\n }\n <kendo-multiselect #multiselect\n valueField=\"value\"\n textField=\"text\"\n kendoDropDownFilter\n [ngClass]=\"size()\"\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 [checkboxes]=\"useCheckboxes()\"\n [listHeight]=\"listHeight()\"\n [(ngModel)]=\"selectedItems\">\n <ng-template kendoMultiSelectTagTemplate 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 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 </kendo-multiselect>\n\n @if (messageText) {\n <kit-input-message [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-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-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-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: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;padding:4px;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-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"] }]
|
|
4416
4445
|
}], propDecorators: { items: [{
|
|
4417
4446
|
type: Input
|
|
4418
4447
|
}], selectedItems: [{
|
|
@@ -6083,7 +6112,7 @@ class KitDataFieldComponent {
|
|
|
6083
6112
|
this.kitTooltipPosition = KitTooltipPosition;
|
|
6084
6113
|
}
|
|
6085
6114
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KitDataFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: KitDataFieldComponent, isStandalone: true, selector: "kit-data-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-data-field\"\n [ngClass]=\"state()\">\n <div class=\"kit-data-field-label\">\n {{ label() }}\n </div>\n <div class=\"kit-data-field-value\">\n <div class=\"kit-data-field-text\">\n {{ value() || defaultValue }}\n </div>\n @if (icon()) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".kit-data-field-icon\"\n class=\"kit-data-field-icon\"\n [kitTooltipVisible]=\"!!tooltipText()\"\n [class.has-tooltip]=\"!!tooltipText()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [icon]=\"icon()\"\n [title]=\"tooltipText()\"\n [ngClass]=\"iconType() ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </div>\n</div>\n", styles: [".kit-data-field{display:flex;flex-direction:column;gap:2px}.kit-data-field.default .kit-data-field-label{color:var(--ui-kit-color-main)}.kit-data-field.default .kit-data-field-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-data-field.default .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-data-field.warning .kit-data-field-label{color:var(--ui-kit-color-orange)}.kit-data-field.warning .kit-data-field-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-data-field.warning .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-data-field-label{font-size:14px;font-weight:500;line-height:20px}.kit-data-field-value{display:flex;align-items:center;gap:15px}.kit-data-field-text{color:var(--ui-kit-color-grey-14);font-size:24px;font-weight:400;letter-spacing:-1.2px;line-height:30px}.kit-data-field-icon{width:20px;height:20px}.kit-data-field-icon.has-tooltip{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: KitDataFieldComponent, isStandalone: true, selector: "kit-data-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-data-field\"\n [ngClass]=\"state()\">\n <div class=\"kit-data-field-label\">\n {{ label() }}\n </div>\n <div class=\"kit-data-field-value\">\n <div class=\"kit-data-field-text\">\n {{ value() || defaultValue }}\n </div>\n @if (icon()) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".kit-data-field-icon\"\n class=\"kit-data-field-icon\"\n [kitTooltipVisible]=\"!!tooltipText()\"\n [class.has-tooltip]=\"!!tooltipText()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [icon]=\"icon()\"\n [title]=\"tooltipText()\"\n [ngClass]=\"iconType() ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </div>\n</div>\n", styles: [".kit-data-field{display:flex;flex-direction:column;gap:2px}.kit-data-field.default .kit-data-field-label{color:var(--ui-kit-color-main)}.kit-data-field.default .kit-data-field-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-data-field.default .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-data-field.warning .kit-data-field-label{color:var(--ui-kit-color-orange)}.kit-data-field.warning .kit-data-field-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-data-field.warning .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-data-field-label{font-size:14px;font-weight:500;line-height:20px}.kit-data-field-value{display:flex;align-items:center;gap:15px}.kit-data-field-text{padding-right:1px;color:var(--ui-kit-color-grey-14);font-size:24px;font-weight:400;letter-spacing:-1.2px;line-height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kit-data-field-icon{flex-shrink:0;width:20px;height:20px}.kit-data-field-icon.has-tooltip{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6087
6116
|
}
|
|
6088
6117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KitDataFieldComponent, decorators: [{
|
|
6089
6118
|
type: Component,
|
|
@@ -6091,7 +6120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6091
6120
|
NgClass,
|
|
6092
6121
|
KitSvgIconComponent,
|
|
6093
6122
|
KitTooltipDirective,
|
|
6094
|
-
], template: "<div class=\"kit-data-field\"\n [ngClass]=\"state()\">\n <div class=\"kit-data-field-label\">\n {{ label() }}\n </div>\n <div class=\"kit-data-field-value\">\n <div class=\"kit-data-field-text\">\n {{ value() || defaultValue }}\n </div>\n @if (icon()) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".kit-data-field-icon\"\n class=\"kit-data-field-icon\"\n [kitTooltipVisible]=\"!!tooltipText()\"\n [class.has-tooltip]=\"!!tooltipText()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [icon]=\"icon()\"\n [title]=\"tooltipText()\"\n [ngClass]=\"iconType() ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </div>\n</div>\n", styles: [".kit-data-field{display:flex;flex-direction:column;gap:2px}.kit-data-field.default .kit-data-field-label{color:var(--ui-kit-color-main)}.kit-data-field.default .kit-data-field-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-data-field.default .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-data-field.warning .kit-data-field-label{color:var(--ui-kit-color-orange)}.kit-data-field.warning .kit-data-field-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-data-field.warning .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-data-field-label{font-size:14px;font-weight:500;line-height:20px}.kit-data-field-value{display:flex;align-items:center;gap:15px}.kit-data-field-text{color:var(--ui-kit-color-grey-14);font-size:24px;font-weight:400;letter-spacing:-1.2px;line-height:30px}.kit-data-field-icon{width:20px;height:20px}.kit-data-field-icon.has-tooltip{cursor:pointer}\n"] }]
|
|
6123
|
+
], template: "<div class=\"kit-data-field\"\n [ngClass]=\"state()\">\n <div class=\"kit-data-field-label\">\n {{ label() }}\n </div>\n <div class=\"kit-data-field-value\">\n <div class=\"kit-data-field-text\">\n {{ value() || defaultValue }}\n </div>\n @if (icon()) {\n <kit-svg-icon kitTooltip\n kitTooltipFilter=\".kit-data-field-icon\"\n class=\"kit-data-field-icon\"\n [kitTooltipVisible]=\"!!tooltipText()\"\n [class.has-tooltip]=\"!!tooltipText()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [icon]=\"icon()\"\n [title]=\"tooltipText()\"\n [ngClass]=\"iconType() ?? kitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </div>\n</div>\n", styles: [".kit-data-field{display:flex;flex-direction:column;gap:2px}.kit-data-field.default .kit-data-field-label{color:var(--ui-kit-color-main)}.kit-data-field.default .kit-data-field-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-data-field.default .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-data-field.warning .kit-data-field-label{color:var(--ui-kit-color-orange)}.kit-data-field.warning .kit-data-field-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-data-field.warning .kit-data-field-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-data-field-label{font-size:14px;font-weight:500;line-height:20px}.kit-data-field-value{display:flex;align-items:center;gap:15px}.kit-data-field-text{padding-right:1px;color:var(--ui-kit-color-grey-14);font-size:24px;font-weight:400;letter-spacing:-1.2px;line-height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kit-data-field-icon{flex-shrink:0;width:20px;height:20px}.kit-data-field-icon.has-tooltip{cursor:pointer}\n"] }]
|
|
6095
6124
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }] } });
|
|
6096
6125
|
|
|
6097
6126
|
class KitSearchBarComponent {
|
|
@@ -6935,6 +6964,7 @@ const kitTranslations = {
|
|
|
6935
6964
|
required: 'Required',
|
|
6936
6965
|
invalidLength: 'The value should be less than {{ requiredLength }} characters',
|
|
6937
6966
|
invalidEmailFormat: 'Invalid email',
|
|
6967
|
+
duplicate: 'Duplicate value',
|
|
6938
6968
|
},
|
|
6939
6969
|
liveUpdates: {
|
|
6940
6970
|
pause: 'Pause Live Feed',
|