@indice/ng-components 0.3.10 → 0.3.11
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.
- package/esm2022/lib/controls/combobox/combobox.component.mjs +3 -3
- package/esm2022/lib/controls/enhanced-combobox/enhanced-combobox.component.mjs +115 -0
- package/esm2022/lib/controls/user-profile-menu/user-profile-menu.component.mjs +3 -3
- package/esm2022/lib/helpers/base-list.component.mjs +4 -4
- package/esm2022/lib/layouts/shell/shell-header/shell-header.component.mjs +2 -2
- package/esm2022/lib/ng-components.module.mjs +9 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/indice-ng-components.mjs +126 -12
- package/fesm2022/indice-ng-components.mjs.map +1 -1
- package/lib/controls/enhanced-combobox/enhanced-combobox.component.d.ts +37 -0
- package/lib/ng-components.module.d.ts +54 -53
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, InjectionToken, Injectable, Optional, TemplateRef, ContentChild, LOCALE_ID, forwardRef, ViewChild, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, InjectionToken, Injectable, Optional, TemplateRef, ContentChild, LOCALE_ID, forwardRef, ViewChild, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { isPlatformBrowser, formatDate, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { NavigationEnd, Router, ActivatedRoute, NavigationStart, ActivationStart, RouterModule } from '@angular/router';
|
|
7
|
-
import { Subject, BehaviorSubject, of, fromEvent } from 'rxjs';
|
|
7
|
+
import { Subject, BehaviorSubject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, of, fromEvent } from 'rxjs';
|
|
8
8
|
import { filter, distinctUntilChanged, debounceTime, share, map } from 'rxjs/operators';
|
|
9
9
|
import * as i2 from '@angular/forms';
|
|
10
10
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
@@ -2141,11 +2141,11 @@ class ComboboxComponent {
|
|
|
2141
2141
|
this.onSearch.emit(searchTerm);
|
|
2142
2142
|
}
|
|
2143
2143
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2144
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", placeholder: "placeholder", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", noResultsTemplate: "noResultsTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n title=\"combobox input\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults && items.length > 0\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index
|
|
2144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", placeholder: "placeholder", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", noResultsTemplate: "noResultsTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n title=\"combobox input\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults && items.length > 0\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <div class=\"combobox-results\"\r\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n </ng-container>\r\n </div>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultnoResultsTemplate\r\n let-searchTerm>\r\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
2145
2145
|
}
|
|
2146
2146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
2147
2147
|
type: Component,
|
|
2148
|
-
args: [{ selector: 'lib-combobox', template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n title=\"combobox input\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults && items.length > 0\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index
|
|
2148
|
+
args: [{ selector: 'lib-combobox', template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n title=\"combobox input\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults && items.length > 0\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <div class=\"combobox-results\"\r\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n </ng-container>\r\n </div>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultnoResultsTemplate\r\n let-searchTerm>\r\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>" }]
|
|
2149
2149
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2150
2150
|
type: Input
|
|
2151
2151
|
}], placeholder: [{
|
|
@@ -2173,6 +2173,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
|
|
|
2173
2173
|
type: Output
|
|
2174
2174
|
}] } });
|
|
2175
2175
|
|
|
2176
|
+
class EnhancedComboboxComponent {
|
|
2177
|
+
constructor() {
|
|
2178
|
+
this._debouncer = new Subject();
|
|
2179
|
+
this._items = [];
|
|
2180
|
+
this.id = 'combobox';
|
|
2181
|
+
this.itemTemplate = undefined;
|
|
2182
|
+
this.selectedItemTemplate = undefined;
|
|
2183
|
+
this.noResultsTemplate = undefined;
|
|
2184
|
+
this.busy = false;
|
|
2185
|
+
this.multiple = true;
|
|
2186
|
+
this.debounceMs = 1000;
|
|
2187
|
+
this.displayShowMoreOption = false;
|
|
2188
|
+
this.equalityPredicate = (x, y) => x === y;
|
|
2189
|
+
this.selectedItemsFilter = () => true;
|
|
2190
|
+
this.onSearch = new EventEmitter();
|
|
2191
|
+
this.onItemSelected = new EventEmitter();
|
|
2192
|
+
this.onShowMore = new EventEmitter();
|
|
2193
|
+
this.showResults = false;
|
|
2194
|
+
this.selectedItems = [];
|
|
2195
|
+
this.searchTerm = '';
|
|
2196
|
+
}
|
|
2197
|
+
set items(items) {
|
|
2198
|
+
this._items = items;
|
|
2199
|
+
}
|
|
2200
|
+
get items() {
|
|
2201
|
+
return this._items.filter(this.selectedItemsFilter);
|
|
2202
|
+
}
|
|
2203
|
+
ngOnInit() {
|
|
2204
|
+
this.emitSearchEvent();
|
|
2205
|
+
this._debouncer
|
|
2206
|
+
.pipe(debounceTime$1(this.debounceMs), distinctUntilChanged$1())
|
|
2207
|
+
.subscribe((value) => {
|
|
2208
|
+
this.searchTerm = value;
|
|
2209
|
+
this.emitSearchEvent(value);
|
|
2210
|
+
});
|
|
2211
|
+
}
|
|
2212
|
+
onInputClick() {
|
|
2213
|
+
this.showResults = true;
|
|
2214
|
+
}
|
|
2215
|
+
onClickOutside() {
|
|
2216
|
+
this.showResults = false;
|
|
2217
|
+
}
|
|
2218
|
+
onInputKeyUp(event) {
|
|
2219
|
+
this._debouncer.next(event.currentTarget.value);
|
|
2220
|
+
}
|
|
2221
|
+
onListItemSelected(item) {
|
|
2222
|
+
this.onItemSelected.emit(item);
|
|
2223
|
+
if (this.multiple) {
|
|
2224
|
+
const index = this.selectedItems.findIndex(x => this.equalityPredicate(x, item));
|
|
2225
|
+
if (index < 0) {
|
|
2226
|
+
this.selectedItems.push(item);
|
|
2227
|
+
}
|
|
2228
|
+
}
|
|
2229
|
+
else {
|
|
2230
|
+
this.value = item;
|
|
2231
|
+
}
|
|
2232
|
+
}
|
|
2233
|
+
removeItem(item) {
|
|
2234
|
+
const index = this.selectedItems.findIndex(x => this.equalityPredicate(x, item));
|
|
2235
|
+
if (index > -1) {
|
|
2236
|
+
this.selectedItems.splice(index, 1);
|
|
2237
|
+
}
|
|
2238
|
+
}
|
|
2239
|
+
emitSearchEvent(searchTerm = undefined) {
|
|
2240
|
+
this.onSearch.emit(searchTerm);
|
|
2241
|
+
}
|
|
2242
|
+
emitShowMoreEvent(event) {
|
|
2243
|
+
event.stopPropagation();
|
|
2244
|
+
this.onShowMore.emit();
|
|
2245
|
+
}
|
|
2246
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: EnhancedComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: EnhancedComboboxComponent, selector: "app-enhanced-combobox", inputs: { id: "id", placeholder: "placeholder", itemTemplate: "itemTemplate", selectedItemTemplate: "selectedItemTemplate", noResultsTemplate: "noResultsTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs", displayShowMoreOption: "displayShowMoreOption", equalityPredicate: "equalityPredicate", selectedItemsFilter: "selectedItemsFilter", items: "items" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected", onShowMore: "onShowMore" }, ngImport: i0, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n title=\"combobox input\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults && items.length > 0\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n <li *ngIf=\"displayShowMoreOption\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"showMoreItemTemplate\" />\r\n </li>\r\n </ul>\r\n <div class=\"combobox-results\"\r\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n </ng-container>\r\n </div>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultnoResultsTemplate\r\n let-searchTerm>\r\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #showMoreItemTemplate>\r\n <span (click)=\"emitShowMoreEvent($event)\" class=\"btn btn-link text-blue-600 hover:bg-gray-100 flex justify-center relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">Show More</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
2248
|
+
}
|
|
2249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: EnhancedComboboxComponent, decorators: [{
|
|
2250
|
+
type: Component,
|
|
2251
|
+
args: [{ selector: 'app-enhanced-combobox', template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n title=\"combobox input\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults && items.length > 0\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n <li *ngIf=\"displayShowMoreOption\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"showMoreItemTemplate\" />\r\n </li>\r\n </ul>\r\n <div class=\"combobox-results\"\r\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\r\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\r\n </ng-container>\r\n </div>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultnoResultsTemplate\r\n let-searchTerm>\r\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\r\n</ng-template>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #showMoreItemTemplate>\r\n <span (click)=\"emitShowMoreEvent($event)\" class=\"btn btn-link text-blue-600 hover:bg-gray-100 flex justify-center relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">Show More</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>" }]
|
|
2252
|
+
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2253
|
+
type: Input
|
|
2254
|
+
}], placeholder: [{
|
|
2255
|
+
type: Input
|
|
2256
|
+
}], itemTemplate: [{
|
|
2257
|
+
type: Input
|
|
2258
|
+
}], selectedItemTemplate: [{
|
|
2259
|
+
type: Input
|
|
2260
|
+
}], noResultsTemplate: [{
|
|
2261
|
+
type: Input
|
|
2262
|
+
}], busy: [{
|
|
2263
|
+
type: Input
|
|
2264
|
+
}], multiple: [{
|
|
2265
|
+
type: Input
|
|
2266
|
+
}], debounceMs: [{
|
|
2267
|
+
type: Input
|
|
2268
|
+
}], displayShowMoreOption: [{
|
|
2269
|
+
type: Input
|
|
2270
|
+
}], equalityPredicate: [{
|
|
2271
|
+
type: Input
|
|
2272
|
+
}], selectedItemsFilter: [{
|
|
2273
|
+
type: Input
|
|
2274
|
+
}], items: [{
|
|
2275
|
+
type: Input,
|
|
2276
|
+
args: ['items']
|
|
2277
|
+
}], onSearch: [{
|
|
2278
|
+
type: Output
|
|
2279
|
+
}], onItemSelected: [{
|
|
2280
|
+
type: Output
|
|
2281
|
+
}], onShowMore: [{
|
|
2282
|
+
type: Output
|
|
2283
|
+
}] } });
|
|
2284
|
+
|
|
2176
2285
|
class LibTabLabelDirective {
|
|
2177
2286
|
constructor(template) {
|
|
2178
2287
|
this.template = template;
|
|
@@ -3276,11 +3385,11 @@ class UserProfileMenuComponent {
|
|
|
3276
3385
|
this.userMenuExpanded = false;
|
|
3277
3386
|
}
|
|
3278
3387
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"], showPicture: ["show-picture", "showPicture"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <div class=\"inline-flex\">\r\n <!-- Username -->\r\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n </div>\r\n\r\n <div [class.ml-2]=\"showUserName\">\r\n <button type=\"button\" \r\n *ngIf=\"user\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n <img *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin($event)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [class]=\"userMenuExpanded ?\r\n 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n :\r\n 'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <lib-nav-links-list\r\n (click)=\"onClickOutside($event)\"\r\n [links]=\"links.profile\"\r\n [link-class]=\"'nav-link-profile'\"\r\n [link-active-class]=\"'nav-link-profile-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ImgUserPictureDirective, selector: "img[userPicture]", inputs: ["userPicture", "size", "version", "displayName", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons", "show-text", "large-icons"] }] }); }
|
|
3388
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"], showPicture: ["show-picture", "showPicture"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <div class=\"inline-flex\">\r\n <!-- Username -->\r\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n </div>\r\n\r\n <div [class.ml-2]=\"showUserName\">\r\n <button type=\"button\" \r\n *ngIf=\"user\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu-authenticated\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin($event)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [class]=\"userMenuExpanded ?\r\n 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n :\r\n 'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <lib-nav-links-list\r\n (click)=\"onClickOutside($event)\"\r\n [links]=\"links.profile\"\r\n [link-class]=\"'nav-link-profile'\"\r\n [link-active-class]=\"'nav-link-profile-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ImgUserPictureDirective, selector: "img[userPicture]", inputs: ["userPicture", "size", "version", "displayName", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons", "show-text", "large-icons"] }] }); }
|
|
3280
3389
|
}
|
|
3281
3390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
3282
3391
|
type: Component,
|
|
3283
|
-
args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <div class=\"inline-flex\">\r\n <!-- Username -->\r\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n </div>\r\n\r\n <div [class.ml-2]=\"showUserName\">\r\n <button type=\"button\" \r\n *ngIf=\"user\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n <img *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin($event)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [class]=\"userMenuExpanded ?\r\n 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n :\r\n 'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <lib-nav-links-list\r\n (click)=\"onClickOutside($event)\"\r\n [links]=\"links.profile\"\r\n [link-class]=\"'nav-link-profile'\"\r\n [link-active-class]=\"'nav-link-profile-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n\r\n</div>\r\n\r\n" }]
|
|
3392
|
+
args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <div class=\"inline-flex\">\r\n <!-- Username -->\r\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n </div>\r\n\r\n <div [class.ml-2]=\"showUserName\">\r\n <button type=\"button\" \r\n *ngIf=\"user\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu-authenticated\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\r\n <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin($event)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [class]=\"userMenuExpanded ?\r\n 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n :\r\n 'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <lib-nav-links-list\r\n (click)=\"onClickOutside($event)\"\r\n [links]=\"links.profile\"\r\n [link-class]=\"'nav-link-profile'\"\r\n [link-active-class]=\"'nav-link-profile-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n\r\n</div>\r\n\r\n" }]
|
|
3284
3393
|
}], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
|
|
3285
3394
|
type: Inject,
|
|
3286
3395
|
args: [AuthService]
|
|
@@ -3372,7 +3481,7 @@ class ShellHeaderComponent {
|
|
|
3372
3481
|
}
|
|
3373
3482
|
setCurrentUser(user) {
|
|
3374
3483
|
this.user = user;
|
|
3375
|
-
if (user && user.profile && user.profile.given_name && user.profile.family_name) {
|
|
3484
|
+
if (user && user.profile && user.profile.given_name && user.profile.given_name !== undefined && user.profile.family_name && user.profile.family_name !== undefined) {
|
|
3376
3485
|
this.avatarName = `${user.profile.given_name.charAt(0)}${user.profile.family_name.charAt(0)}`.toUpperCase();
|
|
3377
3486
|
}
|
|
3378
3487
|
}
|
|
@@ -4260,13 +4369,13 @@ class BaseListComponent {
|
|
|
4260
4369
|
if (this.pageSize !== size) {
|
|
4261
4370
|
this.pageSize = size;
|
|
4262
4371
|
}
|
|
4263
|
-
if (params.get('search') !== this.search) {
|
|
4372
|
+
if (params.get('search') && (params.get('search') !== this.search)) {
|
|
4264
4373
|
this.search = params.get('search');
|
|
4265
4374
|
}
|
|
4266
|
-
if (params.get('sort') !== this.sort) {
|
|
4375
|
+
if (params.get('sort') && (params.get('sort') !== this.sort)) {
|
|
4267
4376
|
this.sort = params.get('sort');
|
|
4268
4377
|
}
|
|
4269
|
-
if (params.get('dir') !== this.sortdir) {
|
|
4378
|
+
if (params.get('dir') && (params.get('dir') !== this.sortdir)) {
|
|
4270
4379
|
this.sortdir = params.get('dir');
|
|
4271
4380
|
}
|
|
4272
4381
|
// initialize filters that may reside in the query string
|
|
@@ -4884,6 +4993,7 @@ class IndiceComponentsModule {
|
|
|
4884
4993
|
ClickOutsideDirective,
|
|
4885
4994
|
CollapsiblePanelComponent,
|
|
4886
4995
|
ComboboxComponent,
|
|
4996
|
+
EnhancedComboboxComponent,
|
|
4887
4997
|
DatepickerComponent,
|
|
4888
4998
|
DropDownMenuComponent,
|
|
4889
4999
|
DurationFormatPipe,
|
|
@@ -4945,6 +5055,7 @@ class IndiceComponentsModule {
|
|
|
4945
5055
|
ClickOutsideDirective,
|
|
4946
5056
|
CollapsiblePanelComponent,
|
|
4947
5057
|
ComboboxComponent,
|
|
5058
|
+
EnhancedComboboxComponent,
|
|
4948
5059
|
DatepickerComponent,
|
|
4949
5060
|
DropDownMenuComponent,
|
|
4950
5061
|
DurationFormatPipe,
|
|
@@ -5004,6 +5115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
|
|
|
5004
5115
|
ClickOutsideDirective,
|
|
5005
5116
|
CollapsiblePanelComponent,
|
|
5006
5117
|
ComboboxComponent,
|
|
5118
|
+
EnhancedComboboxComponent,
|
|
5007
5119
|
DatepickerComponent,
|
|
5008
5120
|
DropDownMenuComponent,
|
|
5009
5121
|
DurationFormatPipe,
|
|
@@ -5071,6 +5183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
|
|
|
5071
5183
|
ClickOutsideDirective,
|
|
5072
5184
|
CollapsiblePanelComponent,
|
|
5073
5185
|
ComboboxComponent,
|
|
5186
|
+
EnhancedComboboxComponent,
|
|
5074
5187
|
DatepickerComponent,
|
|
5075
5188
|
DropDownMenuComponent,
|
|
5076
5189
|
DurationFormatPipe,
|
|
@@ -5112,7 +5225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
|
|
|
5112
5225
|
ContentTileHeaderComponent,
|
|
5113
5226
|
StatsGridComponent,
|
|
5114
5227
|
ProgressBarComponent
|
|
5115
|
-
]
|
|
5228
|
+
],
|
|
5229
|
+
schemas: [NO_ERRORS_SCHEMA]
|
|
5116
5230
|
}]
|
|
5117
5231
|
}] });
|
|
5118
5232
|
|
|
@@ -5123,5 +5237,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
|
|
|
5123
5237
|
* Generated bundle index. Do not edit.
|
|
5124
5238
|
*/
|
|
5125
5239
|
|
|
5126
|
-
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FilterClause, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
|
|
5240
|
+
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AdvancedSearchComponent, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, EnhancedComboboxComponent, ErrorComponent, ExternalNavLink, FilterClause, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinkSeparator, NavLinksListComponent, NotificationNavLink, OperatorOptions, Operators, PageNotFoundComponent, PagerComponent, PagerPosition, ProgressBarComponent, QueryParameters, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
|
|
5127
5241
|
//# sourceMappingURL=indice-ng-components.mjs.map
|