@indigina/ui-kit 1.1.441 → 1.1.442
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, afterNextRender, 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, QueryList, 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';
|
|
@@ -5829,17 +5829,16 @@ class KitScrollNavigationSectionComponent {
|
|
|
5829
5829
|
this.title = '';
|
|
5830
5830
|
this.propertyChanged = new EventEmitter();
|
|
5831
5831
|
this.sectionTemplate = null;
|
|
5832
|
-
this.sectionContent = null;
|
|
5833
5832
|
}
|
|
5834
5833
|
ngOnChanges() {
|
|
5835
5834
|
this.propertyChanged?.emit();
|
|
5836
5835
|
}
|
|
5837
5836
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitScrollNavigationSectionComponent, isStandalone: true, selector: "kit-scroll-navigation-section", inputs: { title: "title", id: "id", buttonState: "buttonState", buttonIcon: "buttonIcon", tooltipText: "tooltipText", badgeCount: "badgeCount" }, outputs: { propertyChanged: "propertyChanged" }, viewQueries: [{ propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }
|
|
5837
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitScrollNavigationSectionComponent, isStandalone: true, selector: "kit-scroll-navigation-section", inputs: { title: "title", id: "id", buttonState: "buttonState", buttonIcon: "buttonIcon", tooltipText: "tooltipText", badgeCount: "badgeCount" }, outputs: { propertyChanged: "propertyChanged" }, viewQueries: [{ propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sectionTemplate>\n <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5839
5838
|
}
|
|
5840
5839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationSectionComponent, decorators: [{
|
|
5841
5840
|
type: Component,
|
|
5842
|
-
args: [{ selector: 'kit-scroll-navigation-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #sectionTemplate>\n <
|
|
5841
|
+
args: [{ selector: 'kit-scroll-navigation-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #sectionTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
5843
5842
|
}], propDecorators: { title: [{
|
|
5844
5843
|
type: Input
|
|
5845
5844
|
}], id: [{
|
|
@@ -5857,9 +5856,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
5857
5856
|
}], sectionTemplate: [{
|
|
5858
5857
|
type: ViewChild,
|
|
5859
5858
|
args: ['sectionTemplate', { static: true }]
|
|
5860
|
-
}], sectionContent: [{
|
|
5861
|
-
type: ViewChild,
|
|
5862
|
-
args: ['sectionContent']
|
|
5863
5859
|
}] } });
|
|
5864
5860
|
|
|
5865
5861
|
class KitScrollNavigationComponent {
|
|
@@ -5868,9 +5864,11 @@ class KitScrollNavigationComponent {
|
|
|
5868
5864
|
}
|
|
5869
5865
|
constructor() {
|
|
5870
5866
|
this.activatedRoute = inject(ActivatedRoute);
|
|
5867
|
+
this.destroyRef = inject(DestroyRef);
|
|
5871
5868
|
this.isNavigationBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "isNavigationBtnDisabled" }] : /* istanbul ignore next */ []));
|
|
5872
5869
|
this.dropdownDefaultText = input('View More', ...(ngDevMode ? [{ debugName: "dropdownDefaultText" }] : /* istanbul ignore next */ []));
|
|
5873
5870
|
this.sections = null;
|
|
5871
|
+
this.sectionContentRefs = new QueryList();
|
|
5874
5872
|
this.content = null;
|
|
5875
5873
|
this.collapsedList = null;
|
|
5876
5874
|
this.kitButtonType = KitButtonType;
|
|
@@ -5887,8 +5885,8 @@ class KitScrollNavigationComponent {
|
|
|
5887
5885
|
effect(() => {
|
|
5888
5886
|
if (!this.isNavigationBtnDisabled() && !this.hasScrolled && this.firstRenderScrollElementId()) {
|
|
5889
5887
|
requestAnimationFrame(() => {
|
|
5890
|
-
const
|
|
5891
|
-
|
|
5888
|
+
const index = this.sections?.toArray().findIndex(s => s.id === this.firstRenderScrollElementId()) ?? -1;
|
|
5889
|
+
const section = this.sectionContentRefs.toArray()[index]?.nativeElement ?? null;
|
|
5892
5890
|
this.hasScrolled = true;
|
|
5893
5891
|
section?.scrollIntoView({
|
|
5894
5892
|
behavior: 'smooth',
|
|
@@ -5912,17 +5910,24 @@ class KitScrollNavigationComponent {
|
|
|
5912
5910
|
this.setLastSectionMinHeight();
|
|
5913
5911
|
this.updateListItems();
|
|
5914
5912
|
this.handleSectionChanges();
|
|
5913
|
+
this.sections?.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
5914
|
+
this.updateListItems();
|
|
5915
|
+
this.handleSectionChanges();
|
|
5916
|
+
});
|
|
5917
|
+
this.sectionContentRefs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
5918
|
+
this.setLastSectionMinHeight();
|
|
5919
|
+
});
|
|
5915
5920
|
}
|
|
5916
5921
|
onSectionScroll() {
|
|
5917
5922
|
const contentElement = this.content?.nativeElement;
|
|
5918
|
-
if (!contentElement || !this.
|
|
5923
|
+
if (!contentElement || !this.sectionContentRefs.length || this.disableScrollUpdates) {
|
|
5919
5924
|
return;
|
|
5920
5925
|
}
|
|
5921
5926
|
let index = 0;
|
|
5922
5927
|
const contentScrollTop = contentElement.scrollTop + (contentElement.clientHeight / 2);
|
|
5923
5928
|
const scrolledSectionIndexes = new Set();
|
|
5924
|
-
for (const
|
|
5925
|
-
const sectionElement =
|
|
5929
|
+
for (const ref of this.sectionContentRefs.toArray()) {
|
|
5930
|
+
const sectionElement = ref.nativeElement;
|
|
5926
5931
|
const sectionTop = sectionElement.offsetTop;
|
|
5927
5932
|
const sectionHeight = sectionElement.offsetHeight;
|
|
5928
5933
|
const isFullyVisibleOnScreen = sectionTop <= contentScrollTop && ((sectionTop + sectionHeight) >= contentScrollTop);
|
|
@@ -5942,8 +5947,8 @@ class KitScrollNavigationComponent {
|
|
|
5942
5947
|
this.content?.nativeElement.addEventListener('scrollend', () => {
|
|
5943
5948
|
this.disableScrollUpdates = false;
|
|
5944
5949
|
}, { once: true });
|
|
5945
|
-
const
|
|
5946
|
-
|
|
5950
|
+
const index = this.sections?.toArray().findIndex(s => s.title === selectedItem.text) ?? -1;
|
|
5951
|
+
const section = this.sectionContentRefs.toArray()[index]?.nativeElement ?? null;
|
|
5947
5952
|
section?.scrollIntoView({
|
|
5948
5953
|
behavior: 'smooth',
|
|
5949
5954
|
block: 'start',
|
|
@@ -5970,18 +5975,18 @@ class KitScrollNavigationComponent {
|
|
|
5970
5975
|
}
|
|
5971
5976
|
setLastSectionMinHeight() {
|
|
5972
5977
|
const contentHeight = this.content?.nativeElement.clientHeight;
|
|
5973
|
-
if (contentHeight && this.
|
|
5974
|
-
this.calculateLastSectionMinHeight(
|
|
5978
|
+
if (contentHeight && this.sectionContentRefs.length) {
|
|
5979
|
+
this.calculateLastSectionMinHeight(contentHeight);
|
|
5975
5980
|
}
|
|
5976
5981
|
}
|
|
5977
|
-
calculateLastSectionMinHeight(
|
|
5978
|
-
const lastSection =
|
|
5982
|
+
calculateLastSectionMinHeight(contentHeight) {
|
|
5983
|
+
const lastSection = this.sectionContentRefs.toArray().at(-1)?.nativeElement;
|
|
5979
5984
|
if (lastSection && contentHeight > lastSection.clientHeight) {
|
|
5980
5985
|
lastSection.style.minHeight = `${contentHeight}px`;
|
|
5981
5986
|
}
|
|
5982
5987
|
}
|
|
5983
5988
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 }], 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 <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"
|
|
5989
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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$6.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"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5985
5990
|
}
|
|
5986
5991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationComponent, decorators: [{
|
|
5987
5992
|
type: Component,
|
|
@@ -5992,10 +5997,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
5992
5997
|
KitTooltipDirective,
|
|
5993
5998
|
KitBadgeDirective,
|
|
5994
5999
|
NgTemplateOutlet,
|
|
5995
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"
|
|
6000
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
|
|
5996
6001
|
}], ctorParameters: () => [], propDecorators: { isNavigationBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationBtnDisabled", required: false }] }], dropdownDefaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDefaultText", required: false }] }], sections: [{
|
|
5997
6002
|
type: ContentChildren,
|
|
5998
6003
|
args: [KitScrollNavigationSectionComponent]
|
|
6004
|
+
}], sectionContentRefs: [{
|
|
6005
|
+
type: ViewChildren,
|
|
6006
|
+
args: ['sectionContent']
|
|
5999
6007
|
}], content: [{
|
|
6000
6008
|
type: ViewChild,
|
|
6001
6009
|
args: ['content', { static: true }]
|