@indigina/ui-kit 1.1.579 → 1.1.581
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.
|
@@ -3997,6 +3997,7 @@ class KitAutocompleteComponent {
|
|
|
3997
3997
|
popupClass: 'kit-autocomplete-popup',
|
|
3998
3998
|
}), /* @ts-ignore */
|
|
3999
3999
|
...(ngDevMode ? [{ debugName: "dropdownPopupSettings" }] : /* istanbul ignore next */ []));
|
|
4000
|
+
this.KitSvgIcon = KitSvgIcon;
|
|
4000
4001
|
/**
|
|
4001
4002
|
* Function that should be called every time the form control value changes
|
|
4002
4003
|
*/
|
|
@@ -4083,7 +4084,7 @@ class KitAutocompleteComponent {
|
|
|
4083
4084
|
provide: NG_VALUE_ACCESSOR,
|
|
4084
4085
|
useExisting: forwardRef(() => KitAutocompleteComponent),
|
|
4085
4086
|
multi: true,
|
|
4086
|
-
}], viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-autocomplete\"\n [class.empty]=\"!items() || !items().length\"\n [class.disabled]=\"disabled()\"\n [class.loading]=\"loaderVisible()\"\n [class.invalid]=\"invalid()\"\n [class.readonly]=\"readonly()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"combobox\"\n ></kit-form-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items()\"\n [placeholder]=\"placeholder()\"\n [filterable]=\"true\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled()\"\n [clearButton]=\"false\"\n [value]=\"selectedValue()\"\n [allowCustom]=\"allowCustom()\"\n [popupSettings]=\"dropdownPopupSettings()\"\n [suggest]=\"suggest()\"\n [readonly]=\"readonly()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onSelectionChange($event)\"\n (valueChange)=\"onValueChange($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible()) {\n <div class=\"popup-loader\">\n <div class=\"popup-loader-dots\"></div>\n </div>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"
|
|
4087
|
+
}], viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-autocomplete\"\n [class.empty]=\"!items() || !items().length\"\n [class.disabled]=\"disabled()\"\n [class.loading]=\"loaderVisible()\"\n [class.invalid]=\"invalid()\"\n [class.readonly]=\"readonly()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"combobox\"\n ></kit-form-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items()\"\n [placeholder]=\"placeholder()\"\n [filterable]=\"true\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled()\"\n [clearButton]=\"false\"\n [value]=\"selectedValue()\"\n [allowCustom]=\"allowCustom()\"\n [popupSettings]=\"dropdownPopupSettings()\"\n [suggest]=\"suggest()\"\n [readonly]=\"readonly()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onSelectionChange($event)\"\n (valueChange)=\"onValueChange($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible()) {\n <div class=\"popup-loader\">\n <div class=\"popup-loader-dots\"></div>\n </div>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"option-text\">{{ getOptionText(item) }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\"\n icon=\"search\"\n ></kit-svg-icon>\n </div>\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete:hover .k-combobox{border-color:var(--ui-kit-color-hover)}.kit-autocomplete .k-combobox{height:40px;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-autocomplete .k-combobox.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-autocomplete .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-main)}.kit-autocomplete .k-input .k-input-inner{padding:0 36px 0 12px}.kit-autocomplete .k-input-inner{color:var(--ui-kit-color-grey-10);line-height:1}.kit-autocomplete .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-autocomplete .popup-loader{display:flex;justify-content:center;align-items:center;height:100%}.kit-autocomplete .popup-loader-dots{width:13px;aspect-ratio:1;border-radius:50%;animation:dots-animation 1s infinite linear alternate}.kit-autocomplete .input-icon{position:absolute;right:0;padding:0 12px 0 8px;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12);z-index:1}.kit-autocomplete.disabled .k-combobox{opacity:1;border-color:var(--ui-kit-color-grey-11)}.kit-autocomplete.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete.disabled .input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.readonly .k-combobox{border-color:var(--ui-kit-color-grey-11)}.kit-autocomplete.readonly .k-combobox.k-focus{box-shadow:none}.kit-autocomplete.readonly .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.readonly .k-input-inner{color:var(--ui-kit-color-grey-12)}.kit-autocomplete.empty .kit-autocomplete-popup{display:none}.kit-autocomplete.loading .kit-autocomplete-popup{display:block;height:150px}.kit-autocomplete.loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.invalid .k-combobox{border-color:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .input-icon{stroke:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}@keyframes dots-animation{0%{box-shadow:20px 0 var(--ui-kit-color-main),-20px 0 var(--ui-kit-color-grey-12);background:var(--ui-kit-color-main)}33%{box-shadow:20px 0 var(--ui-kit-color-main),-20px 0 var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-12)}66%{box-shadow:20px 0 var(--ui-kit-color-grey-12),-20px 0 var(--ui-kit-color-main);background:var(--ui-kit-color-grey-12)}to{box-shadow:20px 0 var(--ui-kit-color-grey-12),-20px 0 var(--ui-kit-color-main);background:var(--ui-kit-color-main)}}.kit-autocomplete-popup.k-popup{margin-top:10px;padding:8px;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-autocomplete-popup.k-popup .k-list-item{padding:6px 12px;font-size:14px;font-weight:400;line-height:1.26;box-shadow:none;border-radius:4px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10);display:flex;align-items:center;justify-content:space-between}.kit-autocomplete-popup.k-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-autocomplete-popup.k-popup .k-list-item.k-selected{color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-autocomplete-popup.k-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-autocomplete-popup.k-popup .k-no-data{padding:6px 12px}\n"], dependencies: [{ kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i1$5.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i1$5.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$5.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$5.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4087
4088
|
}
|
|
4088
4089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitAutocompleteComponent, decorators: [{
|
|
4089
4090
|
type: Component,
|
|
@@ -4099,7 +4100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
4099
4100
|
KitFormMessageComponent,
|
|
4100
4101
|
KitSvgIconComponent,
|
|
4101
4102
|
KitFormLabelComponent,
|
|
4102
|
-
], template: "<div class=\"kit-autocomplete\"\n [class.empty]=\"!items() || !items().length\"\n [class.disabled]=\"disabled()\"\n [class.loading]=\"loaderVisible()\"\n [class.invalid]=\"invalid()\"\n [class.readonly]=\"readonly()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"combobox\"\n ></kit-form-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items()\"\n [placeholder]=\"placeholder()\"\n [filterable]=\"true\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled()\"\n [clearButton]=\"false\"\n [value]=\"selectedValue()\"\n [allowCustom]=\"allowCustom()\"\n [popupSettings]=\"dropdownPopupSettings()\"\n [suggest]=\"suggest()\"\n [readonly]=\"readonly()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onSelectionChange($event)\"\n (valueChange)=\"onValueChange($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible()) {\n <div class=\"popup-loader\">\n <div class=\"popup-loader-dots\"></div>\n </div>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"
|
|
4103
|
+
], template: "<div class=\"kit-autocomplete\"\n [class.empty]=\"!items() || !items().length\"\n [class.disabled]=\"disabled()\"\n [class.loading]=\"loaderVisible()\"\n [class.invalid]=\"invalid()\"\n [class.readonly]=\"readonly()\">\n @if (label()) {\n <kit-form-label class=\"label\"\n [text]=\"label()\"\n [for]=\"combobox\"\n ></kit-form-label>\n }\n <div class=\"autocomplete-wrap\">\n <kendo-combobox #combobox\n textField=\"text\"\n valueField=\"value\"\n kendoDropDownFilter\n [data]=\"items()\"\n [placeholder]=\"placeholder()\"\n [filterable]=\"true\"\n [valuePrimitive]=\"true\"\n [disabled]=\"disabled()\"\n [clearButton]=\"false\"\n [value]=\"selectedValue()\"\n [allowCustom]=\"allowCustom()\"\n [popupSettings]=\"dropdownPopupSettings()\"\n [suggest]=\"suggest()\"\n [readonly]=\"readonly()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (selectionChange)=\"onSelectionChange($event)\"\n (valueChange)=\"onValueChange($event)\"\n (filterChange)=\"onFilterChange($event)\">\n <ng-template kendoComboBoxHeaderTemplate>\n @if (loaderVisible()) {\n <div class=\"popup-loader\">\n <div class=\"popup-loader-dots\"></div>\n </div>\n }\n </ng-template>\n <ng-template kendoComboBoxItemTemplate\n let-item>\n <span class=\"option-text\">{{ getOptionText(item) }}</span>\n <kit-svg-icon class=\"option-icon\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-combobox>\n <kit-svg-icon class=\"input-icon\"\n icon=\"search\"\n ></kit-svg-icon>\n </div>\n @if (messageText()) {\n <kit-form-message [icon]=\"messageIcon()\"\n [message]=\"messageText()\"\n ></kit-form-message>\n }\n</div>\n", styles: [".kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete:hover .k-combobox{border-color:var(--ui-kit-color-hover)}.kit-autocomplete .k-combobox{height:40px;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-autocomplete .k-combobox.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-autocomplete .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-main)}.kit-autocomplete .k-input .k-input-inner{padding:0 36px 0 12px}.kit-autocomplete .k-input-inner{color:var(--ui-kit-color-grey-10);line-height:1}.kit-autocomplete .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-autocomplete .popup-loader{display:flex;justify-content:center;align-items:center;height:100%}.kit-autocomplete .popup-loader-dots{width:13px;aspect-ratio:1;border-radius:50%;animation:dots-animation 1s infinite linear alternate}.kit-autocomplete .input-icon{position:absolute;right:0;padding:0 12px 0 8px;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12);z-index:1}.kit-autocomplete.disabled .k-combobox{opacity:1;border-color:var(--ui-kit-color-grey-11)}.kit-autocomplete.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete.disabled .input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.readonly .k-combobox{border-color:var(--ui-kit-color-grey-11)}.kit-autocomplete.readonly .k-combobox.k-focus{box-shadow:none}.kit-autocomplete.readonly .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.readonly .k-input-inner{color:var(--ui-kit-color-grey-12)}.kit-autocomplete.empty .kit-autocomplete-popup{display:none}.kit-autocomplete.loading .kit-autocomplete-popup{display:block;height:150px}.kit-autocomplete.loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.invalid .k-combobox{border-color:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .input-icon{stroke:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .kit-form-message-text{color:var(--ui-kit-color-red-1)}@keyframes dots-animation{0%{box-shadow:20px 0 var(--ui-kit-color-main),-20px 0 var(--ui-kit-color-grey-12);background:var(--ui-kit-color-main)}33%{box-shadow:20px 0 var(--ui-kit-color-main),-20px 0 var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-12)}66%{box-shadow:20px 0 var(--ui-kit-color-grey-12),-20px 0 var(--ui-kit-color-main);background:var(--ui-kit-color-grey-12)}to{box-shadow:20px 0 var(--ui-kit-color-grey-12),-20px 0 var(--ui-kit-color-main);background:var(--ui-kit-color-main)}}.kit-autocomplete-popup.k-popup{margin-top:10px;padding:8px;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-autocomplete-popup.k-popup .k-list-item{padding:6px 12px;font-size:14px;font-weight:400;line-height:1.26;box-shadow:none;border-radius:4px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10);display:flex;align-items:center;justify-content:space-between}.kit-autocomplete-popup.k-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-autocomplete-popup.k-popup .k-list-item.k-selected{color:var(--ui-kit-color-grey-10);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-autocomplete-popup.k-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-autocomplete-popup.k-popup .k-no-data{padding:6px 12px}\n"] }]
|
|
4103
4104
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loaderVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "loaderVisible", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], closePopupIfDataNotFound: [{ type: i0.Input, args: [{ isSignal: true, alias: "closePopupIfDataNotFound", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], suggest: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggest", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], blured: [{ type: i0.Output, args: ["blured"] }], focused: [{ type: i0.Output, args: ["focused"] }], comboboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ComboBoxComponent), { isSignal: true }] }], openPopup: [{
|
|
4104
4105
|
type: HostListener,
|
|
4105
4106
|
args: ['click']
|
|
@@ -8183,24 +8184,11 @@ class KitScrollNavigationComponent {
|
|
|
8183
8184
|
if (!contentElement || !this.sectionContentRefs.length || this.disableScrollUpdates) {
|
|
8184
8185
|
return;
|
|
8185
8186
|
}
|
|
8186
|
-
|
|
8187
|
-
const
|
|
8188
|
-
|
|
8189
|
-
|
|
8190
|
-
const sectionElement = ref.nativeElement;
|
|
8191
|
-
const sectionTop = sectionElement.offsetTop;
|
|
8192
|
-
const sectionHeight = sectionElement.offsetHeight;
|
|
8193
|
-
const isFullyVisibleOnScreen = sectionTop <= contentScrollTop && ((sectionTop + sectionHeight) >= contentScrollTop);
|
|
8194
|
-
if ((sectionTop + sectionHeight < (contentElement.scrollTop + contentElement.clientHeight)) || isFullyVisibleOnScreen) {
|
|
8195
|
-
scrolledSectionIndexes.add(index);
|
|
8196
|
-
}
|
|
8197
|
-
if ((contentElement.scrollTop + contentElement.clientHeight) === contentElement.scrollHeight) {
|
|
8198
|
-
scrolledSectionIndexes.add(index);
|
|
8199
|
-
}
|
|
8200
|
-
index++;
|
|
8187
|
+
const activeSectionIndex = this.getActiveSectionIndex(contentElement);
|
|
8188
|
+
const activeItem = this.collapsedListItems()[activeSectionIndex];
|
|
8189
|
+
if (activeItem) {
|
|
8190
|
+
this.collapsedList?.setSelectedItem(activeItem);
|
|
8201
8191
|
}
|
|
8202
|
-
const activeSectionIndex = Array.from(scrolledSectionIndexes)[scrolledSectionIndexes.size - 1];
|
|
8203
|
-
this.collapsedList?.setSelectedItem(this.collapsedListItems()[activeSectionIndex]);
|
|
8204
8192
|
}
|
|
8205
8193
|
scrollToSection(selectedItem) {
|
|
8206
8194
|
this.disableScrollUpdates = true;
|
|
@@ -8216,17 +8204,15 @@ class KitScrollNavigationComponent {
|
|
|
8216
8204
|
});
|
|
8217
8205
|
}
|
|
8218
8206
|
updateListItems() {
|
|
8219
|
-
const sectionsData = this.sections?.toArray()?.map(section => {
|
|
8220
|
-
|
|
8221
|
-
|
|
8222
|
-
|
|
8223
|
-
|
|
8224
|
-
|
|
8225
|
-
|
|
8226
|
-
|
|
8227
|
-
|
|
8228
|
-
};
|
|
8229
|
-
}) ?? [];
|
|
8207
|
+
const sectionsData = this.sections?.toArray()?.map(section => ({
|
|
8208
|
+
text: section.title,
|
|
8209
|
+
value: section.title,
|
|
8210
|
+
state: section.buttonState,
|
|
8211
|
+
icon: section.buttonIcon,
|
|
8212
|
+
tooltipText: section.tooltipText,
|
|
8213
|
+
badgeCount: section.badgeCount,
|
|
8214
|
+
id: section.id,
|
|
8215
|
+
})) ?? [];
|
|
8230
8216
|
this.collapsedListItems.set(sectionsData);
|
|
8231
8217
|
this.collapsedList?.setSelectedItem(this.collapsedListItems()[0]);
|
|
8232
8218
|
}
|
|
@@ -8248,6 +8234,22 @@ class KitScrollNavigationComponent {
|
|
|
8248
8234
|
lastSection.style.minHeight = `${contentHeight}px`;
|
|
8249
8235
|
}
|
|
8250
8236
|
}
|
|
8237
|
+
getActiveSectionIndex(contentElement) {
|
|
8238
|
+
const sectionCount = this.sectionContentRefs.length;
|
|
8239
|
+
const isScrolledToBottom = (contentElement.scrollTop + contentElement.clientHeight) >= contentElement.scrollHeight;
|
|
8240
|
+
const activeSectionScrollOffset = 1;
|
|
8241
|
+
if (isScrolledToBottom) {
|
|
8242
|
+
return Math.max(sectionCount - 1, 0);
|
|
8243
|
+
}
|
|
8244
|
+
const scrollTop = Math.floor(contentElement.scrollTop) + activeSectionScrollOffset;
|
|
8245
|
+
let activeSectionIndex = 0;
|
|
8246
|
+
this.sectionContentRefs.toArray().forEach((ref, index) => {
|
|
8247
|
+
if (ref.nativeElement.offsetTop <= scrollTop) {
|
|
8248
|
+
activeSectionIndex = index;
|
|
8249
|
+
}
|
|
8250
|
+
});
|
|
8251
|
+
return activeSectionIndex;
|
|
8252
|
+
}
|
|
8251
8253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8252
8254
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }, { propertyName: "sectionContentRefs", predicate: ["sectionContent"], descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n [gap]=\"18\"\n [itemTemplate]=\"navItem\"\n [disableActions]=\"isNavigationBtnDisabled()\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n (selectItem)=\"scrollToSection($event)\" />\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of sections?.toArray(); track item) {\n <div #sectionContent\n class=\"kit-scroll-navigation-section\">\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #navItem let-item>\n <div kitBadge\n [kitBadgeVisible]=\"item.badgeCount\"\n [kitBadgeText]=\"item.badgeCount\"\n [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n <kit-button kitTooltip\n kitTooltipFilter='.nav-item'\n class=\"nav-item\"\n [active]=\"currentVisibleItem?.value === item.value\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"item.icon\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [state]=\"item.state ?? kitButtonState.DEFAULT\"\n [label]=\"item.text\"\n [title]=\"item.tooltipText\"\n [disabled]=\"isNavigationBtnDisabled()\"\n [kitTooltipVisible]=\"!!item.tooltipText\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8253
8255
|
}
|