@indigina/ui-kit 1.1.189 → 1.1.190
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,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, viewChild, HostListener, signal, TemplateRef, ViewChild, ContentChild, Injectable, output, Host, Self, Inject, model, computed, contentChildren, ContentChildren, viewChildren,
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, viewChild, HostListener, signal, TemplateRef, ViewChild, ContentChild, Injectable, output, Host, Self, Inject, model, computed, contentChildren, ContentChildren, viewChildren, InjectionToken, ViewContainerRef, contentChild, Optional } from '@angular/core';
|
|
3
3
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
4
4
|
import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -23,7 +23,7 @@ import * as i1$6 from 'ngx-toastr';
|
|
|
23
23
|
import { DefaultGlobalConfig, TOAST_CONFIG, ToastrModule } from 'ngx-toastr';
|
|
24
24
|
import * as i1$7 from '@angular/router';
|
|
25
25
|
import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
|
|
26
|
-
import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil,
|
|
26
|
+
import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, tap, map, debounceTime, distinctUntilChanged, take, switchMap, of, catchError } from 'rxjs';
|
|
27
27
|
import { v4 } from 'uuid';
|
|
28
28
|
import * as i1$8 from '@progress/kendo-angular-dialog';
|
|
29
29
|
import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog';
|
|
@@ -6535,6 +6535,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6535
6535
|
type: Input
|
|
6536
6536
|
}] } });
|
|
6537
6537
|
|
|
6538
|
+
class FetchUserPermissions {
|
|
6539
|
+
static { this.type = '[User] FetchPermissions'; }
|
|
6540
|
+
}
|
|
6541
|
+
|
|
6542
|
+
const KIT_BASE_PATH = new InjectionToken('kitBasePath');
|
|
6543
|
+
|
|
6544
|
+
class KitPermissionsApiService {
|
|
6545
|
+
constructor(httpClient, basePath) {
|
|
6546
|
+
this.httpClient = httpClient;
|
|
6547
|
+
this.basePath = basePath;
|
|
6548
|
+
}
|
|
6549
|
+
getUserPermissions() {
|
|
6550
|
+
const url = `${this.basePath}/user/permissions`;
|
|
6551
|
+
return this.httpClient.get(url);
|
|
6552
|
+
}
|
|
6553
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6554
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, providedIn: 'root' }); }
|
|
6555
|
+
}
|
|
6556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, decorators: [{
|
|
6557
|
+
type: Injectable,
|
|
6558
|
+
args: [{
|
|
6559
|
+
providedIn: 'root',
|
|
6560
|
+
}]
|
|
6561
|
+
}], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
|
|
6562
|
+
type: Inject,
|
|
6563
|
+
args: [KIT_BASE_PATH]
|
|
6564
|
+
}] }] });
|
|
6565
|
+
|
|
6566
|
+
const KIT_USER_PERMISSIONS_STATE_TOKEN = new StateToken('userPermissions');
|
|
6567
|
+
let KitUserPermissionsState = class KitUserPermissionsState {
|
|
6568
|
+
constructor(kitPermissionsApiService) {
|
|
6569
|
+
this.kitPermissionsApiService = kitPermissionsApiService;
|
|
6570
|
+
}
|
|
6571
|
+
fetchUserPermissions(ctx) {
|
|
6572
|
+
return this.kitPermissionsApiService.getUserPermissions().pipe(tap(userPermissions => ctx.setState(userPermissions)));
|
|
6573
|
+
}
|
|
6574
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, deps: [{ token: KitPermissionsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6575
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState }); }
|
|
6576
|
+
};
|
|
6577
|
+
__decorate([
|
|
6578
|
+
Action(FetchUserPermissions)
|
|
6579
|
+
], KitUserPermissionsState.prototype, "fetchUserPermissions", null);
|
|
6580
|
+
KitUserPermissionsState = __decorate([
|
|
6581
|
+
State({
|
|
6582
|
+
name: KIT_USER_PERMISSIONS_STATE_TOKEN,
|
|
6583
|
+
})
|
|
6584
|
+
], KitUserPermissionsState);
|
|
6585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, decorators: [{
|
|
6586
|
+
type: Injectable
|
|
6587
|
+
}], ctorParameters: () => [{ type: KitPermissionsApiService }], propDecorators: { fetchUserPermissions: [] } });
|
|
6588
|
+
|
|
6538
6589
|
class KitGlobalSearchComponent {
|
|
6539
6590
|
documentClick(event) {
|
|
6540
6591
|
if (!this.popup()?.isPopupOpen) {
|
|
@@ -6545,8 +6596,9 @@ class KitGlobalSearchComponent {
|
|
|
6545
6596
|
this.clearSearch();
|
|
6546
6597
|
}
|
|
6547
6598
|
}
|
|
6548
|
-
constructor(router) {
|
|
6599
|
+
constructor(router, store) {
|
|
6549
6600
|
this.router = router;
|
|
6601
|
+
this.store = store;
|
|
6550
6602
|
this.searchFn = input.required();
|
|
6551
6603
|
this.displayedLineItemsNumber = input(3);
|
|
6552
6604
|
this.prompts = input.required();
|
|
@@ -6563,8 +6615,9 @@ class KitGlobalSearchComponent {
|
|
|
6563
6615
|
this.dateFormat = KIT_DATE_FORMAT;
|
|
6564
6616
|
this.popupClass = 'kit-global-search-popup';
|
|
6565
6617
|
this.searchResults = signal([]);
|
|
6566
|
-
this.
|
|
6618
|
+
this.searchValue = '';
|
|
6567
6619
|
this.showPropmts = signal(true);
|
|
6620
|
+
this.userPermissions$ = this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(map(data => data.permissions));
|
|
6568
6621
|
}
|
|
6569
6622
|
ngOnInit() {
|
|
6570
6623
|
this.textbox().valueChange.pipe(debounceTime(500), distinctUntilChanged(), filter((val) => val.length > 2)).subscribe(searchText => {
|
|
@@ -6578,7 +6631,7 @@ class KitGlobalSearchComponent {
|
|
|
6578
6631
|
return !!this.popup()?.isPopupOpen;
|
|
6579
6632
|
}
|
|
6580
6633
|
clearSearch() {
|
|
6581
|
-
this.
|
|
6634
|
+
this.searchValue = '';
|
|
6582
6635
|
this.textbox().valueChange.emit('');
|
|
6583
6636
|
this.textbox().clearValue();
|
|
6584
6637
|
this.searchResults.set([]);
|
|
@@ -6601,16 +6654,20 @@ class KitGlobalSearchComponent {
|
|
|
6601
6654
|
if (!link) {
|
|
6602
6655
|
return;
|
|
6603
6656
|
}
|
|
6604
|
-
this.router.navigate(link
|
|
6657
|
+
this.router.navigate(link, {
|
|
6658
|
+
queryParams: {
|
|
6659
|
+
search: this.searchValue,
|
|
6660
|
+
},
|
|
6661
|
+
queryParamsHandling: 'replace',
|
|
6662
|
+
});
|
|
6605
6663
|
this.clearSearch();
|
|
6606
6664
|
}
|
|
6607
6665
|
onSelectPrompt(prompt) {
|
|
6608
|
-
prompt.
|
|
6609
|
-
|
|
6610
|
-
});
|
|
6666
|
+
this.router.navigate(prompt.link);
|
|
6667
|
+
this.popup()?.close();
|
|
6611
6668
|
}
|
|
6612
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGlobalSearchComponent, deps: [{ token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6613
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null }, prompts: { classPropertyName: "prompts", publicName: "prompts", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n class=\"global-search\">\n <kendo-textbox #textbox\n class=\"textbox\"\n [class.expanded]=\"isPopupOpen\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [size]=\"'none'\"\n [(ngModel)]=\"value\"\n (click)=\"openPopup()\">\n <ng-template kendoTextBoxPrefixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\"/>\n </ng-template>\n <ng-template kendoTextBoxSuffixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\" \n (click)=\"clearSearch()\"/>\n </ng-template>\n </kendo-textbox>\n\n <kit-popup #popup\n [popupClass]=\"popupClass\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\" />\n\n <ng-template #content>\n <div class=\"popup-content\">\n <div class=\"search-results\">\n @if (searchResults().length) {\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <p class=\"header\"\n [class.empty]=\"!category.total\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </p>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track $index) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.link\"\n (click)=\"navigate(lineItem.link)\">\n <div class=\"title\">\n <kit-truncate-text>{{ lineItem.title }}</kit-truncate-text>\n </div>\n <div class=\"subtitle\">\n <kit-truncate-text>{{ lineItem.subtitle }}</kit-truncate-text>\n </div>\n @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n <kit-route-path class=\"route\"\n [containerMode]=\"lineItem.routePath?.containerMode\"\n [destinationPort]=\"lineItem.routePath?.to\"\n [originPort]=\"lineItem.routePath?.from\"\n [type]=\"lineItem.routePath?.type\"/>\n }\n @if (lineItem.dates?.firstDate.value) {\n <div class=\"dates first-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n @if (lineItem.dates?.secondDate.value) {\n <div class=\"dates second-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n </div>\n }\n \n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.categoryLink)\"/>\n }\n </div>\n }\n }\n } @else if (showPropmts()) {\n <div class=\"prompts\">\n @for (prompt of prompts(); track prompt) {\n <kit-pill [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\" \n (clicked)=\"onSelectPrompt(prompt)\">\n {{ prompt.label }}\n </kit-pill>\n }\n </div>\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\"/>\n }\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [":host{position:relative}:host .global-search{max-width:360px}:host .global-search:has(.textbox.expanded){max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep:has(.textbox.k-focus) .kit-global-search-popup{display:inherit}:host ::ng-deep .k-animation-container{width:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{display:grid;grid-template-columns:minmax(50px,190px) minmax(50px,190px) minmax(200px,300px) minmax(65px,130px) minmax(65px,130px);justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .title,:host ::ng-deep .search-results .category .line-item .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .dates{display:flex;align-items:center;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .dates .date{font-size:14px;line-height:20px;font-weight:500}:host ::ng-deep .search-results .category .line-item .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .prompts{display:flex;gap:10px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6669
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGlobalSearchComponent, deps: [{ token: i1$7.Router }, { token: i1$d.Store }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null }, prompts: { classPropertyName: "prompts", publicName: "prompts", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n class=\"global-search\">\n <kendo-textbox #textbox\n class=\"textbox\"\n [class.expanded]=\"isPopupOpen\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [size]=\"'none'\"\n [(ngModel)]=\"searchValue\"\n (click)=\"openPopup()\">\n <ng-template kendoTextBoxPrefixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\"/>\n </ng-template>\n <ng-template kendoTextBoxSuffixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\" \n (click)=\"clearSearch()\"/>\n </ng-template>\n </kendo-textbox>\n\n <kit-popup #popup\n [popupClass]=\"popupClass\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\" />\n\n <ng-template #content>\n @if (userPermissions$ | async; as userPermissions) {\n <div class=\"popup-content\">\n <div class=\"search-results\">\n @if (searchResults().length) {\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <p class=\"header\"\n [class.empty]=\"!category.total\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </p>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track $index) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.link\"\n (click)=\"navigate(lineItem.link)\">\n <div class=\"title\">\n <kit-truncate-text>{{ lineItem.title }}</kit-truncate-text>\n </div>\n <div class=\"subtitle\">\n <kit-truncate-text>{{ lineItem.subtitle }}</kit-truncate-text>\n </div>\n @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n <kit-route-path class=\"route\"\n [containerMode]=\"lineItem.routePath?.containerMode\"\n [destinationPort]=\"lineItem.routePath?.to\"\n [originPort]=\"lineItem.routePath?.from\"\n [type]=\"lineItem.routePath?.type\"/>\n }\n @if (lineItem.dates?.firstDate.value) {\n <div class=\"dates first-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n @if (lineItem.dates?.secondDate.value) {\n <div class=\"dates second-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n </div>\n }\n \n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.categoryLink)\"/>\n }\n </div>\n }\n }\n } @else if (showPropmts()) {\n <div class=\"prompts\">\n @for (prompt of prompts(); track prompt) {\n @if (userPermissions.includes(prompt.permission)) {\n <kit-pill [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\" \n (clicked)=\"onSelectPrompt(prompt)\">\n {{ prompt.label }}\n </kit-pill>\n }\n }\n </div>\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\"/>\n }\n </div>\n </div>\n }\n </ng-template>\n</div>\n", styles: [":host{position:relative}:host .global-search{max-width:360px}:host .global-search:has(.textbox.expanded){max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep:has(.textbox.k-focus) .kit-global-search-popup{display:inherit}:host ::ng-deep .k-animation-container{width:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{display:grid;grid-template-columns:minmax(50px,190px) minmax(50px,190px) minmax(200px,300px) minmax(65px,130px) minmax(65px,130px);justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .title,:host ::ng-deep .search-results .category .line-item .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .dates{display:flex;align-items:center;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .dates .date{font-size:14px;line-height:20px;font-weight:500}:host ::ng-deep .search-results .category .line-item .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .prompts{display:flex;gap:10px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6614
6671
|
}
|
|
6615
6672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGlobalSearchComponent, decorators: [{
|
|
6616
6673
|
type: Component,
|
|
@@ -6629,63 +6686,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6629
6686
|
TranslateModule,
|
|
6630
6687
|
KitEmptySectionComponent,
|
|
6631
6688
|
KitPillComponent,
|
|
6632
|
-
], template: "<div #container\n class=\"global-search\">\n <kendo-textbox #textbox\n class=\"textbox\"\n [class.expanded]=\"isPopupOpen\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [size]=\"'none'\"\n [(ngModel)]=\"
|
|
6633
|
-
}], ctorParameters: () => [{ type: i1$7.Router }], propDecorators: { documentClick: [{
|
|
6689
|
+
], template: "<div #container\n class=\"global-search\">\n <kendo-textbox #textbox\n class=\"textbox\"\n [class.expanded]=\"isPopupOpen\"\n [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n [size]=\"'none'\"\n [(ngModel)]=\"searchValue\"\n (click)=\"openPopup()\">\n <ng-template kendoTextBoxPrefixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\"/>\n </ng-template>\n <ng-template kendoTextBoxSuffixTemplate>\n <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\" \n (click)=\"clearSearch()\"/>\n </ng-template>\n </kendo-textbox>\n\n <kit-popup #popup\n [popupClass]=\"popupClass\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\" />\n\n <ng-template #content>\n @if (userPermissions$ | async; as userPermissions) {\n <div class=\"popup-content\">\n <div class=\"search-results\">\n @if (searchResults().length) {\n @for (category of searchResults(); track category?.name) {\n @if (category) {\n <div class=\"category\">\n <p class=\"header\"\n [class.empty]=\"!category.total\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n </p>\n\n @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track $index) {\n <div class=\"line-item\"\n [class.has-link]=\"lineItem.link\"\n (click)=\"navigate(lineItem.link)\">\n <div class=\"title\">\n <kit-truncate-text>{{ lineItem.title }}</kit-truncate-text>\n </div>\n <div class=\"subtitle\">\n <kit-truncate-text>{{ lineItem.subtitle }}</kit-truncate-text>\n </div>\n @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n <kit-route-path class=\"route\"\n [containerMode]=\"lineItem.routePath?.containerMode\"\n [destinationPort]=\"lineItem.routePath?.to\"\n [originPort]=\"lineItem.routePath?.from\"\n [type]=\"lineItem.routePath?.type\"/>\n }\n @if (lineItem.dates?.firstDate.value) {\n <div class=\"dates first-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n @if (lineItem.dates?.secondDate.value) {\n <div class=\"dates second-date\">\n <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n </kit-truncate-text>\n </div>\n }\n </div>\n }\n \n @if (category.total > this.displayedLineItemsNumber()) {\n <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n (clicked)=\"navigate(category.categoryLink)\"/>\n }\n </div>\n }\n }\n } @else if (showPropmts()) {\n <div class=\"prompts\">\n @for (prompt of prompts(); track prompt) {\n @if (userPermissions.includes(prompt.permission)) {\n <kit-pill [theme]=\"kitPillTheme.MAIN\"\n [selectable]=\"true\" \n (clicked)=\"onSelectPrompt(prompt)\">\n {{ prompt.label }}\n </kit-pill>\n }\n }\n </div>\n } @else {\n <kit-empty-section class=\"empty-section\"\n [text]=\"'kit.globalSearch.noData' | translate\"/>\n }\n </div>\n </div>\n }\n </ng-template>\n</div>\n", styles: [":host{position:relative}:host .global-search{max-width:360px}:host .global-search:has(.textbox.expanded){max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep:has(.textbox.k-focus) .kit-global-search-popup{display:inherit}:host ::ng-deep .k-animation-container{width:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{display:grid;grid-template-columns:minmax(50px,190px) minmax(50px,190px) minmax(200px,300px) minmax(65px,130px) minmax(65px,130px);justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .title,:host ::ng-deep .search-results .category .line-item .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .dates{display:flex;align-items:center;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .dates .date{font-size:14px;line-height:20px;font-weight:500}:host ::ng-deep .search-results .category .line-item .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .prompts{display:flex;gap:10px}:host ::ng-deep .empty-section{container:none}\n"] }]
|
|
6690
|
+
}], ctorParameters: () => [{ type: i1$7.Router }, { type: i1$d.Store }], propDecorators: { documentClick: [{
|
|
6634
6691
|
type: HostListener,
|
|
6635
6692
|
args: ['document:click', ['$event']]
|
|
6636
6693
|
}] } });
|
|
6637
6694
|
|
|
6638
|
-
class FetchUserPermissions {
|
|
6639
|
-
static { this.type = '[User] FetchPermissions'; }
|
|
6640
|
-
}
|
|
6641
|
-
|
|
6642
|
-
const KIT_BASE_PATH = new InjectionToken('kitBasePath');
|
|
6643
|
-
|
|
6644
|
-
class KitPermissionsApiService {
|
|
6645
|
-
constructor(httpClient, basePath) {
|
|
6646
|
-
this.httpClient = httpClient;
|
|
6647
|
-
this.basePath = basePath;
|
|
6648
|
-
}
|
|
6649
|
-
getUserPermissions() {
|
|
6650
|
-
const url = `${this.basePath}/user/permissions`;
|
|
6651
|
-
return this.httpClient.get(url);
|
|
6652
|
-
}
|
|
6653
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6654
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, providedIn: 'root' }); }
|
|
6655
|
-
}
|
|
6656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, decorators: [{
|
|
6657
|
-
type: Injectable,
|
|
6658
|
-
args: [{
|
|
6659
|
-
providedIn: 'root',
|
|
6660
|
-
}]
|
|
6661
|
-
}], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
|
|
6662
|
-
type: Inject,
|
|
6663
|
-
args: [KIT_BASE_PATH]
|
|
6664
|
-
}] }] });
|
|
6665
|
-
|
|
6666
|
-
const KIT_USER_PERMISSIONS_STATE_TOKEN = new StateToken('userPermissions');
|
|
6667
|
-
let KitUserPermissionsState = class KitUserPermissionsState {
|
|
6668
|
-
constructor(kitPermissionsApiService) {
|
|
6669
|
-
this.kitPermissionsApiService = kitPermissionsApiService;
|
|
6670
|
-
}
|
|
6671
|
-
fetchUserPermissions(ctx) {
|
|
6672
|
-
return this.kitPermissionsApiService.getUserPermissions().pipe(tap(userPermissions => ctx.setState(userPermissions)));
|
|
6673
|
-
}
|
|
6674
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, deps: [{ token: KitPermissionsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6675
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState }); }
|
|
6676
|
-
};
|
|
6677
|
-
__decorate([
|
|
6678
|
-
Action(FetchUserPermissions)
|
|
6679
|
-
], KitUserPermissionsState.prototype, "fetchUserPermissions", null);
|
|
6680
|
-
KitUserPermissionsState = __decorate([
|
|
6681
|
-
State({
|
|
6682
|
-
name: KIT_USER_PERMISSIONS_STATE_TOKEN,
|
|
6683
|
-
})
|
|
6684
|
-
], KitUserPermissionsState);
|
|
6685
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, decorators: [{
|
|
6686
|
-
type: Injectable
|
|
6687
|
-
}], ctorParameters: () => [{ type: KitPermissionsApiService }], propDecorators: { fetchUserPermissions: [] } });
|
|
6688
|
-
|
|
6689
6695
|
const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryName, categoryLink, itemMapper) => {
|
|
6690
6696
|
return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(map(state => state.permissions), tap(permissions => {
|
|
6691
6697
|
if (!permissions) {
|
|
@@ -6829,7 +6835,7 @@ const kitTranslations = {
|
|
|
6829
6835
|
},
|
|
6830
6836
|
globalSearch: {
|
|
6831
6837
|
placeholder: 'Global Search',
|
|
6832
|
-
|
|
6838
|
+
showResults: 'Show Results',
|
|
6833
6839
|
noData: 'No data found',
|
|
6834
6840
|
},
|
|
6835
6841
|
columns: {
|