@indice/ng-components 0.5.0-beta.10 → 0.5.0
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/README.md +4 -4
- package/fesm2022/indice-ng-components.mjs +138 -116
- package/fesm2022/indice-ng-components.mjs.map +1 -1
- package/index.d.ts +13 -4
- package/package.json +1 -1
- package/src/assets/styles/advanced-search.css +39 -39
- package/src/assets/styles/avatar-initials.css +35 -35
- package/src/assets/styles/base.css +36 -36
- package/src/assets/styles/cards.css +84 -84
- package/src/assets/styles/collapsible-panel.css +23 -23
- package/src/assets/styles/combobox.css +27 -27
- package/src/assets/styles/components.css +34 -34
- package/src/assets/styles/date-picker.component.css +68 -68
- package/src/assets/styles/drop-down-menu.css +48 -48
- package/src/assets/styles/form-layout.css +51 -51
- package/src/assets/styles/indice-ng-icons-inline.css +2286 -2286
- package/src/assets/styles/language-selection.component.css +10 -10
- package/src/assets/styles/list-view.css +62 -62
- package/src/assets/styles/modal.css +182 -182
- package/src/assets/styles/model-view-layout.css +47 -47
- package/src/assets/styles/nav-links.css +64 -64
- package/src/assets/styles/notifications-indicator.component.css +37 -37
- package/src/assets/styles/pager.css +31 -31
- package/src/assets/styles/progress-bar.component.css +15 -15
- package/src/assets/styles/shell-layout.css +250 -250
- package/src/assets/styles/shell-sidebar-layout.css +122 -122
- package/src/assets/styles/shell-sidebar.css +31 -31
- package/src/assets/styles/side-pane.css +48 -48
- package/src/assets/styles/side-view-layout.css +56 -56
- package/src/assets/styles/stepper.css +169 -169
- package/src/assets/styles/tab-group.css +27 -27
- package/src/assets/styles/toast.css +70 -70
- package/src/assets/styles/toggle-button.component.css +51 -51
- package/src/assets/styles/toggle-buttons-list.component.css +44 -44
- package/src/assets/styles/toggle.css +23 -23
- package/src/assets/styles/view-layout.css +89 -89
- package/src/styles.css +49 -49
- package/src/tailwindcss.css +1 -1
|
@@ -246,11 +246,11 @@ class DropDownMenuComponent {
|
|
|
246
246
|
this.selectedChanged.emit(option.value);
|
|
247
247
|
}
|
|
248
248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
249
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DropDownMenuComponent, isStandalone: false, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder", showIcons: ["show-icons", "showIcons"] }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\
|
|
249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DropDownMenuComponent, isStandalone: false, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder", showIcons: ["show-icons", "showIcons"] }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\n <button type=\"button\" (click)=\"expanded = !expanded\" class=\"dropdown-button\" aria-haspopup=\"listbox\" aria-expanded=\"true\" aria-labelledby=\"listbox-label\">\n <span class=\"dropdown-selected-text\">\n <i *ngIf=\"selectedOption?.icon && showIcons\" [class]=\"selectedOption?.icon\" \n [class.mr-2]=\"selectedOption?.icon\"></i>{{ selectedOption?.text || placeholder }}\n </span>\n <span class=\"dropdown-button-icon\">\n <!-- Heroicon name: solid/selector -->\n <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\n clip-rule=\"evenodd\"/>\n </svg>\n </span>\n </button>\n <ul title=\"menu\" *ngIf=\"expanded && options && options.length > 0\" class=\"dropdown-ul\" tabindex=\"-1\" role=\"listbox\" aria-labelledby=\"listbox-label\">\n <ng-container *ngFor=\"let option of options\">\n <li [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\" (click)=\"selectOption(option)\" id=\"listbox-option-0\" role=\"option\">\n <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\n <i *ngIf=\"option.icon && showIcons\" [class]=\"option.icon\" [class.mr-2]=\"option.icon\"></i>{{ option.text }}\n </span>\n <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\n <!-- Heroicon name: solid/check -->\n <svg class=\"dropdown-li-selected-indicator\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"/>\n </svg>\n </span>\n </li>\n </ng-container>\n </ul>\n</div>\n", 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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
|
|
250
250
|
}
|
|
251
251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropDownMenuComponent, decorators: [{
|
|
252
252
|
type: Component,
|
|
253
|
-
args: [{ selector: 'lib-drop-down-menu', standalone: false, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\
|
|
253
|
+
args: [{ selector: 'lib-drop-down-menu', standalone: false, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\n <button type=\"button\" (click)=\"expanded = !expanded\" class=\"dropdown-button\" aria-haspopup=\"listbox\" aria-expanded=\"true\" aria-labelledby=\"listbox-label\">\n <span class=\"dropdown-selected-text\">\n <i *ngIf=\"selectedOption?.icon && showIcons\" [class]=\"selectedOption?.icon\" \n [class.mr-2]=\"selectedOption?.icon\"></i>{{ selectedOption?.text || placeholder }}\n </span>\n <span class=\"dropdown-button-icon\">\n <!-- Heroicon name: solid/selector -->\n <svg class=\"dropdown-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\n clip-rule=\"evenodd\"/>\n </svg>\n </span>\n </button>\n <ul title=\"menu\" *ngIf=\"expanded && options && options.length > 0\" class=\"dropdown-ul\" tabindex=\"-1\" role=\"listbox\" aria-labelledby=\"listbox-label\">\n <ng-container *ngFor=\"let option of options\">\n <li [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\" (click)=\"selectOption(option)\" id=\"listbox-option-0\" role=\"option\">\n <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\n <i *ngIf=\"option.icon && showIcons\" [class]=\"option.icon\" [class.mr-2]=\"option.icon\"></i>{{ option.text }}\n </span>\n <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\n <!-- Heroicon name: solid/check -->\n <svg class=\"dropdown-li-selected-indicator\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"/>\n </svg>\n </span>\n </li>\n </ng-container>\n </ul>\n</div>\n" }]
|
|
254
254
|
}], ctorParameters: () => [], propDecorators: { options: [{
|
|
255
255
|
type: Input
|
|
256
256
|
}], selectedValue: [{
|
|
@@ -534,11 +534,11 @@ class PagerComponent {
|
|
|
534
534
|
this.sortdirChanged.emit(sortdir);
|
|
535
535
|
}
|
|
536
536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: PagerComponent, isStandalone: false, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pager-container\">\
|
|
537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: PagerComponent, isStandalone: false, selector: "lib-pager", inputs: { busy: "busy", count: "count", page: "page", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sort: "sort", sortdir: ["sort-dir", "sortdir"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pager-container\">\n <div class=\"pager-container-near\">\n <ng-content select=\"[pager-near-content]\"></ng-content>\n </div>\n <div class=\"pager-container-far\">\n <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\n <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\n <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\n <span class=\"sr-only\">sort direction</span>\n <span class=\"inline-block relative\">\n <i [class]=\"sortdirIcon\"></i>\n </span>\n </button>\n </div>\n <div class=\"pager-pages-container\">\n <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\n <div class=\"mx-1\">\n <button [disabled]=\"!canPreviousPage || busy\" (click)=\"previousPage()\"\n class=\"pager-arrow-button-left\">\n <span class=\"sr-only\">Previous</span>\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n <button type=\"button\"\n [disabled]=\"!canNextPage || busy\" (click)=\"nextPage()\"\n class=\"pager-arrow-button-right\">\n <span class=\"sr-only\">Next</span>\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <lib-drop-down-menu *ngIf=\"false && (pages && pages.length > 0)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
|
|
538
538
|
}
|
|
539
539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PagerComponent, decorators: [{
|
|
540
540
|
type: Component,
|
|
541
|
-
args: [{ selector: 'lib-pager', standalone: false, template: "<div class=\"pager-container\">\
|
|
541
|
+
args: [{ selector: 'lib-pager', standalone: false, template: "<div class=\"pager-container\">\n <div class=\"pager-container-near\">\n <ng-content select=\"[pager-near-content]\"></ng-content>\n </div>\n <div class=\"pager-container-far\">\n <div class=\"inline-flex\" *ngIf=\"sortOptions && sortOptions.length > 0\">\n <lib-drop-down-menu [options]=\"sortOptions\" [selected]=\"sort\" (selectedChanged)=\"sortOptionChanged($event)\"></lib-drop-down-menu>\n <button (click)=\"toggleSortdir()\" [disabled]=\"!sort || busy\" class=\"pager-icon-button\">\n <span class=\"sr-only\">sort direction</span>\n <span class=\"inline-block relative\">\n <i [class]=\"sortdirIcon\"></i>\n </span>\n </button>\n </div>\n <div class=\"pager-pages-container\">\n <lib-drop-down-menu [options]=\"pageSizeOptions\" [selected]=\"pageSize\" (selectedChanged)=\"pageSizeOptionChanged($event)\"></lib-drop-down-menu>\n <div class=\"mx-1\">\n <button [disabled]=\"!canPreviousPage || busy\" (click)=\"previousPage()\"\n class=\"pager-arrow-button-left\">\n <span class=\"sr-only\">Previous</span>\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n <button type=\"button\"\n [disabled]=\"!canNextPage || busy\" (click)=\"nextPage()\"\n class=\"pager-arrow-button-right\">\n <span class=\"sr-only\">Next</span>\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n <lib-drop-down-menu *ngIf=\"false && (pages && pages.length > 0)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\n </div>\n </div>\n</div>\n" }]
|
|
542
542
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { busy: [{
|
|
543
543
|
type: Input
|
|
544
544
|
}], count: [{
|
|
@@ -840,11 +840,11 @@ class BreadcrumbComponent {
|
|
|
840
840
|
return isObservable(value);
|
|
841
841
|
}
|
|
842
842
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
843
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: BreadcrumbComponent, isStandalone: false, selector: "lib-breadcrumb", ngImport: i0, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\
|
|
843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: BreadcrumbComponent, isStandalone: false, selector: "lib-breadcrumb", ngImport: i0, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\n aria-label=\"Breadcrumb\">\n <ol role=\"list\"\n class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\n <li class=\"flex\"\n *ngFor=\"let item of breadcrumb; let i = index\">\n <div class=\"flex items-center\">\n <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\n </div>\n </li>\n </ol>\n</nav>\n<ng-template let-value=\"value\"\n #homeTemplate>\n <a [routerLink]=\"value.urlSegments\"\n [title]=\"isAsync(value.title) ? (value.title | async) : value.title\"\n class=\"text-gray-400 hover:text-gray-500\">\n <svg class=\"flex-shrink-0 h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\n </svg>\n <span class=\"sr-only\">{{ isAsync(value.title) ? (value.title | async) : value.title }}</span>\n </a>\n</ng-template>\n<ng-template let-value=\"value\"\n #linkTemplate>\n <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\n viewBox=\"0 0 24 44\"\n preserveAspectRatio=\"none\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\">\n <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n </svg>\n <a [routerLink]=\"value.urlSegments\"\n class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\n {{ isAsync(value.title) ? (value.title | async) : value.title }}\n </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
844
844
|
}
|
|
845
845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
846
846
|
type: Component,
|
|
847
|
-
args: [{ selector: 'lib-breadcrumb', standalone: false, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\
|
|
847
|
+
args: [{ selector: 'lib-breadcrumb', standalone: false, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\n aria-label=\"Breadcrumb\">\n <ol role=\"list\"\n class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\n <li class=\"flex\"\n *ngFor=\"let item of breadcrumb; let i = index\">\n <div class=\"flex items-center\">\n <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\n </div>\n </li>\n </ol>\n</nav>\n<ng-template let-value=\"value\"\n #homeTemplate>\n <a [routerLink]=\"value.urlSegments\"\n [title]=\"isAsync(value.title) ? (value.title | async) : value.title\"\n class=\"text-gray-400 hover:text-gray-500\">\n <svg class=\"flex-shrink-0 h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\n </svg>\n <span class=\"sr-only\">{{ isAsync(value.title) ? (value.title | async) : value.title }}</span>\n </a>\n</ng-template>\n<ng-template let-value=\"value\"\n #linkTemplate>\n <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\n viewBox=\"0 0 24 44\"\n preserveAspectRatio=\"none\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\">\n <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\n </svg>\n <a [routerLink]=\"value.urlSegments\"\n class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\n {{ isAsync(value.title) ? (value.title | async) : value.title }}\n </a>\n</ng-template>\n" }]
|
|
848
848
|
}], ctorParameters: () => [{ type: BreadcrumbService }] });
|
|
849
849
|
|
|
850
850
|
class ListColumnComponent {
|
|
@@ -1267,13 +1267,13 @@ class DatepickerComponent {
|
|
|
1267
1267
|
return outOfRange;
|
|
1268
1268
|
}
|
|
1269
1269
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DatepickerComponent, isStandalone: false, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
1271
1271
|
{
|
|
1272
1272
|
provide: NG_VALUE_ACCESSOR,
|
|
1273
1273
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1274
1274
|
multi: true
|
|
1275
1275
|
}
|
|
1276
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div [class.relative]=\"!inline\"
|
|
1276
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div [class.relative]=\"!inline\" (clickOutside)=\"closeCalendar()\">\n <div class=\"datepicker-container\">\n @if(!inline) {\n <input #dateInput [readonly]=\"readonly\" name=\"dateInput\" (blur)=\"onBlur($event)\" id=\"dateInput\" title=\"dateInput\" (focus)=\"showCalendar = false\" [value]=\"value | date: displayFormat\"\n class=\"datepicker-input\" [class.cursor-not-allowed]=\"disabled\" [placeholder]=\"placeholder\">\n <button type=\"button\" class=\"datepicker-button\" [disabled]=\"disabled\" (click)=\"openCalendar()\" [class.cursor-not-allowed]=\"disabled\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n }\n </div>\n @if(showCalendar || inline) {\n <div [class.absolute]=\"!inline\" class=\"datepicker-background\" style=\"height:18rem;min-width:16rem;\" name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\" (click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">{{monthNames[month]}}</span><span class=\"datepicker-selected-year\">{{year}}</span>\n </button>\n </div>\n @if(!showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousMonth();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\"stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextMonth()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n @if(showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousYear();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextYear()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n </div>\n @if(!showYears) {\n <div class=\"datepicker-wrapper\">\n @for(day of dayNames; track day) {\n <div class=\"datepicker-day-name\" style=\"width: 14.28%\">{{day}}</div>\n }\n </div>\n }\n @if(showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(year of showCalendarYears; track year) {\n <div style=\"width: 18.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\" class=\"datepicker-year\" [class.selected]=\"year.selected\" [class.not-selected]=\"!year.selected\">{{year.year}}</div>\n </div>\n }\n </div>\n }\n @if(!showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(blankday of blankDays; track blankday) {\n <div style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\n }\n @for(date of calendarDates; track date) {\n <div style=\"width: 14.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [class.out-of-range]=\"outOfRangeDate(date)\" [class.selected]=\"date.selected\" [class.not-selected]=\"!date.selected\">{{date.day}}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>", dependencies: [{ kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
1277
1277
|
}
|
|
1278
1278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1279
1279
|
type: Component,
|
|
@@ -1283,7 +1283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1283
1283
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1284
1284
|
multi: true
|
|
1285
1285
|
}
|
|
1286
|
-
], standalone: false, template: "<div [class.relative]=\"!inline\"
|
|
1286
|
+
], standalone: false, template: "<div [class.relative]=\"!inline\" (clickOutside)=\"closeCalendar()\">\n <div class=\"datepicker-container\">\n @if(!inline) {\n <input #dateInput [readonly]=\"readonly\" name=\"dateInput\" (blur)=\"onBlur($event)\" id=\"dateInput\" title=\"dateInput\" (focus)=\"showCalendar = false\" [value]=\"value | date: displayFormat\"\n class=\"datepicker-input\" [class.cursor-not-allowed]=\"disabled\" [placeholder]=\"placeholder\">\n <button type=\"button\" class=\"datepicker-button\" [disabled]=\"disabled\" (click)=\"openCalendar()\" [class.cursor-not-allowed]=\"disabled\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n }\n </div>\n @if(showCalendar || inline) {\n <div [class.absolute]=\"!inline\" class=\"datepicker-background\" style=\"height:18rem;min-width:16rem;\" name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\" (click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">{{monthNames[month]}}</span><span class=\"datepicker-selected-year\">{{year}}</span>\n </button>\n </div>\n @if(!showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousMonth();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\"stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextMonth()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n @if(showYears) {\n <div>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"previousYear();\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\" class=\"datepicker-nav-btn\" (click)=\"nextYear()\">\n <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n }\n </div>\n @if(!showYears) {\n <div class=\"datepicker-wrapper\">\n @for(day of dayNames; track day) {\n <div class=\"datepicker-day-name\" style=\"width: 14.28%\">{{day}}</div>\n }\n </div>\n }\n @if(showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(year of showCalendarYears; track year) {\n <div style=\"width: 18.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\" class=\"datepicker-year\" [class.selected]=\"year.selected\" [class.not-selected]=\"!year.selected\">{{year.year}}</div>\n </div>\n }\n </div>\n }\n @if(!showYears) {\n <div class=\"datepicker-content-wrapper\">\n @for(blankday of blankDays; track blankday) {\n <div style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\n }\n @for(date of calendarDates; track date) {\n <div style=\"width: 14.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [class.out-of-range]=\"outOfRangeDate(date)\" [class.selected]=\"date.selected\" [class.not-selected]=\"!date.selected\">{{date.day}}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>" }]
|
|
1287
1287
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1288
1288
|
type: Inject,
|
|
1289
1289
|
args: [LOCALE_ID]
|
|
@@ -1449,11 +1449,11 @@ class AdvancedSearchComponent {
|
|
|
1449
1449
|
this.advancedSearchChanged.emit(this.filters);
|
|
1450
1450
|
}
|
|
1451
1451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AdvancedSearchComponent, isStandalone: false, selector: "lib-advanced-search", inputs: { operatorsDisabled: ["operators-disabled", "operatorsDisabled"], searchOptions: ["search-options", "searchOptions"], filters: "filters", searchCriteriaLabel: "searchCriteriaLabel" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"advanced-search-container\">\
|
|
1452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AdvancedSearchComponent, isStandalone: false, selector: "lib-advanced-search", inputs: { operatorsDisabled: ["operators-disabled", "operatorsDisabled"], searchOptions: ["search-options", "searchOptions"], filters: "filters", searchCriteriaLabel: "searchCriteriaLabel" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"advanced-search-container\">\n <div class=\"advanced-search-filter\">\n <!--SEARCH FIELDS-->\n <div class=\"advanced-search-filter-field-container\">\n <label class=\"advanced-search-filter-field-label\"\n for=\"selectedField\">\n {{searchCriteriaLabel}}\n </label>\n <lib-drop-down-menu [options]=\"menuOptions\"\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n </div>\n <!--SEARCH FIELDS OPERATOR MENU-->\n <div *ngIf=\"!operatorsDisabled && selectedField\"\n class=\"advanced-search-filter-operator-container\">\n <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\n <label class=\"advanced-search-filter-operator-label\"\n for=\"selectedOperator\">\n \n </label>\n <lib-drop-down-menu [options]=\"operatorMenuOptions\"\n [selected]=\"selectedOperator\"\n (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\n </div>\n </div>\n <!--SEARCH FIELDS INPUT-->\n <div *ngIf=\"selectedField\"\n class=\"advanced-search-filter-value-container\">\n <div *ngIf=\"selectedField.dataType === 'array'\">\n <label class=\"advanced-search-filter-value-label\"\n for=\"fieldValue\">\n \n </label>\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n [selected]=\"fieldValue\"\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n </div>\n <div *ngIf=\"selectedField.dataType === 'string'\">\n <label class=\"advanced-search-filter-value-label\"\n for=\"fieldValue\">\n \n </label>\n <input (keyup.enter)=\"search()\"\n [(ngModel)]=\"fieldValue\"\n name=\"fieldValue\"\n type=\"text\"\n placeholder=\"Search\"\n maxlength=\"300\"\n class=\"advanced-search-filter-value-input\">\n </div>\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n <div>\n <span class=\"advanced-search-filter-value-input-daterange-from\">\n From:\n </span>\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n [(ngModel)]=\"fieldValueDateFrom\"\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n </div>\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\n <span class=\"advanced-search-filter-value-input-daterange-to\">\n To:\n </span>\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n [(ngModel)]=\"fieldValueDateTo\"\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n </div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"selectedField\">\n <!--DO SEARCH-->\n <button type=\"button\"\n [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\n [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\n (click)=\"search()\">\n <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n </button>\n <!--CLEAR-->\n <button type=\"button\"\n (click)=\"clear()\">\n <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n </button>\n </ng-container>\n </div>\n <!--FILTER CHIPS-->\n <!-- In order for our changes to be reflected everytime searchOptions change -->\n <!-- We are looping searchOptions in order to display the proper name -->\n <ng-container *ngFor=\"let searchOption of searchOptions\">\n <ng-container *ngFor=\"let filter of filters; let j = index\">\n <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\n class=\"advanced-search-chips\"\n [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\n {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n <button (click)=\"removeFilter(j)\"\n [disabled]=\"searchOption?.readonly ?? false\"\n type=\"button\"\n class=\"advanced-search-chips-remove-filter\">\n <span class=\"sr-only\">Remove large option</span>\n <svg class=\"h-2 w-2\"\n stroke=\"currentColor\"\n fill=\"none\"\n viewBox=\"0 0 8 8\">\n <path stroke-linecap=\"round\"\n stroke-width=\"1.5\"\n d=\"M1 1l6 6m0-6L1 7\" />\n </svg>\n </button>\n </span>\n </ng-container>\n </ng-container>\n\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
|
|
1453
1453
|
}
|
|
1454
1454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
|
|
1455
1455
|
type: Component,
|
|
1456
|
-
args: [{ selector: 'lib-advanced-search', standalone: false, template: "<div class=\"advanced-search-container\">\
|
|
1456
|
+
args: [{ selector: 'lib-advanced-search', standalone: false, template: "<div class=\"advanced-search-container\">\n <div class=\"advanced-search-filter\">\n <!--SEARCH FIELDS-->\n <div class=\"advanced-search-filter-field-container\">\n <label class=\"advanced-search-filter-field-label\"\n for=\"selectedField\">\n {{searchCriteriaLabel}}\n </label>\n <lib-drop-down-menu [options]=\"menuOptions\"\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\n </div>\n <!--SEARCH FIELDS OPERATOR MENU-->\n <div *ngIf=\"!operatorsDisabled && selectedField\"\n class=\"advanced-search-filter-operator-container\">\n <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\n <label class=\"advanced-search-filter-operator-label\"\n for=\"selectedOperator\">\n \n </label>\n <lib-drop-down-menu [options]=\"operatorMenuOptions\"\n [selected]=\"selectedOperator\"\n (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\n </div>\n </div>\n <!--SEARCH FIELDS INPUT-->\n <div *ngIf=\"selectedField\"\n class=\"advanced-search-filter-value-container\">\n <div *ngIf=\"selectedField.dataType === 'array'\">\n <label class=\"advanced-search-filter-value-label\"\n for=\"fieldValue\">\n \n </label>\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\n [selected]=\"fieldValue\"\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\n </div>\n <div *ngIf=\"selectedField.dataType === 'string'\">\n <label class=\"advanced-search-filter-value-label\"\n for=\"fieldValue\">\n \n </label>\n <input (keyup.enter)=\"search()\"\n [(ngModel)]=\"fieldValue\"\n name=\"fieldValue\"\n type=\"text\"\n placeholder=\"Search\"\n maxlength=\"300\"\n class=\"advanced-search-filter-value-input\">\n </div>\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\n <div>\n <span class=\"advanced-search-filter-value-input-daterange-from\">\n From:\n </span>\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\n [(ngModel)]=\"fieldValueDateFrom\"\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n </div>\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\n <span class=\"advanced-search-filter-value-input-daterange-to\">\n To:\n </span>\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\n [(ngModel)]=\"fieldValueDateTo\"\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\n </div>\n </ng-container>\n </div>\n <ng-container *ngIf=\"selectedField\">\n <!--DO SEARCH-->\n <button type=\"button\"\n [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\n [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\n (click)=\"search()\">\n <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\n </button>\n <!--CLEAR-->\n <button type=\"button\"\n (click)=\"clear()\">\n <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\n </button>\n </ng-container>\n </div>\n <!--FILTER CHIPS-->\n <!-- In order for our changes to be reflected everytime searchOptions change -->\n <!-- We are looping searchOptions in order to display the proper name -->\n <ng-container *ngFor=\"let searchOption of searchOptions\">\n <ng-container *ngFor=\"let filter of filters; let j = index\">\n <span *ngIf=\"filter && filter.member && searchOption.field === filter.member\"\n class=\"advanced-search-chips\"\n [ngClass]=\"{'disabled': searchOption?.readonly ?? false}\">\n {{ searchOption.name }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n <button (click)=\"removeFilter(j)\"\n [disabled]=\"searchOption?.readonly ?? false\"\n type=\"button\"\n class=\"advanced-search-chips-remove-filter\">\n <span class=\"sr-only\">Remove large option</span>\n <svg class=\"h-2 w-2\"\n stroke=\"currentColor\"\n fill=\"none\"\n viewBox=\"0 0 8 8\">\n <path stroke-linecap=\"round\"\n stroke-width=\"1.5\"\n d=\"M1 1l6 6m0-6L1 7\" />\n </svg>\n </button>\n </span>\n </ng-container>\n </ng-container>\n\n</div>\n" }]
|
|
1457
1457
|
}], ctorParameters: () => [], propDecorators: { advancedSearchChanged: [{
|
|
1458
1458
|
type: Output
|
|
1459
1459
|
}], operatorsDisabled: [{
|
|
@@ -1479,11 +1479,11 @@ class ListViewEmptyStateComponent {
|
|
|
1479
1479
|
ngOnInit() {
|
|
1480
1480
|
}
|
|
1481
1481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewEmptyStateComponent, isStandalone: false, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"py-20\">\
|
|
1482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewEmptyStateComponent, isStandalone: false, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"py-20\">\n <div class=\"p-20\">\n <div class=\"text-center p-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n </svg>\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n <p class=\"mt-1 text-sm text-gray-500\">\n {{subTitle}}\n </p>\n <div class=\"mt-6\" *ngIf=\"false\">\n <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n <!-- Heroicon name: solid/plus -->\n <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n </svg>\n {{newItemLabel}}\n </button>\n </div>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1483
1483
|
}
|
|
1484
1484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
|
|
1485
1485
|
type: Component,
|
|
1486
|
-
args: [{ selector: 'lib-list-view-empty-state', standalone: false, template: "<div class=\"py-20\">\
|
|
1486
|
+
args: [{ selector: 'lib-list-view-empty-state', standalone: false, template: "<div class=\"py-20\">\n <div class=\"p-20\">\n <div class=\"text-center p-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n </svg>\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n <p class=\"mt-1 text-sm text-gray-500\">\n {{subTitle}}\n </p>\n <div class=\"mt-6\" *ngIf=\"false\">\n <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n <!-- Heroicon name: solid/plus -->\n <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n </svg>\n {{newItemLabel}}\n </button>\n </div>\n </div>\n </div>\n</div>" }]
|
|
1487
1487
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1488
1488
|
type: Input
|
|
1489
1489
|
}], subTitle: [{
|
|
@@ -1506,11 +1506,11 @@ class SkeletonLoaderComponent {
|
|
|
1506
1506
|
return new Array(i);
|
|
1507
1507
|
}
|
|
1508
1508
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1509
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SkeletonLoaderComponent, isStandalone: false, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type", deckClass: ["deck-class", "deckClass"] }, ngImport: i0, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\
|
|
1509
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SkeletonLoaderComponent, isStandalone: false, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type", deckClass: ["deck-class", "deckClass"] }, ngImport: i0, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\n <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\" *ngFor=\"let i of counter(count)\">\n <div class=\"animate-pulse flex flex-col rounded-xl\">\n <div class=\"rounded w-full h-32 bg-gray-200\"></div>\n \n <div class=\"flex flex-col mt-5 rounded-xl\">\n <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n\n <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1 rounded-xl\">\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n </div>\n\n </div>\n </div>\n</div>\n \n<div class=\"cards-deck-1\" *ngIf=\"type === 'table'\">\n <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\n <div class=\"animate-pulse flex space-x-4\">\n <div class=\"rounded-full bg-light-blue-400 h-12 w-12\"> </div>\n <div class=\"flex-1 space-y-4 py-1\">\n <div class=\"h-4 bg-light-blue-400 rounded w-3/4\"> </div>\n <div class=\"space-y-2\">\n <div class=\"h-4 bg-light-blue-400 rounded\"> </div>\n <div class=\"h-4 bg-light-blue-400 rounded w-5/6\"> </div>\n </div>\n </div>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1510
1510
|
}
|
|
1511
1511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
1512
1512
|
type: Component,
|
|
1513
|
-
args: [{ selector: 'lib-skeleton-loader', standalone: false, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\
|
|
1513
|
+
args: [{ selector: 'lib-skeleton-loader', standalone: false, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\n <div class=\"relative p-4 w-80 bg-white overflow-hidden shadow hover:shadow-md rounded-xl\" *ngFor=\"let i of counter(count)\">\n <div class=\"animate-pulse flex flex-col rounded-xl\">\n <div class=\"rounded w-full h-32 bg-gray-200\"></div>\n \n <div class=\"flex flex-col mt-5 rounded-xl\">\n <div class=\"w-full h-5 bg-gray-200 rounded\"></div>\n <div class=\"mt-2 w-10/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"mt-2 w-8/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n\n <div class=\"grid grid-cols-2 mt-5 gap-x-2 gap-y-1 rounded-xl\">\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n <div class=\"mt-2 w-full h-3 bg-gray-200 rounded\"></div>\n </div>\n\n </div>\n </div>\n</div>\n \n<div class=\"cards-deck-1\" *ngIf=\"type === 'table'\">\n <div class=\"border border-light-blue-300 shadow rounded-lg p-4 max-w-sm w-full mx-auto mb-4\" *ngFor=\"let i of counter(count)\">\n <div class=\"animate-pulse flex space-x-4\">\n <div class=\"rounded-full bg-light-blue-400 h-12 w-12\"> </div>\n <div class=\"flex-1 space-y-4 py-1\">\n <div class=\"h-4 bg-light-blue-400 rounded w-3/4\"> </div>\n <div class=\"space-y-2\">\n <div class=\"h-4 bg-light-blue-400 rounded\"> </div>\n <div class=\"h-4 bg-light-blue-400 rounded w-5/6\"> </div>\n </div>\n </div>\n </div>\n </div>\n</div>" }]
|
|
1514
1514
|
}], ctorParameters: () => [], propDecorators: { count: [{
|
|
1515
1515
|
type: Input
|
|
1516
1516
|
}], type: [{
|
|
@@ -1647,11 +1647,11 @@ class ListViewComponent {
|
|
|
1647
1647
|
}
|
|
1648
1648
|
}
|
|
1649
1649
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewComponent, isStandalone: false, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [filters]=\"filters\"\r\n [operators-disabled]=\"operatorsDisabled\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n </lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\" role=\"listitem\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th aria-label=\"details button\" class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n title=\"expand-collapse\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n title=\"toggleDetails\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>\r\n", 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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["operators-disabled", "search-options", "filters", "searchCriteriaLabel"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type", "deck-class"] }] }); }
|
|
1650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ListViewComponent, isStandalone: false, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div>\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n [search-options]=\"searchOptions\"\n [filters]=\"filters\"\n [operators-disabled]=\"operatorsDisabled\"\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\n </lib-advanced-search>\n\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\n </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n <ng-container *ngSwitchCase=\"'tiles'\">\n <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n\n </div>\n </ng-container>\n\n\n <!-- *ngSwitchCase=\"'gallery'\" -->\n <ng-container *ngSwitchCase=\"'gallery'\">\n <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\" role=\"listitem\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n </ul>\n </ng-container>\n\n <!-- *ngSwitchCase=\"'table'\" -->\n <ng-container *ngSwitchDefault>\n\n <div class=\"list-view-container\">\n <div class=\"list-view-container-inner\">\n <table class=\"list-view-table\">\n <thead class=\"list-view-thead\">\n <tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <th aria-label=\"details button\" class=\"list-view-th-details\"></th>\n </ng-container>\n <ng-container *ngFor=\"let col of columns\">\n <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n {{col.title}}\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button disabled\n title=\"expand-collapse\"\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody class=\"list-view-tbody\"\n *ngIf=\"!busy\">\n <ng-container *ngFor=\"let item of items;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button (click)=\"toggleDetails(item)\"\n title=\"toggleDetails\"\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <ng-template [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\n <div class=\"cards-deck-1\">\n <lib-list-view-empty-state></lib-list-view-empty-state>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"px-2 mt-2\"\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\n <lib-pager [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n </lib-pager>\n</div>\n", 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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["operators-disabled", "search-options", "filters", "searchCriteriaLabel"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type", "deck-class"] }] }); }
|
|
1651
1651
|
}
|
|
1652
1652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
1653
1653
|
type: Component,
|
|
1654
|
-
args: [{ selector: 'lib-list-view', standalone: false, template: "<div>\
|
|
1654
|
+
args: [{ selector: 'lib-list-view', standalone: false, template: "<div>\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n [search-options]=\"searchOptions\"\n [filters]=\"filters\"\n [operators-disabled]=\"operatorsDisabled\"\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\n </lib-advanced-search>\n\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\n [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\n </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n <ng-container *ngSwitchCase=\"'tiles'\">\n <div [class]=\"busy ? 'cards-deck-1' : tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [deck-class]=\"tilesDeckClass\" [count]=\"7\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n\n </div>\n </ng-container>\n\n\n <!-- *ngSwitchCase=\"'gallery'\" -->\n <ng-container *ngSwitchCase=\"'gallery'\">\n <ul role=\"list\" role=\"list\" [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\" [count]=\"5\" [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\n <ng-container *ngFor=\"let item of items\" role=\"listitem\">\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </ng-container>\n </ng-container>\n </ul>\n </ng-container>\n\n <!-- *ngSwitchCase=\"'table'\" -->\n <ng-container *ngSwitchDefault>\n\n <div class=\"list-view-container\">\n <div class=\"list-view-container-inner\">\n <table class=\"list-view-table\">\n <thead class=\"list-view-thead\">\n <tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <th aria-label=\"details button\" class=\"list-view-th-details\"></th>\n </ng-container>\n <ng-container *ngFor=\"let col of columns\">\n <th scope=\"col\" [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\n {{col.title}}\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody class=\"list-view-tbody\" *ngIf=\"busy\">\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button disabled\n title=\"expand-collapse\"\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody class=\"list-view-tbody\"\n *ngIf=\"!busy\">\n <ng-container *ngFor=\"let item of items;let i=index\">\n <tr class=\"list-view-tr\">\n <ng-container *ngIf=\"detailsSectionSupported\">\n <td class=\"list-view-td-details\"\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\n <button (click)=\"toggleDetails(item)\"\n title=\"toggleDetails\"\n type=\"button\"\n class=\"expand-collapse-button\">\n <!-- Heroicon name: solid/plus -->\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\n </button>\n </td>\n <ng-template #hiddenDetailsButton>\n <td class=\"list-view-td-details\"></td>\n </ng-template>\n </ng-container>\n <td *ngFor=\"let col of columns\"\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\n <ng-template [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n <ng-container *ngIf=\"detailsSectionSupported\">\n <tr *ngIf=\"item.detailsExpanded\">\n <td [colSpan]=\"columns.length + 1\"\n class=\"list-view-td bg-gray-100\">\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\n <div class=\"cards-deck-1\">\n <lib-list-view-empty-state></lib-list-view-empty-state>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n\n<div class=\"px-2 mt-2\"\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\n <lib-pager [page]=\"page\"\n [page-size]=\"pageSize\"\n [count]=\"count\"\n [sort-options]=\"sortOptions\"\n [sort]=\"sort\"\n [sort-dir]=\"sortdir\"\n [busy]=\"busy\"\n (pageChanged)=\"emitPageChanged($event)\"\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\n (sortChanged)=\"emitSortChanged($event)\"\n (sortdirChanged)=\"emitSortdirChanged($event)\">\n </lib-pager>\n</div>\n" }]
|
|
1655
1655
|
}], ctorParameters: () => [], propDecorators: { searchOptions: [{
|
|
1656
1656
|
type: Input,
|
|
1657
1657
|
args: ['search-options']
|
|
@@ -1727,11 +1727,11 @@ class CollapsiblePanelComponent {
|
|
|
1727
1727
|
ngOnInit() {
|
|
1728
1728
|
}
|
|
1729
1729
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1730
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: CollapsiblePanelComponent, isStandalone: false, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\
|
|
1730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: CollapsiblePanelComponent, isStandalone: false, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\n <div class=\"collapsible-panel-container-shadow\">\n <div class=\"collapsible-panel-container-inner\">\n <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n <div class=\"collapsible-panel-button-content-container\">\n <span>{{ title }} </span>\n <span class=\"ico-plus\"></span>\n </div>\n </button>\n <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1731
1731
|
}
|
|
1732
1732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
|
|
1733
1733
|
type: Component,
|
|
1734
|
-
args: [{ selector: 'lib-collapsible-panel', standalone: false, template: "<div class=\"collapsible-panel-container\">\
|
|
1734
|
+
args: [{ selector: 'lib-collapsible-panel', standalone: false, template: "<div class=\"collapsible-panel-container\">\n <div class=\"collapsible-panel-container-shadow\">\n <div class=\"collapsible-panel-container-inner\">\n <button type=\"button\" class=\"collapsible-panel-button\" (click)=\"visible = !visible\">\n <div class=\"collapsible-panel-button-content-container\">\n <span>{{ title }} </span>\n <span class=\"ico-plus\"></span>\n </div>\n </button>\n <div class=\"collapsible-panel-content-container\" *ngIf=\"visible\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
1735
1735
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1736
1736
|
type: Input
|
|
1737
1737
|
}] } });
|
|
@@ -1755,11 +1755,11 @@ class KpiTileComponent {
|
|
|
1755
1755
|
return false;
|
|
1756
1756
|
}
|
|
1757
1757
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1758
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: KpiTileComponent, isStandalone: false, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi", hideBtn: "hideBtn", actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\
|
|
1758
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: KpiTileComponent, isStandalone: false, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi", hideBtn: "hideBtn", actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\n <div class=\"card-body\">\n <div class=\"kpi-tile-title-container\">\n <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n </div>\n <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\n <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n <ng-content></ng-content>\n </div>\n <div class=\"card-footer\">\n <div class=\"text-xs\">\n <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\n </div>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1759
1759
|
}
|
|
1760
1760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiTileComponent, decorators: [{
|
|
1761
1761
|
type: Component,
|
|
1762
|
-
args: [{ selector: 'lib-kpi-tile', standalone: false, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\
|
|
1762
|
+
args: [{ selector: 'lib-kpi-tile', standalone: false, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\n <div class=\"card-body\">\n <div class=\"kpi-tile-title-container\">\n <a href=\"#\" class=\"kpi-tile-action\" (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n </div>\n <div class=\"grid grid-cols-2 grid-flow-row gap-2 items-center\">\n <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n <ng-content></ng-content>\n </div>\n <div class=\"card-footer\">\n <div class=\"text-xs\">\n <a href=\"#\" class=\"kpi-tile-action\" [ngClass]=\"{'invisible': hideBtn}\" (click)=\"emitTileAction($event)\">{{actionText}}</a>\n </div>\n </div>\n </div>\n</div>" }]
|
|
1763
1763
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1764
1764
|
type: Input
|
|
1765
1765
|
}], busy: [{
|
|
@@ -1812,11 +1812,11 @@ class ToasterComponent {
|
|
|
1812
1812
|
setTimeout(() => this.remove.emit(index), 100);
|
|
1813
1813
|
}
|
|
1814
1814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToasterComponent, isStandalone: false, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\
|
|
1815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToasterComponent, isStandalone: false, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\n [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\n [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\n <div class=\"toast-container\">\n <div class=\"toast-pill\">\n <div class=\"toast-context-padding\">\n <div class=\"toast-context\"\n [ngSwitch]=\"toast?.type\">\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'info'\">\n <svg class=\"h-5 w-5 text-blue-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'success'\">\n <svg class=\"h-5 w-5 text-green-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'error'\">\n <svg class=\"h-5 w-5 text-red-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'warning'\">\n <svg class=\"h-5 w-5 text-yellow-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchDefault>\n <svg class=\"h-5 w-5 text-green-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n </div>\n\n <div class=\"ml-3 w-0 flex-1\">\n <p class=\"toast-title\"\n *ngIf=\"toast?.title\">\n {{toast?.title}}\n </p>\n <p class=\"toast-body\">\n {{toast?.body}}\n </p>\n </div>\n <div class=\"toast-close-icon\">\n <button class=\"toast-close-button\"\n (click)=\"closeToast(i)\">\n <span class=\"sr-only\">Close</span>\n <!-- Heroicon name: solid/x -->\n <svg class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\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\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
|
|
1816
1816
|
}
|
|
1817
1817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
1818
1818
|
type: Component,
|
|
1819
|
-
args: [{ selector: 'lib-toaster', standalone: false, template: "<div aria-live=\"assertive\"\
|
|
1819
|
+
args: [{ selector: 'lib-toaster', standalone: false, template: "<div aria-live=\"assertive\"\n [ngClass]=\"closed ? 'toast-closed': 'toast z-50'\"\n [ngStyle]=\"isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }\">\n <div class=\"toast-container\">\n <div class=\"toast-pill\">\n <div class=\"toast-context-padding\">\n <div class=\"toast-context\"\n [ngSwitch]=\"toast?.type\">\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'info'\">\n <svg class=\"h-5 w-5 text-blue-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'success'\">\n <svg class=\"h-5 w-5 text-green-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'error'\">\n <svg class=\"h-5 w-5 text-red-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchCase=\"'warning'\">\n <svg class=\"h-5 w-5 text-yellow-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n clip-rule=\"evenodd\" />\n </svg>\n </div>\n <div class=\"toast-icon\"\n *ngSwitchDefault>\n <svg class=\"h-5 w-5 text-green-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n </div>\n\n <div class=\"ml-3 w-0 flex-1\">\n <p class=\"toast-title\"\n *ngIf=\"toast?.title\">\n {{toast?.title}}\n </p>\n <p class=\"toast-body\">\n {{toast?.body}}\n </p>\n </div>\n <div class=\"toast-close-icon\">\n <button class=\"toast-close-button\"\n (click)=\"closeToast(i)\">\n <span class=\"sr-only\">Close</span>\n <!-- Heroicon name: solid/x -->\n <svg class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\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\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>" }]
|
|
1820
1820
|
}], ctorParameters: () => [], propDecorators: { toast: [{
|
|
1821
1821
|
type: Input
|
|
1822
1822
|
}], i: [{
|
|
@@ -1841,11 +1841,11 @@ class ToasterContainerComponent {
|
|
|
1841
1841
|
this.toasts = this.toasts.slice(0, index).concat(this.toasts.slice(index + 1));
|
|
1842
1842
|
}
|
|
1843
1843
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1844
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToasterContainerComponent, isStandalone: false, selector: "lib-toaster-container", ngImport: i0, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\
|
|
1844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToasterContainerComponent, isStandalone: false, selector: "lib-toaster-container", ngImport: i0, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToasterComponent, selector: "lib-toaster", inputs: ["toast", "i"], outputs: ["remove"] }] }); }
|
|
1845
1845
|
}
|
|
1846
1846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterContainerComponent, decorators: [{
|
|
1847
1847
|
type: Component,
|
|
1848
|
-
args: [{ selector: 'lib-toaster-container', standalone: false, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\
|
|
1848
|
+
args: [{ selector: 'lib-toaster-container', standalone: false, template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\n" }]
|
|
1849
1849
|
}], ctorParameters: () => [{ type: ToasterService }] });
|
|
1850
1850
|
|
|
1851
1851
|
class AvatarInitialsComponent {
|
|
@@ -1882,11 +1882,11 @@ class AvatarInitialsComponent {
|
|
|
1882
1882
|
}
|
|
1883
1883
|
}
|
|
1884
1884
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1885
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AvatarInitialsComponent, isStandalone: false, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\
|
|
1885
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: AvatarInitialsComponent, isStandalone: false, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\n <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1886
1886
|
}
|
|
1887
1887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
|
|
1888
1888
|
type: Component,
|
|
1889
|
-
args: [{ selector: 'lib-avatar-initials', standalone: false, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\
|
|
1889
|
+
args: [{ selector: 'lib-avatar-initials', standalone: false, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\n <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\n</div>\n" }]
|
|
1890
1890
|
}], ctorParameters: () => [], propDecorators: { name: [{
|
|
1891
1891
|
type: Input
|
|
1892
1892
|
}], large: [{
|
|
@@ -1936,7 +1936,7 @@ class ToggleComponent {
|
|
|
1936
1936
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1937
1937
|
multi: true
|
|
1938
1938
|
}
|
|
1939
|
-
], ngImport: i0, template: "<button type=\"button\"\
|
|
1939
|
+
], ngImport: i0, template: "<button type=\"button\"\n [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n class=\"toggle-button\"\n role=\"switch\"\n aria-checked=\"false\"\n aria-labelledby=\"isPrivate\"\n (click)=\"changeValue()\"\n (blur)=\"onBlur($event)\"\n value=\"{{value}}\"\n [disabled]=\"disabled\"\n [title]=\"disabled ? publicLabel : privateLabel\">\n <span aria-hidden=\"true\"\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n class=\"toggle-span\"></span>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1940
1940
|
}
|
|
1941
1941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1942
1942
|
type: Component,
|
|
@@ -1946,7 +1946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1946
1946
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1947
1947
|
multi: true
|
|
1948
1948
|
}
|
|
1949
|
-
], standalone: false, template: "<button type=\"button\"\
|
|
1949
|
+
], standalone: false, template: "<button type=\"button\"\n [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\n class=\"toggle-button\"\n role=\"switch\"\n aria-checked=\"false\"\n aria-labelledby=\"isPrivate\"\n (click)=\"changeValue()\"\n (blur)=\"onBlur($event)\"\n value=\"{{value}}\"\n [disabled]=\"disabled\"\n [title]=\"disabled ? publicLabel : privateLabel\">\n <span aria-hidden=\"true\"\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n class=\"toggle-span\"></span>\n</button>\n" }]
|
|
1950
1950
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
1951
1951
|
type: Input
|
|
1952
1952
|
}], disabled: [{
|
|
@@ -1963,7 +1963,6 @@ class SidePaneComponent {
|
|
|
1963
1963
|
constructor(router, document) {
|
|
1964
1964
|
this.router = router;
|
|
1965
1965
|
this.document = document;
|
|
1966
|
-
// tslint:disable-next-line:no-input-rename
|
|
1967
1966
|
this.showPane = false;
|
|
1968
1967
|
this.sizeContainerStyle = 'side-pane-box-size';
|
|
1969
1968
|
this.overlayStyle = 'side-pane-overlay';
|
|
@@ -1972,10 +1971,8 @@ class SidePaneComponent {
|
|
|
1972
1971
|
this.onClose = new EventEmitter();
|
|
1973
1972
|
}
|
|
1974
1973
|
ngOnChanges(changes) {
|
|
1975
|
-
if (changes && changes
|
|
1976
|
-
console.log('ngOnChanges ', changes);
|
|
1974
|
+
if (changes && changes['size'])
|
|
1977
1975
|
this.initPane();
|
|
1978
|
-
}
|
|
1979
1976
|
}
|
|
1980
1977
|
ngOnDestroy() {
|
|
1981
1978
|
}
|
|
@@ -1987,9 +1984,7 @@ class SidePaneComponent {
|
|
|
1987
1984
|
}
|
|
1988
1985
|
initPane(state) {
|
|
1989
1986
|
//priority to property for size
|
|
1990
|
-
console.log('initPane', 'size:', this.size, 'state size', state?.paneSize);
|
|
1991
1987
|
this.sizeContainerStyle = this.sizeToClass(this.size ?? state?.paneSize);
|
|
1992
|
-
console.log('calculated sizeContainerStyle', this.sizeContainerStyle);
|
|
1993
1988
|
this.overlayStyle = this.overlayToClass(state?.paneOverlay);
|
|
1994
1989
|
}
|
|
1995
1990
|
overlayToClass(overlay) {
|
|
@@ -2037,11 +2032,11 @@ class SidePaneComponent {
|
|
|
2037
2032
|
this.onComplete.emit(true);
|
|
2038
2033
|
}
|
|
2039
2034
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2040
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2035
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: SidePaneComponent, isStandalone: false, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"], size: ["pane-size", "size"], params: "params", template: "template" }, outputs: { onComplete: "onComplete", onOpen: "onOpen", onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "@if(showPane) {\n<div class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\n <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\n <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\n <div [class]=\"sizeContainerStyle\">\n <div class=\"side-pane\">\n @if(template) { <ng-container *ngTemplateOutlet=\"template; context: {params: params}\"></ng-container> }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
2041
2036
|
}
|
|
2042
2037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SidePaneComponent, decorators: [{
|
|
2043
2038
|
type: Component,
|
|
2044
|
-
args: [{ selector: 'lib-side-pane', standalone: false, template: "<div
|
|
2039
|
+
args: [{ selector: 'lib-side-pane', standalone: false, template: "@if(showPane) {\n<div class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\n <div [class]=\"showPane ? overlayStyle : 'hidden'\" aria-hidden=\"true\"></div>\n <div [class]=\"showPane ? 'side-pane-container' : 'hidden'\">\n <div [class]=\"sizeContainerStyle\">\n <div class=\"side-pane\">\n @if(template) { <ng-container *ngTemplateOutlet=\"template; context: {params: params}\"></ng-container> }\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n}\n" }]
|
|
2045
2040
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
2046
2041
|
type: Inject,
|
|
2047
2042
|
args: [DOCUMENT]
|
|
@@ -2057,6 +2052,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
2057
2052
|
type: Output
|
|
2058
2053
|
}], onClose: [{
|
|
2059
2054
|
type: Output
|
|
2055
|
+
}], params: [{
|
|
2056
|
+
type: Input,
|
|
2057
|
+
args: ['params']
|
|
2058
|
+
}], template: [{
|
|
2059
|
+
type: Input
|
|
2060
2060
|
}] } });
|
|
2061
2061
|
|
|
2062
2062
|
class NavLinksListComponent {
|
|
@@ -2079,11 +2079,11 @@ class NavLinksListComponent {
|
|
|
2079
2079
|
this.fragmentSub$ = this.activeFragment?.subscribe(fragment => this.fragmentValue = fragment);
|
|
2080
2080
|
}
|
|
2081
2081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2082
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NavLinksListComponent, isStandalone: false, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"], showText: ["show-text", "showText"], largeIcons: ["large-icons", "largeIcons"] }, ngImport: i0, template: "\
|
|
2082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NavLinksListComponent, isStandalone: false, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"], showText: ["show-text", "showText"], largeIcons: ["large-icons", "largeIcons"] }, ngImport: i0, template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n <div class=\"nav-link-list-container-inner\" [class.icons-only]=\"!showText\">\n <ng-container *ngFor=\"let link of links | async\">\n <ng-container [ngSwitch]=\"link.type\">\n <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\n <a *ngSwitchCase=\"'router'\"\n href=\"#\"\n [routerLink]=\"[link.path]\"\n [routerLinkActive]=\"navLinkActiveClass\"\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n [queryParams]=\"link.queryParams\"\n [class]=\"navLinkClass\"\n [class.min-nav-link-text-width]=\"showText\">\n <div class=\"inline-flex items-center\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\n </div>\n </a>\n <a *ngSwitchCase=\"'external'\"\n [href]=\"link.path\"\n [attr.target]=\"link.external ? '_blank' : '_self'\"\n [class]=\"navLinkClass\"\n [class.min-nav-link-text-width]=\"showText\">\n <div class=\"inline-flex items-center\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\n </div>\n </a>\n <a *ngSwitchCase=\"'fragment'\"\n routerLink=\".\"\n [fragment]=\"link.path\"\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\"\n [class.min-nav-link-text-width]=\"showText\">\n <div class=\"inline-flex items-center\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\n </div>\n </a>\n </ng-container>\n </ng-container>\n </div>\n</div>\n", 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
2083
2083
|
}
|
|
2084
2084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NavLinksListComponent, decorators: [{
|
|
2085
2085
|
type: Component,
|
|
2086
|
-
args: [{ selector: 'lib-nav-links-list', standalone: false, template: "\
|
|
2086
|
+
args: [{ selector: 'lib-nav-links-list', standalone: false, template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n <div class=\"nav-link-list-container-inner\" [class.icons-only]=\"!showText\">\n <ng-container *ngFor=\"let link of links | async\">\n <ng-container [ngSwitch]=\"link.type\">\n <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\n <a *ngSwitchCase=\"'router'\"\n href=\"#\"\n [routerLink]=\"[link.path]\"\n [routerLinkActive]=\"navLinkActiveClass\"\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n [queryParams]=\"link.queryParams\"\n [class]=\"navLinkClass\"\n [class.min-nav-link-text-width]=\"showText\">\n <div class=\"inline-flex items-center\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\n </div>\n </a>\n <a *ngSwitchCase=\"'external'\"\n [href]=\"link.path\"\n [attr.target]=\"link.external ? '_blank' : '_self'\"\n [class]=\"navLinkClass\"\n [class.min-nav-link-text-width]=\"showText\">\n <div class=\"inline-flex items-center\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\n </div>\n </a>\n <a *ngSwitchCase=\"'fragment'\"\n routerLink=\".\"\n [fragment]=\"link.path\"\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\"\n [class.min-nav-link-text-width]=\"showText\">\n <div class=\"inline-flex items-center\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\n </div>\n </a>\n </ng-container>\n </ng-container>\n </div>\n</div>\n" }]
|
|
2087
2087
|
}], ctorParameters: () => [], propDecorators: { links: [{
|
|
2088
2088
|
type: Input
|
|
2089
2089
|
}], activeFragment: [{
|
|
@@ -2188,11 +2188,11 @@ class ComboboxComponent {
|
|
|
2188
2188
|
this.onSearch.emit(searchTerm);
|
|
2189
2189
|
}
|
|
2190
2190
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ComboboxComponent, isStandalone: false, 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()\">\
|
|
2191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ComboboxComponent, isStandalone: false, 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()\">\n <form autocomplete=\"off\"\n [id]=\"id + '-form'\">\n <input [id]=\"id\"\n title=\"combobox input\"\n type=\"text\"\n (click)=\"onInputClick()\"\n (clickOutside)=\"onClickOutside()\"\n (keyup)=\"onInputKeyUp($event)\"\n class=\"combobox-input\"\n role=\"combobox\"\n aria-controls=\"options\"\n aria-expanded=\"false\"\n autocomplete=\"off\"\n list=\"autocomplete\"\n [value]=\"value || ''\"\n [placeholder]=\"placeholder || ''\">\n </form>\n <div class=\"combobox-icons\">\n <svg *ngIf=\"!busy\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-6 w-6 text-gray-400\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n stroke-width=\"2\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n <svg *ngIf=\"busy\"\n class=\"animate-spin h-6 w-6 text-gray-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\">\n </circle>\n <path class=\"opacity-75\"\n fill=\"currentColor\"\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>\n </svg>\n </div>\n <ul [id]=\"id + '-results'\"\n *ngIf=\"showResults && items.length > 0\"\n class=\"combobox-results\"\n role=\"listbox\">\n <li *ngFor=\"let item of items; let i = index\"\n [id]=\"'option-'+ i\"\n (click)=\"onListItemSelected(item)\"\n role=\"option\"\n tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n </ul>\n <div class=\"combobox-results\"\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\n </ng-container>\n </div>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\"\n role=\"list\"\n class=\"grid grid-cols-1\">\n <li *ngFor=\"let item of selectedItems; let i = index\"\n class=\"mt-3\">\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n</ul>\n<ng-template #defaultnoResultsTemplate\n let-searchTerm>\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\n</ng-template>\n<ng-template #defaultItemTemplate\n let-item>\n <span class=\"combobox-default-item-template\">{{ item }}</span>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate\n let-item>\n <div class=\"grid grid-cols-1\">\n <div class=\"combobox-selected-item-wrapper\">\n <div class=\"flex-1 min-w-0\">\n <div class=\"focus:outline-none\">\n <span class=\"absolute\"\n aria-hidden=\"true\">\n </span>\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\n </div>\n </div>\n <div class=\"ml-4 flex-shrink-0 flex\">\n <button type=\"button\"\n (click)=\"removeItem(item)\"\n class=\"combobox-selected-item-remove-btn\">\n <span class=\"sr-only\">Close</span>\n <svg class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\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\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\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"] }] }); }
|
|
2192
2192
|
}
|
|
2193
2193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
2194
2194
|
type: Component,
|
|
2195
|
-
args: [{ selector: 'lib-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\
|
|
2195
|
+
args: [{ selector: 'lib-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\n <form autocomplete=\"off\"\n [id]=\"id + '-form'\">\n <input [id]=\"id\"\n title=\"combobox input\"\n type=\"text\"\n (click)=\"onInputClick()\"\n (clickOutside)=\"onClickOutside()\"\n (keyup)=\"onInputKeyUp($event)\"\n class=\"combobox-input\"\n role=\"combobox\"\n aria-controls=\"options\"\n aria-expanded=\"false\"\n autocomplete=\"off\"\n list=\"autocomplete\"\n [value]=\"value || ''\"\n [placeholder]=\"placeholder || ''\">\n </form>\n <div class=\"combobox-icons\">\n <svg *ngIf=\"!busy\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-6 w-6 text-gray-400\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n stroke-width=\"2\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n <svg *ngIf=\"busy\"\n class=\"animate-spin h-6 w-6 text-gray-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\">\n </circle>\n <path class=\"opacity-75\"\n fill=\"currentColor\"\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>\n </svg>\n </div>\n <ul [id]=\"id + '-results'\"\n *ngIf=\"showResults && items.length > 0\"\n class=\"combobox-results\"\n role=\"listbox\">\n <li *ngFor=\"let item of items; let i = index\"\n [id]=\"'option-'+ i\"\n (click)=\"onListItemSelected(item)\"\n role=\"option\"\n tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n </ul>\n <div class=\"combobox-results\"\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\n </ng-container>\n </div>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\"\n role=\"list\"\n class=\"grid grid-cols-1\">\n <li *ngFor=\"let item of selectedItems; let i = index\"\n class=\"mt-3\">\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n</ul>\n<ng-template #defaultnoResultsTemplate\n let-searchTerm>\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\n</ng-template>\n<ng-template #defaultItemTemplate\n let-item>\n <span class=\"combobox-default-item-template\">{{ item }}</span>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate\n let-item>\n <div class=\"grid grid-cols-1\">\n <div class=\"combobox-selected-item-wrapper\">\n <div class=\"flex-1 min-w-0\">\n <div class=\"focus:outline-none\">\n <span class=\"absolute\"\n aria-hidden=\"true\">\n </span>\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\n </div>\n </div>\n <div class=\"ml-4 flex-shrink-0 flex\">\n <button type=\"button\"\n (click)=\"removeItem(item)\"\n class=\"combobox-selected-item-remove-btn\">\n <span class=\"sr-only\">Close</span>\n <svg class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\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\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</ng-template>" }]
|
|
2196
2196
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2197
2197
|
type: Input
|
|
2198
2198
|
}], placeholder: [{
|
|
@@ -2291,11 +2291,11 @@ class EnhancedComboboxComponent {
|
|
|
2291
2291
|
this.onShowMore.emit();
|
|
2292
2292
|
}
|
|
2293
2293
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EnhancedComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2294
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: EnhancedComboboxComponent, isStandalone: false, selector: "lib-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()\">\
|
|
2294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: EnhancedComboboxComponent, isStandalone: false, selector: "lib-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()\">\n <form autocomplete=\"off\"\n [id]=\"id + '-form'\">\n <input [id]=\"id\"\n title=\"combobox input\"\n type=\"text\"\n (click)=\"onInputClick()\"\n (clickOutside)=\"onClickOutside()\"\n (keyup)=\"onInputKeyUp($event)\"\n class=\"combobox-input\"\n role=\"combobox\"\n aria-controls=\"options\"\n aria-expanded=\"false\"\n autocomplete=\"off\"\n list=\"autocomplete\"\n [value]=\"value || ''\"\n [placeholder]=\"placeholder || ''\">\n </form>\n <div class=\"combobox-icons\">\n <svg *ngIf=\"!busy\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-6 w-6 text-gray-400\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n stroke-width=\"2\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n <svg *ngIf=\"busy\"\n class=\"animate-spin h-6 w-6 text-gray-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\">\n </circle>\n <path class=\"opacity-75\"\n fill=\"currentColor\"\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>\n </svg>\n </div>\n <ul [id]=\"id + '-results'\"\n *ngIf=\"showResults && items.length > 0\"\n class=\"combobox-results\"\n role=\"listbox\">\n <li *ngFor=\"let item of items; let i = index\"\n [id]=\"'option-'+ i\"\n (click)=\"onListItemSelected(item)\"\n role=\"option\"\n tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n <li *ngIf=\"displayShowMoreOption\"\n role=\"option\"\n tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"showMoreItemTemplate\" />\n </li>\n </ul>\n <div class=\"combobox-results\"\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\n </ng-container>\n </div>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\"\n role=\"list\"\n class=\"grid grid-cols-1\">\n <li *ngFor=\"let item of selectedItems; let i = index\"\n class=\"mt-3\">\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n</ul>\n<ng-template #defaultnoResultsTemplate\n let-searchTerm>\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\n</ng-template>\n<ng-template #defaultItemTemplate\n let-item>\n <span class=\"combobox-default-item-template\">{{ item }}</span>\n</ng-template>\n<ng-template #showMoreItemTemplate>\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>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate\n let-item>\n <div class=\"grid grid-cols-1\">\n <div class=\"combobox-selected-item-wrapper\">\n <div class=\"flex-1 min-w-0\">\n <div class=\"focus:outline-none\">\n <span class=\"absolute\"\n aria-hidden=\"true\">\n </span>\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\n </div>\n </div>\n <div class=\"ml-4 flex-shrink-0 flex\">\n <button type=\"button\"\n (click)=\"removeItem(item)\"\n class=\"combobox-selected-item-remove-btn\">\n <span class=\"sr-only\">Close</span>\n <svg class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\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\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\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"] }] }); }
|
|
2295
2295
|
}
|
|
2296
2296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EnhancedComboboxComponent, decorators: [{
|
|
2297
2297
|
type: Component,
|
|
2298
|
-
args: [{ selector: 'lib-enhanced-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\
|
|
2298
|
+
args: [{ selector: 'lib-enhanced-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\n <form autocomplete=\"off\"\n [id]=\"id + '-form'\">\n <input [id]=\"id\"\n title=\"combobox input\"\n type=\"text\"\n (click)=\"onInputClick()\"\n (clickOutside)=\"onClickOutside()\"\n (keyup)=\"onInputKeyUp($event)\"\n class=\"combobox-input\"\n role=\"combobox\"\n aria-controls=\"options\"\n aria-expanded=\"false\"\n autocomplete=\"off\"\n list=\"autocomplete\"\n [value]=\"value || ''\"\n [placeholder]=\"placeholder || ''\">\n </form>\n <div class=\"combobox-icons\">\n <svg *ngIf=\"!busy\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-6 w-6 text-gray-400\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n stroke-width=\"2\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n <svg *ngIf=\"busy\"\n class=\"animate-spin h-6 w-6 text-gray-400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\">\n </circle>\n <path class=\"opacity-75\"\n fill=\"currentColor\"\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>\n </svg>\n </div>\n <ul [id]=\"id + '-results'\"\n *ngIf=\"showResults && items.length > 0\"\n class=\"combobox-results\"\n role=\"listbox\">\n <li *ngFor=\"let item of items; let i = index\"\n [id]=\"'option-'+ i\"\n (click)=\"onListItemSelected(item)\"\n role=\"option\"\n tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n <li *ngIf=\"displayShowMoreOption\"\n role=\"option\"\n tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"showMoreItemTemplate\" />\n </li>\n </ul>\n <div class=\"combobox-results\"\n *ngIf=\"noResultsTemplate && items.length === 0 && !busy\">\n <ng-container [ngTemplateOutlet]=\"noResultsTemplate || defaultnoResultsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: searchTerm }\">\n </ng-container>\n </div>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\"\n role=\"list\"\n class=\"grid grid-cols-1\">\n <li *ngFor=\"let item of selectedItems; let i = index\"\n class=\"mt-3\">\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\n </ng-container>\n </li>\n</ul>\n<ng-template #defaultnoResultsTemplate\n let-searchTerm>\n <span class=\"combobox-default-item-template\">No results found for <i>{{ searchTerm }}</i></span>\n</ng-template>\n<ng-template #defaultItemTemplate\n let-item>\n <span class=\"combobox-default-item-template\">{{ item }}</span>\n</ng-template>\n<ng-template #showMoreItemTemplate>\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>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate\n let-item>\n <div class=\"grid grid-cols-1\">\n <div class=\"combobox-selected-item-wrapper\">\n <div class=\"flex-1 min-w-0\">\n <div class=\"focus:outline-none\">\n <span class=\"absolute\"\n aria-hidden=\"true\">\n </span>\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\n </div>\n </div>\n <div class=\"ml-4 flex-shrink-0 flex\">\n <button type=\"button\"\n (click)=\"removeItem(item)\"\n class=\"combobox-selected-item-remove-btn\">\n <span class=\"sr-only\">Close</span>\n <svg class=\"h-5 w-5\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\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\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</ng-template>" }]
|
|
2299
2299
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2300
2300
|
type: Input
|
|
2301
2301
|
}], placeholder: [{
|
|
@@ -2368,20 +2368,20 @@ class LibTabComponent {
|
|
|
2368
2368
|
this.id = this.id || uuid.v4();
|
|
2369
2369
|
}
|
|
2370
2370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabComponent, deps: [{ token: LIBTABGROUP_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibTabComponent, isStandalone: false, selector: "lib-tab", inputs: { id: "id", labelText: "labelText" }, queries: [{ propertyName: "label", first: true, predicate: LibTabLabelDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
2372
|
-
<ng-template>
|
|
2373
|
-
<ng-content></ng-content>
|
|
2374
|
-
</ng-template>
|
|
2371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibTabComponent, isStandalone: false, selector: "lib-tab", inputs: { id: "id", labelText: "labelText" }, queries: [{ propertyName: "label", first: true, predicate: LibTabLabelDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
2372
|
+
<ng-template>
|
|
2373
|
+
<ng-content></ng-content>
|
|
2374
|
+
</ng-template>
|
|
2375
2375
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2376
2376
|
}
|
|
2377
2377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabComponent, decorators: [{
|
|
2378
2378
|
type: Component,
|
|
2379
2379
|
args: [{
|
|
2380
2380
|
selector: 'lib-tab',
|
|
2381
|
-
template: `
|
|
2382
|
-
<ng-template>
|
|
2383
|
-
<ng-content></ng-content>
|
|
2384
|
-
</ng-template>
|
|
2381
|
+
template: `
|
|
2382
|
+
<ng-template>
|
|
2383
|
+
<ng-content></ng-content>
|
|
2384
|
+
</ng-template>
|
|
2385
2385
|
`,
|
|
2386
2386
|
encapsulation: ViewEncapsulation.None,
|
|
2387
2387
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -2450,13 +2450,13 @@ class LibTabGroupComponent {
|
|
|
2450
2450
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2451
2451
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibTabGroupComponent, isStandalone: false, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
|
|
2452
2452
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
2453
|
-
], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\
|
|
2453
|
+
], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\n <label for=\"tabs\"\n class=\"sr-only\">\n Select a tab\n </label>\n <select id=\"tabs\"\n name=\"tabs\"\n (change)=\"onTabSelectChanged(+tabsSelect.value)\"\n class=\"tab-group-select\"\n #tabsSelect>\n <option [value]=\"i\"\n *ngFor=\"let tab of tabs; let i = index\">\n {{ tab.labelText }}\n </option>\n </select>\n</div>\n<div class=\"tab-group-container-hidden\">\n <div class=\"tab-group-container\">\n <nav class=\"tab-group-container-nav\"\n aria-label=\"Tabs\">\n <a *ngFor=\"let tab of tabs\"\n href=\"javascript:void(0)\"\n [class.tab]=\"!tab.isActive\"\n [class.tab-active]=\"tab.isActive\"\n (click)=\"onTabChanged(tab)\">\n <ng-container *ngTemplateOutlet=\"tab.label ? tab.label.template: defaultTabLabel; context:{ $implicit: tab }\"></ng-container>\n </a>\n </nav>\n </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n <ng-container [ngTemplateOutlet]=\"currentTab?.content || emptyTemplate\"></ng-container>\n</div>\n<ng-template let-tab\n #defaultTabLabel>\n {{ tab.labelText || 'tab-' + (tab.index + 1) }}\n</ng-template>\n<ng-template #emptyTemplate></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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] }); }
|
|
2454
2454
|
}
|
|
2455
2455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabGroupComponent, decorators: [{
|
|
2456
2456
|
type: Component,
|
|
2457
2457
|
args: [{ selector: 'lib-tab-group', providers: [
|
|
2458
2458
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
2459
|
-
], standalone: false, template: "<div class=\"tab-group-select-hidden\">\
|
|
2459
|
+
], standalone: false, template: "<div class=\"tab-group-select-hidden\">\n <label for=\"tabs\"\n class=\"sr-only\">\n Select a tab\n </label>\n <select id=\"tabs\"\n name=\"tabs\"\n (change)=\"onTabSelectChanged(+tabsSelect.value)\"\n class=\"tab-group-select\"\n #tabsSelect>\n <option [value]=\"i\"\n *ngFor=\"let tab of tabs; let i = index\">\n {{ tab.labelText }}\n </option>\n </select>\n</div>\n<div class=\"tab-group-container-hidden\">\n <div class=\"tab-group-container\">\n <nav class=\"tab-group-container-nav\"\n aria-label=\"Tabs\">\n <a *ngFor=\"let tab of tabs\"\n href=\"javascript:void(0)\"\n [class.tab]=\"!tab.isActive\"\n [class.tab-active]=\"tab.isActive\"\n (click)=\"onTabChanged(tab)\">\n <ng-container *ngTemplateOutlet=\"tab.label ? tab.label.template: defaultTabLabel; context:{ $implicit: tab }\"></ng-container>\n </a>\n </nav>\n </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n <ng-container [ngTemplateOutlet]=\"currentTab?.content || emptyTemplate\"></ng-container>\n</div>\n<ng-template let-tab\n #defaultTabLabel>\n {{ tab.labelText || 'tab-' + (tab.index + 1) }}\n</ng-template>\n<ng-template #emptyTemplate></ng-template>" }]
|
|
2460
2460
|
}], ctorParameters: () => [], propDecorators: { tabs: [{
|
|
2461
2461
|
type: ContentChildren,
|
|
2462
2462
|
args: [LibTabComponent, { descendants: true }]
|
|
@@ -2532,20 +2532,20 @@ class LibStepComponent {
|
|
|
2532
2532
|
return StepState.Upcoming;
|
|
2533
2533
|
}
|
|
2534
2534
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepComponent, deps: [{ token: LIBSTEPPER_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2535
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibStepComponent, isStandalone: false, selector: "lib-step", inputs: { class: "class", stepControl: "stepControl" }, queries: [{ propertyName: "stepLabel", first: true, predicate: LibStepLabelDirective, descendants: true }, { propertyName: "stepInfo", first: true, predicate: LibStepInfoDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
2536
|
-
<ng-template>
|
|
2537
|
-
<ng-content></ng-content>
|
|
2538
|
-
</ng-template>
|
|
2535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibStepComponent, isStandalone: false, selector: "lib-step", inputs: { class: "class", stepControl: "stepControl" }, queries: [{ propertyName: "stepLabel", first: true, predicate: LibStepLabelDirective, descendants: true }, { propertyName: "stepInfo", first: true, predicate: LibStepInfoDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
2536
|
+
<ng-template>
|
|
2537
|
+
<ng-content></ng-content>
|
|
2538
|
+
</ng-template>
|
|
2539
2539
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2540
2540
|
}
|
|
2541
2541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepComponent, decorators: [{
|
|
2542
2542
|
type: Component,
|
|
2543
2543
|
args: [{
|
|
2544
2544
|
selector: 'lib-step',
|
|
2545
|
-
template: `
|
|
2546
|
-
<ng-template>
|
|
2547
|
-
<ng-content></ng-content>
|
|
2548
|
-
</ng-template>
|
|
2545
|
+
template: `
|
|
2546
|
+
<ng-template>
|
|
2547
|
+
<ng-content></ng-content>
|
|
2548
|
+
</ng-template>
|
|
2549
2549
|
`,
|
|
2550
2550
|
encapsulation: ViewEncapsulation.None,
|
|
2551
2551
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -2665,13 +2665,13 @@ class LibStepperComponent {
|
|
|
2665
2665
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2666
2666
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LibStepperComponent, isStandalone: false, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
|
|
2667
2667
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2668
|
-
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- Bullets -->\r\n <nav class=\"stepper-bullets-container\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Bullets\">\r\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n <ol role=\"list\"\r\n class=\"stepper-bullets-ol\">\r\n <li class=\"cursor-pointer\"\r\n *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\">\r\n <!-- Completed Step -->\r\n <div class=\"stepper-bullets-completed-step\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"stepper-bullets-active-step\"\r\n aria-current=\"step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-active-step-level1\"\r\n aria-hidden=\"true\">\r\n <span class=\"stepper-bullets-active-step-level1\"></span>\r\n </span>\r\n <span class=\"stepper-bullets-active-step-bullet\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div href=\"#\"\r\n class=\"stepper-bullets-upcoming-step\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Bullets & Text -->\r\n <div class=\"stepper-bullets-and-text-container\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n <nav aria-label=\"Progress\">\r\n <ol role=\"list\"\r\n class=\"stepper-bullets-and-text-ol\">\r\n <li class=\"cursor-pointer\"\r\n *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\">\r\n <!-- Complete Step -->\r\n <div class=\"group\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"stepper-bullets-and-text-completed-step\">\r\n <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\"\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=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-completed-step-container\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"stepper-bullets-and-text-active-step\"\r\n aria-current=\"step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-and-text-active-step-level1\"\r\n aria-hidden=\"true\">\r\n <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-active-step-container\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step-level1\"\r\n aria-hidden=\"true\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n </div>\r\n <p class=\"stepper-bullets-and-text-upcoming-step-container\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </p>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Circles -->\r\n <nav class=\"flex justify-center\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Circles\">\r\n <ol class=\"flex items-center\"\r\n role=\"list\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"absolute inset-0 flex items-center\"\r\n aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n <svg class=\"w-5 h-5 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"absolute inset-0 flex items-center\"\r\n aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\"\r\n aria-current=\"step\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"\r\n aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"absolute inset-0 flex items-center\"\r\n aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"\r\n aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Circles With Text -->\r\n <nav class=\"flex items-center justify-center\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n <ol role=\"list\"\r\n class=\"overflow-hidden\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"relative pb-10 cursor-pointer\">\r\n <!-- Complete Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-5 h-5 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\"\r\n aria-current=\"step\">\r\n <span class=\"h-9 flex items-center\"\r\n aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"!step.isLast\"></div>\r\n <div href=\"#\"\r\n class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\"\r\n aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels -->\r\n <nav aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Panels\">\r\n <ol role=\"list\"\r\n class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n <!-- Completed step -->\r\n <div class=\"group flex items-center w-full\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-6 h-6 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-900\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active step -->\r\n <div class=\"px-6 py-4 flex items-center text-sm font-medium\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-blue-600\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming step -->\r\n <div class=\"group flex items-center\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Arrow separator for lg screens and up -->\r\n <div *ngIf=\"!step.isLast\"\r\n class=\"hidden md:block absolute top-0 right-0 h-full w-5\"\r\n aria-hidden=\"true\">\r\n <svg class=\"h-full w-full text-gray-300\"\r\n viewBox=\"0 0 22 80\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"none\">\r\n <path d=\"M0 -2L20 40L0 82\"\r\n vector-effect=\"non-scaling-stroke\"\r\n stroke=\"currentcolor\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels With Border -->\r\n <div class=\"panels-with-border-container\"\r\n *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n <nav class=\"panels-with-border-nav\"\r\n aria-label=\"Progress\">\r\n <ol role=\"list\"\r\n class=\"panels-with-border-ol\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"panels-with-border-li\">\r\n <!-- Completed Step -->\r\n <div class=\"panels-with-border-completed-step\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-completed-step-level1\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level2\">\r\n <span class=\"panels-with-border-completed-step-level21\">\r\n <span class=\"panels-with-border-completed-step-level211\">\r\n <svg class=\"w-6 h-6 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level22\">\r\n <span class=\"panels-with-border-completed-step-level221\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level222\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"panels-with-border-active-step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <div aria-current=\"step\">\r\n <span class=\"panels-with-border-active-step-level1\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"panels-with-border-active-step-level2\">\r\n <span class=\"panels-with-border-active-step-level21\">\r\n <span class=\"panels-with-border-active-step-level211\">\r\n <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-active-step-level22\">\r\n <span class=\"panels-with-border-active-step-level221\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"panels-with-border-active-step-level222\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"panels-with-border-step-separator\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\"\r\n viewBox=\"0 0 12 82\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n stroke=\"currentcolor\"\r\n vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"panels-with-border-upcoming-step\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-upcoming-step-level1\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"panels-with-border-upcoming-step-level2\">\r\n <span class=\"panels-with-border-upcoming-step-level21\">\r\n <span class=\"panels-with-border-upcoming-step-level211\">\r\n <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-upcoming-step-level22\">\r\n <span class=\"panels-with-border-upcoming-step-level221\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm font-medium text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"panels-with-border-step-separator\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\"\r\n viewBox=\"0 0 12 82\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n stroke=\"currentcolor\"\r\n vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Progress -->\r\n <div *ngSwitchCase=\"StepperType.Progress\">\r\n <div class=\"mt-6\"\r\n aria-hidden=\"true\">\r\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n <div class=\"h-2 bg-blue-600 rounded-full\"\r\n [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\">\r\n </div>\r\n </div>\r\n <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n <div *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"text-blue-600 cursor-pointer\">\r\n <ng-container *ngIf=\"step.stepLabel\"\r\n [ngTemplateOutlet]=\"step.stepLabel.template\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Simple -->\r\n <nav aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Simple\">\r\n <ol role=\"list\"\r\n class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"md:flex-1 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n aria-current=\"step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n <ng-container *ngIf=\"step.state === StepState.Active\"\r\n [ngTemplateOutlet]=\"step.content\">\r\n </ng-container>\r\n</ng-container>", 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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
|
|
2668
|
+
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <!-- Bullets -->\n <nav class=\"stepper-bullets-container\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Bullets\">\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n <ol role=\"list\"\n class=\"stepper-bullets-ol\">\n <li class=\"cursor-pointer\"\n *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\">\n <!-- Completed Step -->\n <div class=\"stepper-bullets-completed-step\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n <!-- Active Step -->\n <div class=\"stepper-bullets-active-step\"\n aria-current=\"step\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-active-step-level1\"\n aria-hidden=\"true\">\n <span class=\"stepper-bullets-active-step-level1\"></span>\n </span>\n <span class=\"stepper-bullets-active-step-bullet\"\n aria-hidden=\"true\">\n </span>\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n <!-- Upcoming Step -->\n <div href=\"#\"\n class=\"stepper-bullets-upcoming-step\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n </li>\n </ol>\n </nav>\n <!-- Bullets & Text -->\n <div class=\"stepper-bullets-and-text-container\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.BulletsAndText\">\n <nav aria-label=\"Progress\">\n <ol role=\"list\"\n class=\"stepper-bullets-and-text-ol\">\n <li class=\"cursor-pointer\"\n *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\">\n <!-- Complete Step -->\n <div class=\"group\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"stepper-bullets-and-text-completed-step\">\n <span class=\"stepper-bullets-and-text-completed-step-level1\">\n <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n <span class=\"stepper-bullets-and-text-completed-step-container\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </span>\n </div>\n <!-- Active Step -->\n <div class=\"stepper-bullets-and-text-active-step\"\n aria-current=\"step\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-and-text-active-step-level1\"\n aria-hidden=\"true\">\n <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\n <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\n </span>\n <span class=\"stepper-bullets-and-text-active-step-container\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming Step -->\n <div class=\"group\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"stepper-bullets-and-text-upcoming-step\">\n <div class=\"stepper-bullets-and-text-upcoming-step-level1\"\n aria-hidden=\"true\">\n <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\n </div>\n <p class=\"stepper-bullets-and-text-upcoming-step-container\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </p>\n </div>\n </div>\n </li>\n </ol>\n </nav>\n </div>\n <!-- Circles -->\n <nav class=\"flex justify-center\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Circles\">\n <ol class=\"flex items-center\"\n role=\"list\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n <!-- Completed Step -->\n <ng-container *ngIf=\"step.state === StepState.Completed\">\n <div class=\"absolute inset-0 flex items-center\"\n aria-hidden=\"true\">\n <div class=\"h-0.5 w-full bg-blue-600\"></div>\n </div>\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n <svg class=\"w-5 h-5 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n </div>\n </ng-container>\n <!-- Active Step -->\n <ng-container *ngIf=\"step.state === StepState.Active\">\n <div class=\"absolute inset-0 flex items-center\"\n aria-hidden=\"true\">\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\n </div>\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\"\n aria-current=\"step\">\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"\n aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n </div>\n </ng-container>\n <!-- Upcoming Step -->\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"absolute inset-0 flex items-center\"\n aria-hidden=\"true\">\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\n </div>\n <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"\n aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n </div>\n </ng-container>\n </li>\n </ol>\n </nav>\n <!-- Circles With Text -->\n <nav class=\"flex items-center justify-center\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.CirclesWithText\">\n <ol role=\"list\"\n class=\"overflow-hidden\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"relative pb-10 cursor-pointer\">\n <!-- Complete Step -->\n <ng-container *ngIf=\"step.state === StepState.Completed\">\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\"\n aria-hidden=\"true\"\n *ngIf=\"!step.isLast\"></div>\n <div class=\"relative flex items-start group\">\n <span class=\"h-9 flex items-center\">\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n <svg class=\"w-5 h-5 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </div>\n </ng-container>\n <!-- Active Step -->\n <ng-container *ngIf=\"step.state === StepState.Active\">\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\n aria-hidden=\"true\"\n *ngIf=\"!step.isLast\"></div>\n <div class=\"relative flex items-start group\"\n aria-current=\"step\">\n <span class=\"h-9 flex items-center\"\n aria-hidden=\"true\">\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n </span>\n </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </div>\n </ng-container>\n <!-- Upcoming Step -->\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\n aria-hidden=\"true\"\n *ngIf=\"!step.isLast\"></div>\n <div href=\"#\"\n class=\"relative flex items-start group\">\n <span class=\"h-9 flex items-center\"\n aria-hidden=\"true\">\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n </span>\n </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </div>\n </ng-container>\n </li>\n </ol>\n </nav>\n <!-- Panels -->\n <nav aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Panels\">\n <ol role=\"list\"\n class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"relative md:flex-1 md:flex cursor-pointer\">\n <!-- Completed step -->\n <div class=\"group flex items-center w-full\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n <svg class=\"w-6 h-6 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n <span class=\"ml-4 text-sm font-medium text-gray-900\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </span>\n </div>\n <!-- Active step -->\n <div class=\"px-6 py-4 flex items-center text-sm font-medium\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n </span>\n <span class=\"ml-4 text-sm font-medium text-blue-600\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming step -->\n <div class=\"group flex items-center\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n </span>\n <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </span>\n </div>\n <!-- Arrow separator for lg screens and up -->\n <div *ngIf=\"!step.isLast\"\n class=\"hidden md:block absolute top-0 right-0 h-full w-5\"\n aria-hidden=\"true\">\n <svg class=\"h-full w-full text-gray-300\"\n viewBox=\"0 0 22 80\"\n fill=\"none\"\n preserveAspectRatio=\"none\">\n <path d=\"M0 -2L20 40L0 82\"\n vector-effect=\"non-scaling-stroke\"\n stroke=\"currentcolor\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </li>\n </ol>\n </nav>\n <!-- Panels With Border -->\n <div class=\"panels-with-border-container\"\n *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n <nav class=\"panels-with-border-nav\"\n aria-label=\"Progress\">\n <ol role=\"list\"\n class=\"panels-with-border-ol\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"panels-with-border-li\">\n <!-- Completed Step -->\n <div class=\"panels-with-border-completed-step\"\n *ngIf=\"step.state === StepState.Completed\">\n <div class=\"group\">\n <span class=\"panels-with-border-completed-step-level1\"\n aria-hidden=\"true\">\n </span>\n <span class=\"panels-with-border-completed-step-level2\">\n <span class=\"panels-with-border-completed-step-level21\">\n <span class=\"panels-with-border-completed-step-level211\">\n <svg class=\"w-6 h-6 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n </span>\n <span class=\"panels-with-border-completed-step-level22\">\n <span class=\"panels-with-border-completed-step-level221\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-completed-step-level222\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </span>\n </div>\n </div>\n <!-- Active Step -->\n <div class=\"panels-with-border-active-step\"\n *ngIf=\"step.state === StepState.Active\">\n <div aria-current=\"step\">\n <span class=\"panels-with-border-active-step-level1\"\n aria-hidden=\"true\">\n </span>\n <span class=\"panels-with-border-active-step-level2\">\n <span class=\"panels-with-border-active-step-level21\">\n <span class=\"panels-with-border-active-step-level211\">\n <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\n </span>\n </span>\n <span class=\"panels-with-border-active-step-level22\">\n <span class=\"panels-with-border-active-step-level221\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-active-step-level222\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </span>\n </div>\n <!-- Separator -->\n <div class=\"panels-with-border-step-separator\"\n aria-hidden=\"true\"\n *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\"\n viewBox=\"0 0 12 82\"\n fill=\"none\"\n preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\n stroke=\"currentcolor\"\n vector-effect=\"non-scaling-stroke\" />\n </svg>\n </div>\n </div>\n <!-- Upcoming Step -->\n <div class=\"panels-with-border-upcoming-step\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"group\">\n <span class=\"panels-with-border-upcoming-step-level1\"\n aria-hidden=\"true\">\n </span>\n <span class=\"panels-with-border-upcoming-step-level2\">\n <span class=\"panels-with-border-upcoming-step-level21\">\n <span class=\"panels-with-border-upcoming-step-level211\">\n <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\n </span>\n </span>\n <span class=\"panels-with-border-upcoming-step-level22\">\n <span class=\"panels-with-border-upcoming-step-level221\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm font-medium text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </span>\n </div>\n <!-- Separator -->\n <div class=\"panels-with-border-step-separator\"\n aria-hidden=\"true\"\n *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\"\n viewBox=\"0 0 12 82\"\n fill=\"none\"\n preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\n stroke=\"currentcolor\"\n vector-effect=\"non-scaling-stroke\" />\n </svg>\n </div>\n </div>\n </li>\n </ol>\n </nav>\n </div>\n <!-- Progress -->\n <div *ngSwitchCase=\"StepperType.Progress\">\n <div class=\"mt-6\"\n aria-hidden=\"true\">\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-2 bg-blue-600 rounded-full\"\n [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\">\n </div>\n </div>\n <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n <div *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"text-blue-600 cursor-pointer\">\n <ng-container *ngIf=\"step.stepLabel\"\n [ngTemplateOutlet]=\"step.stepLabel.template\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <!-- Simple -->\n <nav aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Simple\">\n <ol role=\"list\"\n class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"md:flex-1 cursor-pointer\">\n <!-- Completed Step -->\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n <span class=\"text-sm font-medium\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Active Step -->\n <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\n aria-current=\"step\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n <span class=\"text-sm font-medium\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming Step -->\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n <span class=\"text-sm font-medium\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n </li>\n </ol>\n </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n <ng-container *ngIf=\"step.state === StepState.Active\"\n [ngTemplateOutlet]=\"step.content\">\n </ng-container>\n</ng-container>", 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: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
|
|
2669
2669
|
}
|
|
2670
2670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepperComponent, decorators: [{
|
|
2671
2671
|
type: Component,
|
|
2672
2672
|
args: [{ selector: 'lib-stepper', providers: [
|
|
2673
2673
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2674
|
-
], standalone: false, template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- Bullets -->\r\n <nav class=\"stepper-bullets-container\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Bullets\">\r\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n <ol role=\"list\"\r\n class=\"stepper-bullets-ol\">\r\n <li class=\"cursor-pointer\"\r\n *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\">\r\n <!-- Completed Step -->\r\n <div class=\"stepper-bullets-completed-step\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"stepper-bullets-active-step\"\r\n aria-current=\"step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-active-step-level1\"\r\n aria-hidden=\"true\">\r\n <span class=\"stepper-bullets-active-step-level1\"></span>\r\n </span>\r\n <span class=\"stepper-bullets-active-step-bullet\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div href=\"#\"\r\n class=\"stepper-bullets-upcoming-step\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Bullets & Text -->\r\n <div class=\"stepper-bullets-and-text-container\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n <nav aria-label=\"Progress\">\r\n <ol role=\"list\"\r\n class=\"stepper-bullets-and-text-ol\">\r\n <li class=\"cursor-pointer\"\r\n *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\">\r\n <!-- Complete Step -->\r\n <div class=\"group\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"stepper-bullets-and-text-completed-step\">\r\n <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\"\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=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-completed-step-container\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"stepper-bullets-and-text-active-step\"\r\n aria-current=\"step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-and-text-active-step-level1\"\r\n aria-hidden=\"true\">\r\n <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-active-step-container\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step-level1\"\r\n aria-hidden=\"true\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n </div>\r\n <p class=\"stepper-bullets-and-text-upcoming-step-container\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </p>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Circles -->\r\n <nav class=\"flex justify-center\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Circles\">\r\n <ol class=\"flex items-center\"\r\n role=\"list\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"absolute inset-0 flex items-center\"\r\n aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n <svg class=\"w-5 h-5 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"absolute inset-0 flex items-center\"\r\n aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\"\r\n aria-current=\"step\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"\r\n aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"absolute inset-0 flex items-center\"\r\n aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"\r\n aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Circles With Text -->\r\n <nav class=\"flex items-center justify-center\"\r\n aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n <ol role=\"list\"\r\n class=\"overflow-hidden\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"relative pb-10 cursor-pointer\">\r\n <!-- Complete Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-5 h-5 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\"\r\n aria-current=\"step\">\r\n <span class=\"h-9 flex items-center\"\r\n aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"!step.isLast\"></div>\r\n <div href=\"#\"\r\n class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\"\r\n aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels -->\r\n <nav aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Panels\">\r\n <ol role=\"list\"\r\n class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n <!-- Completed step -->\r\n <div class=\"group flex items-center w-full\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-6 h-6 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-900\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active step -->\r\n <div class=\"px-6 py-4 flex items-center text-sm font-medium\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-blue-600\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming step -->\r\n <div class=\"group flex items-center\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Arrow separator for lg screens and up -->\r\n <div *ngIf=\"!step.isLast\"\r\n class=\"hidden md:block absolute top-0 right-0 h-full w-5\"\r\n aria-hidden=\"true\">\r\n <svg class=\"h-full w-full text-gray-300\"\r\n viewBox=\"0 0 22 80\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"none\">\r\n <path d=\"M0 -2L20 40L0 82\"\r\n vector-effect=\"non-scaling-stroke\"\r\n stroke=\"currentcolor\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels With Border -->\r\n <div class=\"panels-with-border-container\"\r\n *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n <nav class=\"panels-with-border-nav\"\r\n aria-label=\"Progress\">\r\n <ol role=\"list\"\r\n class=\"panels-with-border-ol\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"panels-with-border-li\">\r\n <!-- Completed Step -->\r\n <div class=\"panels-with-border-completed-step\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-completed-step-level1\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level2\">\r\n <span class=\"panels-with-border-completed-step-level21\">\r\n <span class=\"panels-with-border-completed-step-level211\">\r\n <svg class=\"w-6 h-6 text-white\"\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=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level22\">\r\n <span class=\"panels-with-border-completed-step-level221\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level222\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"panels-with-border-active-step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <div aria-current=\"step\">\r\n <span class=\"panels-with-border-active-step-level1\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"panels-with-border-active-step-level2\">\r\n <span class=\"panels-with-border-active-step-level21\">\r\n <span class=\"panels-with-border-active-step-level211\">\r\n <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-active-step-level22\">\r\n <span class=\"panels-with-border-active-step-level221\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"panels-with-border-active-step-level222\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"panels-with-border-step-separator\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\"\r\n viewBox=\"0 0 12 82\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n stroke=\"currentcolor\"\r\n vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"panels-with-border-upcoming-step\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-upcoming-step-level1\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <span class=\"panels-with-border-upcoming-step-level2\">\r\n <span class=\"panels-with-border-upcoming-step-level21\">\r\n <span class=\"panels-with-border-upcoming-step-level211\">\r\n <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-upcoming-step-level22\">\r\n <span class=\"panels-with-border-upcoming-step-level221\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm font-medium text-gray-500\"\r\n *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"panels-with-border-step-separator\"\r\n aria-hidden=\"true\"\r\n *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\"\r\n viewBox=\"0 0 12 82\"\r\n fill=\"none\"\r\n preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\r\n stroke=\"currentcolor\"\r\n vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Progress -->\r\n <div *ngSwitchCase=\"StepperType.Progress\">\r\n <div class=\"mt-6\"\r\n aria-hidden=\"true\">\r\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n <div class=\"h-2 bg-blue-600 rounded-full\"\r\n [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\">\r\n </div>\r\n </div>\r\n <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n <div *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"text-blue-600 cursor-pointer\">\r\n <ng-container *ngIf=\"step.stepLabel\"\r\n [ngTemplateOutlet]=\"step.stepLabel.template\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Simple -->\r\n <nav aria-label=\"Progress\"\r\n *ngSwitchCase=\"StepperType.Simple\">\r\n <ol role=\"list\"\r\n class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n <li *ngFor=\"let step of steps\"\r\n (click)=\"onSelectStep(step)\"\r\n class=\"md:flex-1 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n aria-current=\"step\"\r\n *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\r\n *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\"\r\n *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n <ng-container *ngIf=\"step.state === StepState.Active\"\r\n [ngTemplateOutlet]=\"step.content\">\r\n </ng-container>\r\n</ng-container>" }]
|
|
2674
|
+
], standalone: false, template: "<ng-container [ngSwitch]=\"type\">\n <!-- Bullets -->\n <nav class=\"stepper-bullets-container\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Bullets\">\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n <ol role=\"list\"\n class=\"stepper-bullets-ol\">\n <li class=\"cursor-pointer\"\n *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\">\n <!-- Completed Step -->\n <div class=\"stepper-bullets-completed-step\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n <!-- Active Step -->\n <div class=\"stepper-bullets-active-step\"\n aria-current=\"step\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-active-step-level1\"\n aria-hidden=\"true\">\n <span class=\"stepper-bullets-active-step-level1\"></span>\n </span>\n <span class=\"stepper-bullets-active-step-bullet\"\n aria-hidden=\"true\">\n </span>\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n <!-- Upcoming Step -->\n <div href=\"#\"\n class=\"stepper-bullets-upcoming-step\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n </li>\n </ol>\n </nav>\n <!-- Bullets & Text -->\n <div class=\"stepper-bullets-and-text-container\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.BulletsAndText\">\n <nav aria-label=\"Progress\">\n <ol role=\"list\"\n class=\"stepper-bullets-and-text-ol\">\n <li class=\"cursor-pointer\"\n *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\">\n <!-- Complete Step -->\n <div class=\"group\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"stepper-bullets-and-text-completed-step\">\n <span class=\"stepper-bullets-and-text-completed-step-level1\">\n <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n <span class=\"stepper-bullets-and-text-completed-step-container\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </span>\n </div>\n <!-- Active Step -->\n <div class=\"stepper-bullets-and-text-active-step\"\n aria-current=\"step\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-and-text-active-step-level1\"\n aria-hidden=\"true\">\n <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\n <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\n </span>\n <span class=\"stepper-bullets-and-text-active-step-container\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming Step -->\n <div class=\"group\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"stepper-bullets-and-text-upcoming-step\">\n <div class=\"stepper-bullets-and-text-upcoming-step-level1\"\n aria-hidden=\"true\">\n <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\n </div>\n <p class=\"stepper-bullets-and-text-upcoming-step-container\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </p>\n </div>\n </div>\n </li>\n </ol>\n </nav>\n </div>\n <!-- Circles -->\n <nav class=\"flex justify-center\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Circles\">\n <ol class=\"flex items-center\"\n role=\"list\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n <!-- Completed Step -->\n <ng-container *ngIf=\"step.state === StepState.Completed\">\n <div class=\"absolute inset-0 flex items-center\"\n aria-hidden=\"true\">\n <div class=\"h-0.5 w-full bg-blue-600\"></div>\n </div>\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n <svg class=\"w-5 h-5 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n </div>\n </ng-container>\n <!-- Active Step -->\n <ng-container *ngIf=\"step.state === StepState.Active\">\n <div class=\"absolute inset-0 flex items-center\"\n aria-hidden=\"true\">\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\n </div>\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\"\n aria-current=\"step\">\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"\n aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n </div>\n </ng-container>\n <!-- Upcoming Step -->\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"absolute inset-0 flex items-center\"\n aria-hidden=\"true\">\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\n </div>\n <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"\n aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n </div>\n </ng-container>\n </li>\n </ol>\n </nav>\n <!-- Circles With Text -->\n <nav class=\"flex items-center justify-center\"\n aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.CirclesWithText\">\n <ol role=\"list\"\n class=\"overflow-hidden\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"relative pb-10 cursor-pointer\">\n <!-- Complete Step -->\n <ng-container *ngIf=\"step.state === StepState.Completed\">\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\"\n aria-hidden=\"true\"\n *ngIf=\"!step.isLast\"></div>\n <div class=\"relative flex items-start group\">\n <span class=\"h-9 flex items-center\">\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n <svg class=\"w-5 h-5 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </div>\n </ng-container>\n <!-- Active Step -->\n <ng-container *ngIf=\"step.state === StepState.Active\">\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\n aria-hidden=\"true\"\n *ngIf=\"!step.isLast\"></div>\n <div class=\"relative flex items-start group\"\n aria-current=\"step\">\n <span class=\"h-9 flex items-center\"\n aria-hidden=\"true\">\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n </span>\n </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </div>\n </ng-container>\n <!-- Upcoming Step -->\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\"\n aria-hidden=\"true\"\n *ngIf=\"!step.isLast\"></div>\n <div href=\"#\"\n class=\"relative flex items-start group\">\n <span class=\"h-9 flex items-center\"\n aria-hidden=\"true\">\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n </span>\n </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </div>\n </ng-container>\n </li>\n </ol>\n </nav>\n <!-- Panels -->\n <nav aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Panels\">\n <ol role=\"list\"\n class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"relative md:flex-1 md:flex cursor-pointer\">\n <!-- Completed step -->\n <div class=\"group flex items-center w-full\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n <svg class=\"w-6 h-6 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n <span class=\"ml-4 text-sm font-medium text-gray-900\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </span>\n </div>\n <!-- Active step -->\n <div class=\"px-6 py-4 flex items-center text-sm font-medium\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n </span>\n <span class=\"ml-4 text-sm font-medium text-blue-600\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming step -->\n <div class=\"group flex items-center\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n </span>\n <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </span>\n </div>\n <!-- Arrow separator for lg screens and up -->\n <div *ngIf=\"!step.isLast\"\n class=\"hidden md:block absolute top-0 right-0 h-full w-5\"\n aria-hidden=\"true\">\n <svg class=\"h-full w-full text-gray-300\"\n viewBox=\"0 0 22 80\"\n fill=\"none\"\n preserveAspectRatio=\"none\">\n <path d=\"M0 -2L20 40L0 82\"\n vector-effect=\"non-scaling-stroke\"\n stroke=\"currentcolor\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </li>\n </ol>\n </nav>\n <!-- Panels With Border -->\n <div class=\"panels-with-border-container\"\n *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n <nav class=\"panels-with-border-nav\"\n aria-label=\"Progress\">\n <ol role=\"list\"\n class=\"panels-with-border-ol\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"panels-with-border-li\">\n <!-- Completed Step -->\n <div class=\"panels-with-border-completed-step\"\n *ngIf=\"step.state === StepState.Completed\">\n <div class=\"group\">\n <span class=\"panels-with-border-completed-step-level1\"\n aria-hidden=\"true\">\n </span>\n <span class=\"panels-with-border-completed-step-level2\">\n <span class=\"panels-with-border-completed-step-level21\">\n <span class=\"panels-with-border-completed-step-level211\">\n <svg class=\"w-6 h-6 text-white\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n </span>\n <span class=\"panels-with-border-completed-step-level22\">\n <span class=\"panels-with-border-completed-step-level221\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-completed-step-level222\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </span>\n </div>\n </div>\n <!-- Active Step -->\n <div class=\"panels-with-border-active-step\"\n *ngIf=\"step.state === StepState.Active\">\n <div aria-current=\"step\">\n <span class=\"panels-with-border-active-step-level1\"\n aria-hidden=\"true\">\n </span>\n <span class=\"panels-with-border-active-step-level2\">\n <span class=\"panels-with-border-active-step-level21\">\n <span class=\"panels-with-border-active-step-level211\">\n <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\n </span>\n </span>\n <span class=\"panels-with-border-active-step-level22\">\n <span class=\"panels-with-border-active-step-level221\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-active-step-level222\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </span>\n </div>\n <!-- Separator -->\n <div class=\"panels-with-border-step-separator\"\n aria-hidden=\"true\"\n *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\"\n viewBox=\"0 0 12 82\"\n fill=\"none\"\n preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\n stroke=\"currentcolor\"\n vector-effect=\"non-scaling-stroke\" />\n </svg>\n </div>\n </div>\n <!-- Upcoming Step -->\n <div class=\"panels-with-border-upcoming-step\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"group\">\n <span class=\"panels-with-border-upcoming-step-level1\"\n aria-hidden=\"true\">\n </span>\n <span class=\"panels-with-border-upcoming-step-level2\">\n <span class=\"panels-with-border-upcoming-step-level21\">\n <span class=\"panels-with-border-upcoming-step-level211\">\n <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\n </span>\n </span>\n <span class=\"panels-with-border-upcoming-step-level22\">\n <span class=\"panels-with-border-upcoming-step-level221\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm font-medium text-gray-500\"\n *ngIf=\"step.stepInfo\">\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n </span>\n </span>\n </span>\n </div>\n <!-- Separator -->\n <div class=\"panels-with-border-step-separator\"\n aria-hidden=\"true\"\n *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\"\n viewBox=\"0 0 12 82\"\n fill=\"none\"\n preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\"\n stroke=\"currentcolor\"\n vector-effect=\"non-scaling-stroke\" />\n </svg>\n </div>\n </div>\n </li>\n </ol>\n </nav>\n </div>\n <!-- Progress -->\n <div *ngSwitchCase=\"StepperType.Progress\">\n <div class=\"mt-6\"\n aria-hidden=\"true\">\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-2 bg-blue-600 rounded-full\"\n [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\">\n </div>\n </div>\n <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n <div *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"text-blue-600 cursor-pointer\">\n <ng-container *ngIf=\"step.stepLabel\"\n [ngTemplateOutlet]=\"step.stepLabel.template\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <!-- Simple -->\n <nav aria-label=\"Progress\"\n *ngSwitchCase=\"StepperType.Simple\">\n <ol role=\"list\"\n class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n <li *ngFor=\"let step of steps\"\n (click)=\"onSelectStep(step)\"\n class=\"md:flex-1 cursor-pointer\">\n <!-- Completed Step -->\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\n *ngIf=\"step.state === StepState.Completed\">\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n <span class=\"text-sm font-medium\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Active Step -->\n <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\n aria-current=\"step\"\n *ngIf=\"step.state === StepState.Active\">\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n <span class=\"text-sm font-medium\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming Step -->\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\"\n *ngIf=\"step.state === StepState.Upcoming\">\n <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n <span class=\"text-sm font-medium\"\n *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n </li>\n </ol>\n </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n <ng-container *ngIf=\"step.state === StepState.Active\"\n [ngTemplateOutlet]=\"step.content\">\n </ng-container>\n</ng-container>" }]
|
|
2675
2675
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
2676
2676
|
type: ContentChildren,
|
|
2677
2677
|
args: [LibStepComponent, { descendants: true }]
|
|
@@ -2786,11 +2786,11 @@ class ToggleButtonsListComponent {
|
|
|
2786
2786
|
this.valueChange.emit(optionValue);
|
|
2787
2787
|
}
|
|
2788
2788
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleButtonsListComponent, isStandalone: false, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact", dropDownMenuPlaceholder: "dropDownMenuPlaceholder" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\
|
|
2789
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ToggleButtonsListComponent, isStandalone: false, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact", dropDownMenuPlaceholder: "dropDownMenuPlaceholder" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\n <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n <i [class]=\"icon\"></i>\n </div>\n <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\" [placeholder]=\"dropDownMenuPlaceholder\">\n </lib-drop-down-menu>\n </div>\n <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n <!-- [tooltip]=\"option.description\" -->\n <button type=\"button\"\n [disabled]=\"option.value === value\"\n [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n class=\"toggle-buttons-list-button\"\n (click)=\"selectOption(option.value)\">\n <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n <i [class]=\"option.icon\"></i>\n </div>\n <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n <span *ngIf=\"option.data && option.data.count\"\n class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n </span>\n </button>\n </ng-template>\n </div>\n</div>\n", 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: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
|
|
2790
2790
|
}
|
|
2791
2791
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
|
|
2792
2792
|
type: Component,
|
|
2793
|
-
args: [{ selector: 'lib-toggle-buttons-list', standalone: false, template: "<div class=\"relative items-center inline-flex\">\
|
|
2793
|
+
args: [{ selector: 'lib-toggle-buttons-list', standalone: false, template: "<div class=\"relative items-center inline-flex\">\n <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n <i [class]=\"icon\"></i>\n </div>\n <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\" [placeholder]=\"dropDownMenuPlaceholder\">\n </lib-drop-down-menu>\n </div>\n <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n <!-- [tooltip]=\"option.description\" -->\n <button type=\"button\"\n [disabled]=\"option.value === value\"\n [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n class=\"toggle-buttons-list-button\"\n (click)=\"selectOption(option.value)\">\n <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n <i [class]=\"option.icon\"></i>\n </div>\n <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n <span *ngIf=\"option.data && option.data.count\"\n class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n </span>\n </button>\n </ng-template>\n </div>\n</div>\n" }]
|
|
2794
2794
|
}], ctorParameters: () => [], propDecorators: { icon: [{
|
|
2795
2795
|
type: Input
|
|
2796
2796
|
}], options: [{
|
|
@@ -2869,11 +2869,11 @@ class ContentTileComponent {
|
|
|
2869
2869
|
return false;
|
|
2870
2870
|
}
|
|
2871
2871
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2872
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ContentTileComponent, isStandalone: false, selector: "lib-content-tile", inputs: { title: "title", busy: "busy", showAction: ["show-action", "showAction"], showFooter: ["show-footer", "showFooter"], actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, queries: [{ propertyName: "header", first: true, predicate: ContentTileHeaderComponent, descendants: true }, { propertyName: "items", predicate: ContentTileItemComponent, read: ContentTileItemComponent }], ngImport: i0, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\
|
|
2872
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ContentTileComponent, isStandalone: false, selector: "lib-content-tile", inputs: { title: "title", busy: "busy", showAction: ["show-action", "showAction"], showFooter: ["show-footer", "showFooter"], actionText: ["action-text", "actionText"] }, outputs: { tileAction: "tile-action" }, queries: [{ propertyName: "header", first: true, predicate: ContentTileHeaderComponent, descendants: true }, { propertyName: "items", predicate: ContentTileItemComponent, read: ContentTileItemComponent }], ngImport: i0, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\n <div class=\"card-body\">\n <div class=\"kpi-tile-title-container flex align-top\">\n <button type=\"button\" *ngIf=\"!header\" class=\"kpi-tile-action text-left flex-1 uppercase\" \n (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title ?? title) ?? '-'}}\n </button>\n <ng-container *ngIf=\"header && header.template\">\n <div class=\"flex-1\">\n <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\n </div>\n </ng-container>\n <div *ngIf=\"showAction\" class=\"float-right align-top\">\n <button type=\"button\" class=\"kpi-tile-action text-xs uppercase\" (click)=\"emitTileAction($event)\">{{actionText}}</button>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\n <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\n </div>\n <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\n <nav class=\"flex items-center justify-between px-4 sm:px-0\">\n <div class=\"flex w-0 flex-1\"></div>\n <div class=\"flex items-center justify-between px-2\">\n <ng-container *ngFor=\"let item of itemTemplates; index as i\">\n <button type=\"button\"\n title=\"details\"\n (click)=\"selectedIndex=i\"\n [disabled]=\"selectedIndex===i\"\n class=\"tile-card-item-btn\"\n [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\n [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\n </button>\n </ng-container>\n </div>\n <div class=\"flex w-0 flex-1 justify-end\"></div>\n </nav>\n </div>\n </div>\n</div>\n", 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"] }] }); }
|
|
2873
2873
|
}
|
|
2874
2874
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileComponent, decorators: [{
|
|
2875
2875
|
type: Component,
|
|
2876
|
-
args: [{ selector: 'lib-content-tile', standalone: false, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\
|
|
2876
|
+
args: [{ selector: 'lib-content-tile', standalone: false, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\n <div class=\"card-body\">\n <div class=\"kpi-tile-title-container flex align-top\">\n <button type=\"button\" *ngIf=\"!header\" class=\"kpi-tile-action text-left flex-1 uppercase\" \n (click)=\"emitTileAction($event)\">{{(this.itemTemplates[selectedIndex].title ?? title) ?? '-'}}\n </button>\n <ng-container *ngIf=\"header && header.template\">\n <div class=\"flex-1\">\n <ng-template [ngTemplateOutlet]=\"header.template\"></ng-template>\n </div>\n </ng-container>\n <div *ngIf=\"showAction\" class=\"float-right align-top\">\n <button type=\"button\" class=\"kpi-tile-action text-xs uppercase\" (click)=\"emitTileAction($event)\">{{actionText}}</button>\n </div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"itemTemplates\">\n <ng-template [ngTemplateOutlet]=\"itemTemplates[selectedIndex].template\"></ng-template>\n </div>\n <div class=\"tile-card-footer opacity-25 hover:opacity-75\" *ngIf=\"itemTemplates && itemTemplates.length>1\">\n <nav class=\"flex items-center justify-between px-4 sm:px-0\">\n <div class=\"flex w-0 flex-1\"></div>\n <div class=\"flex items-center justify-between px-2\">\n <ng-container *ngFor=\"let item of itemTemplates; index as i\">\n <button type=\"button\"\n title=\"details\"\n (click)=\"selectedIndex=i\"\n [disabled]=\"selectedIndex===i\"\n class=\"tile-card-item-btn\"\n [class.tile-card-item-btn-available]=\"selectedIndex!==i\"\n [class.tile-card-item-btn-selected]=\"selectedIndex===i\">\n </button>\n </ng-container>\n </div>\n <div class=\"flex w-0 flex-1 justify-end\"></div>\n </nav>\n </div>\n </div>\n</div>\n" }]
|
|
2877
2877
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { title: [{
|
|
2878
2878
|
type: Input
|
|
2879
2879
|
}], busy: [{
|
|
@@ -3286,11 +3286,11 @@ class ShellSidebarComponent {
|
|
|
3286
3286
|
this.sectionLinks = this.links[this.sectionLinksPath];
|
|
3287
3287
|
}
|
|
3288
3288
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3289
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarComponent, isStandalone: false, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"], sticky: "sticky" }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\
|
|
3289
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarComponent, isStandalone: false, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"], sticky: "sticky" }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"shell-sidebar-component-container\">\n <div class=\"shell-sidebar-component-links-container sidebar\">\n <lib-nav-links-list [show-icons]=\"true\"\n [show-text]=\"!sticky\"\n [large-icons]=\"sticky\"\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'sidebar nav-link group'\"\n [link-active-class]=\"'sidebar nav-link-active-b group'\">\n </lib-nav-links-list>\n </div>\n</div>", dependencies: [{ 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"] }] }); }
|
|
3290
3290
|
}
|
|
3291
3291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarComponent, decorators: [{
|
|
3292
3292
|
type: Component,
|
|
3293
|
-
args: [{ selector: 'lib-shell-sidebar', standalone: false, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\
|
|
3293
|
+
args: [{ selector: 'lib-shell-sidebar', standalone: false, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\n<div class=\"shell-sidebar-component-container\">\n <div class=\"shell-sidebar-component-links-container sidebar\">\n <lib-nav-links-list [show-icons]=\"true\"\n [show-text]=\"!sticky\"\n [large-icons]=\"sticky\"\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'sidebar nav-link group'\"\n [link-active-class]=\"'sidebar nav-link-active-b group'\">\n </lib-nav-links-list>\n </div>\n</div>" }]
|
|
3294
3294
|
}], ctorParameters: () => [{ type: i1$1.Router, decorators: [{
|
|
3295
3295
|
type: Inject,
|
|
3296
3296
|
args: [Router]
|
|
@@ -3327,11 +3327,11 @@ class LanguageSelectionComponent {
|
|
|
3327
3327
|
this.menuExpanded = false;
|
|
3328
3328
|
}
|
|
3329
3329
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3330
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LanguageSelectionComponent, isStandalone: false, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
3330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: LanguageSelectionComponent, isStandalone: false, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n <button class=\"langs-button\" (click)=\"menuExpanded = !menuExpanded\">\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\n <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text}}</span>\n </ng-container>\n </button>\n\n <div\n [class]=\"menuExpanded ? 'langs-menu-expanded':'langs-menu-collapsed'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n <div class=\"py-1\" role=\"none\">\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\n <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\n {{lang.description}}\n </a>\n </ng-container>\n </div>\n </div>\n</div>\n", 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: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3331
3331
|
}
|
|
3332
3332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
|
|
3333
3333
|
type: Component,
|
|
3334
|
-
args: [{ selector: 'lib-language-selection', standalone: false, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
3334
|
+
args: [{ selector: 'lib-language-selection', standalone: false, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n <button class=\"langs-button\" (click)=\"menuExpanded = !menuExpanded\">\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\n <span *ngIf=\"lang.value === langsService?.selected\">{{lang.text}}</span>\n </ng-container>\n </button>\n\n <div\n [class]=\"menuExpanded ? 'langs-menu-expanded':'langs-menu-collapsed'\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n <div class=\"py-1\" role=\"none\">\n <ng-container *ngFor=\"let lang of langsService?.options | async\">\n <a (click)=\"selectLang(lang)\" *ngIf=\"lang.value != langsService?.selected\" class=\"nav-link-profile\" role=\"menuitem\" tabindex=\"-1\" id=\"menu-item-0\">\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--GlobeFavorite\"></i>\n {{lang.description}}\n </a>\n </ng-container>\n </div>\n </div>\n</div>\n" }]
|
|
3335
3335
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3336
3336
|
type: Inject,
|
|
3337
3337
|
args: [APP_LANGUAGES]
|
|
@@ -3399,11 +3399,11 @@ class NotificationsIndicatorComponent {
|
|
|
3399
3399
|
this.menuExpanded = false;
|
|
3400
3400
|
}
|
|
3401
3401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NotificationsIndicatorComponent, isStandalone: false, selector: "lib-notifications-indicator", inputs: { noNotifications: "noNotifications", showNotificationsText: "showNotificationsText" }, ngImport: i0, template: "<div class=\"relative\"\
|
|
3402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NotificationsIndicatorComponent, isStandalone: false, selector: "lib-notifications-indicator", inputs: { noNotifications: "noNotifications", showNotificationsText: "showNotificationsText" }, ngImport: i0, template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n <!-- Notifications Button -->\n <button type=\"button\"\n (click)=\"doInboxAction()\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\">\n <span class=\"sr-only\">View notifications</span>\n <span class=\"avatar-container\">\n <span class=\"avatar-text\">\n <i class=\"ms-Icon hover:text-blue-400\"\n [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n [class.text-sky-400]=\"unreadCount > 0\"\n [class.animate-notification]=\"newArrival\"\n [class.ms-Icon--Message]=\"unreadCount === 0\">\n </i>\n </span>\n <span\n *ngIf=\"unreadCount > 0\"\n [class.animate-pulse]=\"newArrival\"\n class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\n {{ unreadCount }}\n </span>\n </span>\n </button>\n\n <!-- Notifications dropdown -->\n <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\n <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n </ng-container>\n <ng-template #messagesDropDown>\n <ul class=\"pr-1.5\">\n <ng-container *ngIf=\"items; else loading\">\n <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\n <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n </ng-container>\n <ng-container *ngFor=\"let message of items; let i = index\">\n <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n <div class=\"flex justify-between\">\n <div class=\"flex-grow\">\n <a\n [routerLink]=\"message.path\"\n (click)=\"removeItem(i)\"\n class=\"notifications-nav-link grid\"\n [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n >\n <div class=\"flex flex-col\">\n <div class=\"font-thin tracking-tighter\">\n {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n </div>\n <div class=\"font-bold\">\n {{ message.data.text }}\n </div>\n </div>\n </a>\n </div>\n </div>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-template #loading>\n <div class=\"h-32 flex items-center justify-center\">\n <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n </div>\n </ng-template>\n </ul>\n </ng-template>\n </div>\n <div class=\"p-1 rounded-lg\">\n <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\n <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{showNotificationsText}}</button>\n </a>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
3403
3403
|
}
|
|
3404
3404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
|
|
3405
3405
|
type: Component,
|
|
3406
|
-
args: [{ selector: 'lib-notifications-indicator', standalone: false, template: "<div class=\"relative\"\
|
|
3406
|
+
args: [{ selector: 'lib-notifications-indicator', standalone: false, template: "<div class=\"relative\"\n(clickOutside)=\"onClickOutside($event)\">\n <!-- Notifications Button -->\n <button type=\"button\"\n (click)=\"doInboxAction()\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\">\n <span class=\"sr-only\">View notifications</span>\n <span class=\"avatar-container\">\n <span class=\"avatar-text\">\n <i class=\"ms-Icon hover:text-blue-400\"\n [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\n [class.text-sky-400]=\"unreadCount > 0\"\n [class.animate-notification]=\"newArrival\"\n [class.ms-Icon--Message]=\"unreadCount === 0\">\n </i>\n </span>\n <span\n *ngIf=\"unreadCount > 0\"\n [class.animate-pulse]=\"newArrival\"\n class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\n {{ unreadCount }}\n </span>\n </span>\n </button>\n\n <!-- Notifications dropdown -->\n <div tabindex=\"1\" *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\n <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\n <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\n <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n </ng-container>\n <ng-template #messagesDropDown>\n <ul class=\"pr-1.5\">\n <ng-container *ngIf=\"items; else loading\">\n <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\n <div class=\"notifications-nav-link hover:bg-transparent\">{{noNotifications}}</div>\n </ng-container>\n <ng-container *ngFor=\"let message of items; let i = index\">\n <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\n <div class=\"flex justify-between\">\n <div class=\"flex-grow\">\n <a\n [routerLink]=\"message.path\"\n (click)=\"removeItem(i)\"\n class=\"notifications-nav-link grid\"\n [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\n >\n <div class=\"flex flex-col\">\n <div class=\"font-thin tracking-tighter\">\n {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\n </div>\n <div class=\"font-bold\">\n {{ message.data.text }}\n </div>\n </div>\n </a>\n </div>\n </div>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-template #loading>\n <div class=\"h-32 flex items-center justify-center\">\n <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\n </div>\n </ng-template>\n </ul>\n </ng-template>\n </div>\n <div class=\"p-1 rounded-lg\">\n <a [routerLink]=\"allNotificationsLink!.path\" (click)=\"onClickOutside($event)\">\n <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{showNotificationsText}}</button>\n </a>\n </div>\n </div>\n</div>\n" }]
|
|
3407
3407
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3408
3408
|
type: Inject,
|
|
3409
3409
|
args: [APP_NOTIFICATIONS]
|
|
@@ -3459,11 +3459,11 @@ class UserProfileMenuComponent {
|
|
|
3459
3459
|
this.userMenuExpanded = false;
|
|
3460
3460
|
}
|
|
3461
3461
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: UserProfileMenuComponent, isStandalone: false, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"], showPicture: ["show-picture", "showPicture"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
3462
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: UserProfileMenuComponent, isStandalone: false, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"], showPicture: ["show-picture", "showPicture"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n\n <div class=\"inline-flex\">\n <!-- Username -->\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n {{ user.profile.name }}\n </div>\n </div>\n\n <div [class.ml-2]=\"showUserName\">\n <button type=\"button\" \n *ngIf=\"user\"\n class=\"shell-header-profile-dropdown-button\"\n id=\"user-menu-authenticated\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n (click)=\"userMenuExpanded = !userMenuExpanded\">\n <span class=\"sr-only\">Open user menu</span>\n <span class=\"avatar-container\">\n <span *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\n <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\n </span>\n </button>\n\n <button type=\"button\"\n *ngIf=\"!user\"\n (click)=\"signin($event)\"\n class=\"shell-header-profile-dropdown-button\"\n id=\"user-menu\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\">\n <span class=\"sr-only\">sign in</span>\n <span class=\"avatar-container\">\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n </span>\n </button>\n </div>\n </div>\n\n <div [class]=\"userMenuExpanded ?\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-black/5 focus:outline-none'\n :\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-black/5 focus:outline-none'\"\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n <lib-nav-links-list\n (click)=\"onClickOutside($event)\"\n [links]=\"links.profile\"\n [link-class]=\"'nav-link-profile'\"\n [link-active-class]=\"'nav-link-profile-active'\">\n </lib-nav-links-list>\n </div>\n\n</div>\n\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"] }] }); }
|
|
3463
3463
|
}
|
|
3464
3464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
3465
3465
|
type: Component,
|
|
3466
|
-
args: [{ selector: 'lib-user-profile-menu', standalone: false, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
3466
|
+
args: [{ selector: 'lib-user-profile-menu', standalone: false, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n\n <div class=\"inline-flex\">\n <!-- Username -->\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\n {{ user.profile.name }}\n </div>\n </div>\n\n <div [class.ml-2]=\"showUserName\">\n <button type=\"button\" \n *ngIf=\"user\"\n class=\"shell-header-profile-dropdown-button\"\n id=\"user-menu-authenticated\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n (click)=\"userMenuExpanded = !userMenuExpanded\">\n <span class=\"sr-only\">Open user menu</span>\n <span class=\"avatar-container\">\n <span *ngIf=\"!showPicture\" class=\"avatar-text\">{{this.avatarName}}</span>\n <img title=\"profile-image\" *ngIf=\"showPicture\" [userPicture]=\"user.profile.sub\" [displayName]=\"user.profile\" [size]=\"32\" />\n </span>\n </button>\n\n <button type=\"button\"\n *ngIf=\"!user\"\n (click)=\"signin($event)\"\n class=\"shell-header-profile-dropdown-button\"\n id=\"user-menu\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\">\n <span class=\"sr-only\">sign in</span>\n <span class=\"avatar-container\">\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\n </span>\n </button>\n </div>\n </div>\n\n <div [class]=\"userMenuExpanded ?\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-black/5 focus:outline-none'\n :\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-black/5 focus:outline-none'\"\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\n <lib-nav-links-list\n (click)=\"onClickOutside($event)\"\n [links]=\"links.profile\"\n [link-class]=\"'nav-link-profile'\"\n [link-active-class]=\"'nav-link-profile-active'\">\n </lib-nav-links-list>\n </div>\n\n</div>\n\n" }]
|
|
3467
3467
|
}], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
|
|
3468
3468
|
type: Inject,
|
|
3469
3469
|
args: [AuthService]
|
|
@@ -3560,11 +3560,11 @@ class ShellHeaderComponent {
|
|
|
3560
3560
|
}
|
|
3561
3561
|
}
|
|
3562
3562
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3563
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellHeaderComponent, isStandalone: false, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showPictureOnHeader: ["show-picture", "showPictureOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border", busy: "busy" }, ngImport: i0, template: "<nav>\
|
|
3563
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellHeaderComponent, isStandalone: false, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showPictureOnHeader: ["show-picture", "showPictureOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border", busy: "busy" }, ngImport: i0, template: "<nav>\n <div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\" [class.busy]=\"busy\">\n <div class=\"shell-header-logo-container\">\n <div>\n <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n </div>\n </div>\n\n <div class=\"shell-header-link-container\">\n <div class=\"shell-header-link-container-inner\">\n <lib-nav-links-list\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'nav-link'\"\n [link-active-class]=\"'nav-link-active'\">\n </lib-nav-links-list>\n </div>\n </div>\n\n <div class=\"shell-header-md-visible\">\n\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n <lib-nav-links-list\n [links]=\"links.profileActions\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'shell-header-menu-rounded-button'\"\n [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n </lib-nav-links-list>\n\n\n <!-- Profile dropdown -->\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n </div>\n\n <!-- Notifications dropdown -->\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n <lib-notifications-indicator></lib-notifications-indicator>\n </div>\n\n <!-- languages dropdown -->\n <div *ngIf=\"showLangs\" class=\"ml-4\">\n <lib-language-selection></lib-language-selection>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-menu-button-container\">\n <!-- Mobile menu button -->\n <button type=\"button\"\n (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n class=\"mobile-menu-button\"\n aria-controls=\"mobile-menu\"\n [attr.aria-expanded]=\"mobileMenuExpanded\">\n <span class=\"sr-only\">Open main menu</span>\n <!--Heroicon name: outline/menu Menu open: \"hidden\", Menu closed: \"block\"-->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 6h16M4 12h16M4 18h16\" />\n </svg>\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n <!-- Mobile menu, show/hide based on menu state. -->\n <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n <lib-nav-links-list\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'nav-link-mobile'\"\n [link-active-class]=\"'nav-link-mobile-active'\"\n [container-class]=\"'mobile-menu-link-container'\">\n </lib-nav-links-list>\n\n <div *ngIf=\"!user\">\n <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n </a>\n </div>\n\n <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n <div class=\"mobile-menu-user-info-container-inner\">\n <div class=\"flex-shrink-0\">\n <span class=\"mobile-menu-avatar-container\">\n <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n </span>\n </div>\n <div class=\"ml-3\">\n <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n </div>\n <!--\n <button class=\"mobile-menu-rounded-button\">\n <span class=\"sr-only\">View notifications</span>\n <svg class=\"mobile-menu-rounded-button-icon-style\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n </svg>\n </button>\n -->\n </div>\n </div>\n\n <lib-nav-links-list\n [links]=\"links.profile\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'nav-link-mobile'\"\n [link-active-class]=\"'nav-link-mobile-active'\"\n [container-class]=\"'mobile-menu-link-container'\">\n </lib-nav-links-list>\n </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { 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"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", inputs: ["noNotifications", "showNotificationsText"] }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
|
|
3564
3564
|
}
|
|
3565
3565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellHeaderComponent, decorators: [{
|
|
3566
3566
|
type: Component,
|
|
3567
|
-
args: [{ selector: 'lib-shell-header', standalone: false, template: "<nav>\
|
|
3567
|
+
args: [{ selector: 'lib-shell-header', standalone: false, template: "<nav>\n <div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\" [class.busy]=\"busy\">\n <div class=\"shell-header-logo-container\">\n <div>\n <a href=\"#\" [routerLink]=\"['/']\"><img alt=\"app logo\" class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\n </div>\n </div>\n\n <div class=\"shell-header-link-container\">\n <div class=\"shell-header-link-container-inner\">\n <lib-nav-links-list\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'nav-link'\"\n [link-active-class]=\"'nav-link-active'\">\n </lib-nav-links-list>\n </div>\n </div>\n\n <div class=\"shell-header-md-visible\">\n\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n\n <lib-nav-links-list\n [links]=\"links.profileActions\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'shell-header-menu-rounded-button'\"\n [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\n </lib-nav-links-list>\n\n\n <!-- Profile dropdown -->\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n </div>\n\n <!-- Notifications dropdown -->\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n <lib-notifications-indicator></lib-notifications-indicator>\n </div>\n\n <!-- languages dropdown -->\n <div *ngIf=\"showLangs\" class=\"ml-4\">\n <lib-language-selection></lib-language-selection>\n </div>\n </div>\n </div>\n\n <div class=\"mobile-menu-button-container\">\n <!-- Mobile menu button -->\n <button type=\"button\"\n (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\n class=\"mobile-menu-button\"\n aria-controls=\"mobile-menu\"\n [attr.aria-expanded]=\"mobileMenuExpanded\">\n <span class=\"sr-only\">Open main menu</span>\n <!--Heroicon name: outline/menu Menu open: \"hidden\", Menu closed: \"block\"-->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 6h16M4 12h16M4 18h16\" />\n </svg>\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n <!-- Mobile menu, show/hide based on menu state. -->\n <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\n <lib-nav-links-list\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'nav-link-mobile'\"\n [link-active-class]=\"'nav-link-mobile-active'\"\n [container-class]=\"'mobile-menu-link-container'\">\n </lib-nav-links-list>\n\n <div *ngIf=\"!user\">\n <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\n <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\n </a>\n </div>\n\n <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\n <div class=\"mobile-menu-user-info-container-inner\">\n <div class=\"flex-shrink-0\">\n <span class=\"mobile-menu-avatar-container\">\n <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\n </span>\n </div>\n <div class=\"ml-3\">\n <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\n <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\n </div>\n <!--\n <button class=\"mobile-menu-rounded-button\">\n <span class=\"sr-only\">View notifications</span>\n <svg class=\"mobile-menu-rounded-button-icon-style\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n aria-hidden=\"true\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\n </svg>\n </button>\n -->\n </div>\n </div>\n\n <lib-nav-links-list\n [links]=\"links.profile\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'nav-link-mobile'\"\n [link-active-class]=\"'nav-link-mobile-active'\"\n [container-class]=\"'mobile-menu-link-container'\">\n </lib-nav-links-list>\n </div>\n</nav>\n" }]
|
|
3568
3568
|
}], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
|
|
3569
3569
|
type: Inject,
|
|
3570
3570
|
args: [AuthService]
|
|
@@ -3614,11 +3614,11 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
|
|
|
3614
3614
|
this.links = links;
|
|
3615
3615
|
}
|
|
3616
3616
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3617
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarHeaderComponent, isStandalone: false, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\
|
|
3617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarHeaderComponent, isStandalone: false, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\">\n <div class=\"shell-header-md-visible\">\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n <!-- Profile dropdown -->\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n </div>\n <!-- Notifications dropdown -->\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n <lib-notifications-indicator></lib-notifications-indicator>\n </div>\n <!-- languages dropdown -->\n <div *ngIf=\"showLangs\" class=\"ml-4\">\n <lib-language-selection></lib-language-selection>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", inputs: ["noNotifications", "showNotificationsText"] }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
|
|
3618
3618
|
}
|
|
3619
3619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
|
|
3620
3620
|
type: Component,
|
|
3621
|
-
args: [{ selector: 'lib-shell-sidebar-header', standalone: false, template: "<div class=\"shell-header-paddings\">\
|
|
3621
|
+
args: [{ selector: 'lib-shell-sidebar-header', standalone: false, template: "<div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\">\n <div class=\"shell-header-md-visible\">\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\n <!-- Profile dropdown -->\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\" [show-picture]=\"showPictureOnHeader\"></lib-user-profile-menu>\n </div>\n <!-- Notifications dropdown -->\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\n <lib-notifications-indicator></lib-notifications-indicator>\n </div>\n <!-- languages dropdown -->\n <div *ngIf=\"showLangs\" class=\"ml-4\">\n <lib-language-selection></lib-language-selection>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n" }]
|
|
3622
3622
|
}], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
|
|
3623
3623
|
type: Inject,
|
|
3624
3624
|
args: [AuthService]
|
|
@@ -3648,11 +3648,11 @@ class ShellSidebarLayoutComponent {
|
|
|
3648
3648
|
this._userSettings.set('MobileSideBar', this.showMobileSidebar);
|
|
3649
3649
|
}
|
|
3650
3650
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [{ token: UserSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarLayoutComponent, isStandalone: false, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate", busy: "busy" }, ngImport: i0, template: "<div>\
|
|
3651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellSidebarLayoutComponent, isStandalone: false, selector: "lib-shell-sidebar-layout", inputs: { config: "config", sidebarFooterTemplate: "sidebarFooterTemplate", busy: "busy" }, ngImport: i0, template: "<div>\n <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"sidebar-off-canvas-menu-backdrop\"\n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\n </div>\n <div class=\"sidebar-off-canvas-menu-container-inner\"\n [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\n <div class=\"sidebar-off-canvas-layout-container\">\n <div class=\"sidebar-off-canvas-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Close sidebar</span>\n <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n <div class=\"sidebar-off-canvas-app-logo-container\">\n <img alt=\"image\" class=\"shell-sidebar-logo\"\n [src]=\"config?.appLogo\"\n [alt]=\"config?.appLogoAlt\">\n </div>\n <lib-shell-sidebar></lib-shell-sidebar>\n </div>\n <div class=\"sidebar-dummy-element\" aria-hidden=\"true\"></div>\n </div>\n </div>\n <div class=\"sidebar-static-menu-outer-container\">\n <div class=\"sidebar-static-menu-container\"\n [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\n [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\n <div class=\"sidebar-static-menu-container-inner\">\n <div class=\"sidebar-static-menu-app-logo-container\">\n <img alt=\"image\" *ngIf=\"!showMobileSidebar\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n </div>\n <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\n </div>\n <div class=\"flex flex-shrink-0 bg-gray-700 p-4\" *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\n <div class=\"group block flex-shrink-0\">\n <div class=\"flex items-center\">\n <div>\n <p class=\"text-sm font-medium text-gray-400\">\n <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\n <div class=\"sidebar-static-menu-sticky-header-container\" [class.busy]=\"busy\" *ngIf=\"config?.showHeader\">\n <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button-md\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n <button *ngIf=\"!showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n <div class=\"sidebar-static-menu-header-container\" [class.busy]=\"busy\">\n <div class=\"sidebar-static-menu-header-near-container\" [class.busy]=\"busy\">\n <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"showMobileSidebar\">\n <img alt=\"image\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n </div>\n <div class=\"sidebar-static-menu-header-between-container\" [class.busy]=\"busy\"></div>\n <div class=\"sidebar-static-menu-header-far-container\" [class.busy]=\"busy\">\n <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\"\n [show-langs]=\"config?.showLangsOnHeader\"\n [busy]=\"busy\"\n [show-picture]=\"config?.showPictureOnHeader\">\n </lib-shell-sidebar-header>\n </div>\n </div>\n </div>\n <div flex-1>\n <main class=\"shell-content-container-fluid\" [class.busy]=\"busy\">\n <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\n <div class=\"shell-content-container-inner\" [class.busy]=\"busy\">\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n </div>\n </main>\n </div>\n </div>\n</div>", dependencies: [{ 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: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: BreadcrumbComponent, selector: "lib-breadcrumb" }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config", "sticky"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] }); }
|
|
3652
3652
|
}
|
|
3653
3653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
3654
3654
|
type: Component,
|
|
3655
|
-
args: [{ selector: 'lib-shell-sidebar-layout', standalone: false, template: "<div>\
|
|
3655
|
+
args: [{ selector: 'lib-shell-sidebar-layout', standalone: false, template: "<div>\n <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"sidebar-off-canvas-menu-backdrop\"\n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"!showMobileSidebar\">\n </div>\n <div class=\"sidebar-off-canvas-menu-container-inner\"\n [class.sidebar-off-canvas-menu-container-inner-active]=\"!showMobileSidebar\"\n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"showMobileSidebar\">\n <div class=\"sidebar-off-canvas-layout-container\">\n <div class=\"sidebar-off-canvas-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Close sidebar</span>\n <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n <div class=\"sidebar-off-canvas-app-logo-container\">\n <img alt=\"image\" class=\"shell-sidebar-logo\"\n [src]=\"config?.appLogo\"\n [alt]=\"config?.appLogoAlt\">\n </div>\n <lib-shell-sidebar></lib-shell-sidebar>\n </div>\n <div class=\"sidebar-dummy-element\" aria-hidden=\"true\"></div>\n </div>\n </div>\n <div class=\"sidebar-static-menu-outer-container\">\n <div class=\"sidebar-static-menu-container\"\n [class.sidebar-static-menu-container-active]=\"!showMobileSidebar\"\n [class.sidebar-static-menu-container-not-active]=\"showMobileSidebar\">\n <div class=\"sidebar-static-menu-container-inner\">\n <div class=\"sidebar-static-menu-app-logo-container\">\n <img alt=\"image\" *ngIf=\"!showMobileSidebar\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n </div>\n <lib-shell-sidebar [sticky]=\"showMobileSidebar\"></lib-shell-sidebar>\n </div>\n <div class=\"flex flex-shrink-0 bg-gray-700 p-4\" *ngIf=\"!showMobileSidebar && sidebarFooterTemplate\">\n <div class=\"group block flex-shrink-0\">\n <div class=\"flex items-center\">\n <div>\n <p class=\"text-sm font-medium text-gray-400\">\n <ng-container [ngTemplateOutlet]=\"sidebarFooterTemplate\"></ng-container>\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-expanded]=\"!showMobileSidebar\">\n <div class=\"sidebar-static-menu-sticky-header-container\" [class.busy]=\"busy\" *ngIf=\"config?.showHeader\">\n <button *ngIf=\"showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button-md\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n <button *ngIf=\"!showMobileSidebar\" type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"toggleMobileSidebar()\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\n </svg>\n </button>\n <div class=\"sidebar-static-menu-header-container\" [class.busy]=\"busy\">\n <div class=\"sidebar-static-menu-header-near-container\" [class.busy]=\"busy\">\n <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"showMobileSidebar\">\n <img alt=\"image\" class=\"shell-sidebar-logo\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n </div>\n <div class=\"sidebar-static-menu-header-between-container\" [class.busy]=\"busy\"></div>\n <div class=\"sidebar-static-menu-header-far-container\" [class.busy]=\"busy\">\n <lib-shell-sidebar-header [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\"\n [show-langs]=\"config?.showLangsOnHeader\"\n [busy]=\"busy\"\n [show-picture]=\"config?.showPictureOnHeader\">\n </lib-shell-sidebar-header>\n </div>\n </div>\n </div>\n <div flex-1>\n <main class=\"shell-content-container-fluid\" [class.busy]=\"busy\">\n <lib-breadcrumb *ngIf=\"config?.breadcrumb || false\"></lib-breadcrumb>\n <div class=\"shell-content-container-inner\" [class.busy]=\"busy\">\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n </div>\n </main>\n </div>\n </div>\n</div>" }]
|
|
3656
3656
|
}], ctorParameters: () => [{ type: UserSettingsService }], propDecorators: { config: [{
|
|
3657
3657
|
type: Input
|
|
3658
3658
|
}], sidebarFooterTemplate: [{
|
|
@@ -3666,11 +3666,11 @@ class ShellFooterComponent {
|
|
|
3666
3666
|
this.links = links;
|
|
3667
3667
|
}
|
|
3668
3668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellFooterComponent, isStandalone: false, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\
|
|
3669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellFooterComponent, isStandalone: false, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\n <div class=\"shell-footer-paddings\">\n <div class=\"shell-footer-component-container-inner\">\n <div class=\"shell-footer-sections-container\">\n <div class=\"shell-footer-section\">\n <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\n <nav class=\"mt-4\">\n <ul class=\"space-y-2\">\n <ng-container *ngFor=\"let link of links.brand | async\">\n <li>\n <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n <div class=\"shell-footer-section-links\">\n <h5 class=\"shell-footer-section-title\">Legal</h5>\n <nav class=\"mt-4\">\n <ul class=\"grid lg:grid-cols-2\">\n <ng-container *ngFor=\"let link of links.legal | async\">\n <li class=\"mb-2\">\n <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n <div class=\"shell-footer-section-links\">\n <h5 class=\"shell-footer-section-title\">Follow us</h5>\n <nav class=\"mt-4\">\n <ul class=\"grid lg:grid-cols-2\">\n <li class=\"mb-2\">\n <a href=\"#\" class=\"shell-footer-social\">\n <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\n </svg>\n <span> Twitter </span>\n </a>\n </li>\n <li class=\"mb-2\">\n <a href=\"#\" class=\"shell-footer-social\">\n <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\n </svg>\n <span> Instagram </span>\n </a>\n </li>\n <li class=\"mb-2\">\n <a href=\"#\" class=\"shell-footer-social\">\n <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\n <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\n </svg>\n <span> Facebook </span>\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n </div>\n <div class=\"shell-footer-copyright\">\n <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\n <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\n </nav>-->\n <p class=\"text-sm text-center sm:text-right\">\n \u00A9 2021 INDICE. All rights reserved.\n </p>\n </div>\n </div>\n</footer>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3670
3670
|
}
|
|
3671
3671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellFooterComponent, decorators: [{
|
|
3672
3672
|
type: Component,
|
|
3673
|
-
args: [{ selector: 'lib-shell-footer', standalone: false, template: "<footer class=\"shell-footer-component-container\">\
|
|
3673
|
+
args: [{ selector: 'lib-shell-footer', standalone: false, template: "<footer class=\"shell-footer-component-container\">\n <div class=\"shell-footer-paddings\">\n <div class=\"shell-footer-component-container-inner\">\n <div class=\"shell-footer-sections-container\">\n <div class=\"shell-footer-section\">\n <img class=\"shell-footer-logo-h\" src=\"assets/images/branding/indice.png\" alt=\"INDICE logo\" />\n <nav class=\"mt-4\">\n <ul class=\"space-y-2\">\n <ng-container *ngFor=\"let link of links.brand | async\">\n <li>\n <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n <div class=\"shell-footer-section-links\">\n <h5 class=\"shell-footer-section-title\">Legal</h5>\n <nav class=\"mt-4\">\n <ul class=\"grid lg:grid-cols-2\">\n <ng-container *ngFor=\"let link of links.legal | async\">\n <li class=\"mb-2\">\n <a [href]=\"link.path\" class=\"shell-footer-link\">{{ link.text }}</a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n <div class=\"shell-footer-section-links\">\n <h5 class=\"shell-footer-section-title\">Follow us</h5>\n <nav class=\"mt-4\">\n <ul class=\"grid lg:grid-cols-2\">\n <li class=\"mb-2\">\n <a href=\"#\" class=\"shell-footer-social\">\n <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"/>\n </svg>\n <span> Twitter </span>\n </a>\n </li>\n <li class=\"mb-2\">\n <a href=\"#\" class=\"shell-footer-social\">\n <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" d=\"M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z\" clip-rule=\"evenodd\"/>\n </svg>\n <span> Instagram </span>\n </a>\n </li>\n <li class=\"mb-2\">\n <a href=\"#\" class=\"shell-footer-social\">\n <svg class=\"shell-footer-social-icon\" aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" >\n <path fill-rule=\"evenodd\" d=\"M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z\" clip-rule=\"evenodd\"/>\n </svg>\n <span> Facebook </span>\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n </div>\n <div class=\"shell-footer-copyright\">\n <!--<nav class=\"flex flex-wrap justify-center space-x-6\">\n <a href=\"#\" class=\"font-normal text-sm hover:text-gray-100 mb-2\">Cookie settings</a>\n </nav>-->\n <p class=\"text-sm text-center sm:text-right\">\n \u00A9 2021 INDICE. All rights reserved.\n </p>\n </div>\n </div>\n</footer>\n" }]
|
|
3674
3674
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3675
3675
|
type: Inject,
|
|
3676
3676
|
args: [APP_LINKS]
|
|
@@ -3682,11 +3682,11 @@ class ShellStackedLayoutComponent {
|
|
|
3682
3682
|
}
|
|
3683
3683
|
ngOnInit() { }
|
|
3684
3684
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3685
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellStackedLayoutComponent, isStandalone: false, selector: "lib-shell-stacked-layout", inputs: { config: "config", busy: "busy" }, ngImport: i0, template: "<div class=\"shell-header-container\"\
|
|
3685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellStackedLayoutComponent, isStandalone: false, selector: "lib-shell-stacked-layout", inputs: { config: "config", busy: "busy" }, ngImport: i0, template: "<div class=\"shell-header-container\"\n *ngIf=\"config?.showHeader\">\n <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n <ng-container *ngIf=\"config?.customHeaderComponent\">\n <div appDynamicComponentHost=\"Header\"></div>\n </ng-container>\n <lib-shell-header *ngIf=\"!config?.customHeaderComponent\"\n [busy]=\"busy\"\n [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\"\n [show-langs]=\"config?.showLangsOnHeader\">\n </lib-shell-header>\n </div>\n</div>\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n </div>\n</main>\n<div class=\"shell-footer-container\"\n *ngIf=\"config?.showFooter\">\n <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n <ng-container *ngIf=\"config?.customFooterComponent\">\n <div appDynamicComponentHost\n hostName=\"Footer\"></div>\n </ng-container>\n <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-picture", "show-alerts", "show-langs", "border", "busy"] }] }); }
|
|
3686
3686
|
}
|
|
3687
3687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
|
|
3688
3688
|
type: Component,
|
|
3689
|
-
args: [{ selector: 'lib-shell-stacked-layout', standalone: false, template: "<div class=\"shell-header-container\"\
|
|
3689
|
+
args: [{ selector: 'lib-shell-stacked-layout', standalone: false, template: "<div class=\"shell-header-container\"\n *ngIf=\"config?.showHeader\">\n <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\n <ng-container *ngIf=\"config?.customHeaderComponent\">\n <div appDynamicComponentHost=\"Header\"></div>\n </ng-container>\n <lib-shell-header *ngIf=\"!config?.customHeaderComponent\"\n [busy]=\"busy\"\n [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\"\n [show-langs]=\"config?.showLangsOnHeader\">\n </lib-shell-header>\n </div>\n</div>\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\n <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\n <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\n </div>\n</main>\n<div class=\"shell-footer-container\"\n *ngIf=\"config?.showFooter\">\n <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\n <ng-container *ngIf=\"config?.customFooterComponent\">\n <div appDynamicComponentHost\n hostName=\"Footer\"></div>\n </ng-container>\n <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n </div>\n</div>" }]
|
|
3690
3690
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
3691
3691
|
type: Input
|
|
3692
3692
|
}], busy: [{
|
|
@@ -3753,18 +3753,27 @@ class ShellLayoutComponent {
|
|
|
3753
3753
|
}
|
|
3754
3754
|
}
|
|
3755
3755
|
}
|
|
3756
|
+
onSidePaneActivated($event) {
|
|
3757
|
+
this.rightPane?.onSidePaneActivated($event);
|
|
3758
|
+
}
|
|
3759
|
+
onSidePaneDeactivated($event) {
|
|
3760
|
+
this.rightPane?.onSidePaneDeactivated($event);
|
|
3761
|
+
}
|
|
3756
3762
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: i1$1.Router }, { token: ComponentLoaderFactory }, { token: SHELL_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3757
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellLayoutComponent, isStandalone: false, selector: "lib-shell-layout", inputs: { busy: "busy", sidebarFooterTemplate: "sidebarFooterTemplate" }, viewQueries: [{ propertyName: "_dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\
|
|
3763
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ShellLayoutComponent, isStandalone: false, selector: "lib-shell-layout", inputs: { busy: "busy", sidebarFooterTemplate: "sidebarFooterTemplate" }, viewQueries: [{ propertyName: "rightPane", first: true, predicate: ["rightPane"], descendants: true }, { propertyName: "_dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\n </div>\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\" [busy]=\"busy\"\n [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\n </lib-shell-sidebar-layout>\n </div>\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\">\n </router-outlet>\n </lib-side-pane>\n <lib-toaster-container></lib-toaster-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config", "sidebarFooterTemplate", "busy"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config", "busy"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size", "params", "template"], outputs: ["onComplete", "onOpen", "onClose"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] }); }
|
|
3758
3764
|
}
|
|
3759
3765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
3760
3766
|
type: Component,
|
|
3761
|
-
args: [{ selector: 'lib-shell-layout', standalone: false, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\
|
|
3767
|
+
args: [{ selector: 'lib-shell-layout', standalone: false, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\" [busy]=\"busy\"></lib-shell-stacked-layout>\n </div>\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\" [busy]=\"busy\"\n [sidebarFooterTemplate]=\"sidebarFooterTemplate\">\n </lib-shell-sidebar-layout>\n </div>\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\">\n </router-outlet>\n </lib-side-pane>\n <lib-toaster-container></lib-toaster-container>\n</div>" }]
|
|
3762
3768
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: ComponentLoaderFactory }, { type: undefined, decorators: [{
|
|
3763
3769
|
type: Inject,
|
|
3764
3770
|
args: [SHELL_CONFIG]
|
|
3765
3771
|
}] }], propDecorators: { _dynamicComponentHosts: [{
|
|
3766
3772
|
type: ViewChildren,
|
|
3767
3773
|
args: [DynamicComponentHostDirective]
|
|
3774
|
+
}], rightPane: [{
|
|
3775
|
+
type: ViewChild,
|
|
3776
|
+
args: ['rightPane']
|
|
3768
3777
|
}], busy: [{
|
|
3769
3778
|
type: Input
|
|
3770
3779
|
}], sidebarFooterTemplate: [{
|
|
@@ -3834,11 +3843,11 @@ class ViewLayoutComponent {
|
|
|
3834
3843
|
}
|
|
3835
3844
|
}
|
|
3836
3845
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ViewLayoutComponent, isStandalone: false, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\
|
|
3846
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ViewLayoutComponent, isStandalone: false, selector: "lib-view-layout", inputs: { header: ["show-header", "header"], fluid: "fluid", title: "title", icon: "icon", actions: "actions", busy: "busy", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], view: "view", metaItems: ["meta-items", "metaItems"] }, outputs: { onAction: "onAction", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\n <div class=\"view-layout-title-container\">\n <div class=\"view-layout-title-container-inner\">\n \n <div class=\"flex items-center\">\n <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\n <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title || ' '}}</h1>\n </div>\n \n <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\n <ng-container *ngFor=\"let meta of metaItems\">\n <div class=\"meta-item-container\">\n <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\n <span class=\"meta-text\">{{meta.text}}</span>\n </div>\n </ng-container>\n </div>\n\n </div>\n <div class=\"view-layout-title-container-far\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container mr-1\">\n <input id=\"text\"\n #search\n title=\"search\"\n class=\"search-input\"\n [placeholder]=\"searchPlaceholder\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\"\n (onsearch)=\"handleClear($event)\">\n <button type=\"button\"\n href=\"#\"\n class=\"search-button\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'switch-view'\">\n <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"p-2 disabled:opacity-75 btn-view-header\" (click)=\"switchViewActionClick(action)\">\n <span class=\"inline-block relative\">\n <i [class]=\"action.icon\"></i><span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\n </span>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\" href=\"#\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\n {{ action.text }}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <button type=\"button\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\n {{ action.text }}\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</header>\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\n <ng-content></ng-content>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
|
|
3838
3847
|
}
|
|
3839
3848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ViewLayoutComponent, decorators: [{
|
|
3840
3849
|
type: Component,
|
|
3841
|
-
args: [{ selector: 'lib-view-layout', standalone: false, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\
|
|
3850
|
+
args: [{ selector: 'lib-view-layout', standalone: false, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\n <div class=\"view-layout-title-container\">\n <div class=\"view-layout-title-container-inner\">\n \n <div class=\"flex items-center\">\n <i *ngIf=\"icon\" [class]=\"icon + ' title-icon'\" aria-hidden=\"true\"></i>\n <h1 [class]=\"busy ? 'view-layout-title-busy' : 'view-layout-title'\">{{title || ' '}}</h1>\n </div>\n \n <div *ngIf=\"metaItems && metaItems.length > 0\" class=\"meta-container\">\n <ng-container *ngFor=\"let meta of metaItems\">\n <div class=\"meta-item-container\">\n <i *ngIf=\"meta.icon\" [class]=\"meta.icon + ' meta-icon'\" aria-hidden=\"true\"></i>\n <span class=\"meta-text\">{{meta.text}}</span>\n </div>\n </ng-container>\n </div>\n\n </div>\n <div class=\"view-layout-title-container-far\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container mr-1\">\n <input id=\"text\"\n #search\n title=\"search\"\n class=\"search-input\"\n [placeholder]=\"searchPlaceholder\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\"\n (onsearch)=\"handleClear($event)\">\n <button type=\"button\"\n href=\"#\"\n class=\"search-button\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'switch-view'\">\n <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"p-2 disabled:opacity-75 btn-view-header\" (click)=\"switchViewActionClick(action)\">\n <span class=\"inline-block relative\">\n <i [class]=\"action.icon\"></i><span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\n </span>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\" href=\"#\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\n {{ action.text }}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <button type=\"button\" class=\"p-2 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\" [ngClass]=\"{'pr-1': action.text}\"></i>\n {{ action.text }}\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</header>\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\n <ng-content></ng-content>\n</div>" }]
|
|
3842
3851
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { searchInput$: [{
|
|
3843
3852
|
type: ViewChild,
|
|
3844
3853
|
args: ['search']
|
|
@@ -3906,6 +3915,7 @@ class ModelViewLayoutComponent {
|
|
|
3906
3915
|
this.icon = null;
|
|
3907
3916
|
this.busy = false;
|
|
3908
3917
|
this.actions = null;
|
|
3918
|
+
this.onAction = new EventEmitter();
|
|
3909
3919
|
this.optionsLoaded = false;
|
|
3910
3920
|
this._options = [];
|
|
3911
3921
|
}
|
|
@@ -3939,12 +3949,15 @@ class ModelViewLayoutComponent {
|
|
|
3939
3949
|
navigateLink(link) {
|
|
3940
3950
|
this.router.navigate([link], { relativeTo: this.route });
|
|
3941
3951
|
}
|
|
3952
|
+
emitActionClick(action) {
|
|
3953
|
+
this.onAction.emit(action);
|
|
3954
|
+
}
|
|
3942
3955
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3943
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModelViewLayoutComponent, isStandalone: false, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, ngImport: i0, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\
|
|
3956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModelViewLayoutComponent, isStandalone: false, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"], icon: "icon", busy: "busy", actions: "actions" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" (onAction)=\"emitActionClick($event)\" [icon]=\"icon\" [busy]=\"busy\">\n <main class=\"model-view-container\">\n <div class=\"model-view-container-inner\">\n <aside class=\"model-view-aside\">\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n <div class=\"model-view-aside-header-container\">\n <div class=\"model-view-aside-header-container-inner\">\n <ng-content *ngIf=\"!busy\"></ng-content>\n\n <ng-container *ngIf=\"busy\">\n <div class=\"flex items-center p-5\">\n <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\n <div>\n <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\n <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <!-- menu items -->\n <div class=\"model-view-menu-container-mobile\">\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\n </div>\n <div class=\"model-view-menu-container\">\n <nav class=\"model-view-menu-nav\">\n <div class=\"model-view-menu-item\">\n <ng-container *ngFor=\"let section of primary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\n \n </div>\n <a *ngIf=\"section.type !== 'separator'\"\n href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n <div class=\"model-view-menu-item-far\">\n <ng-container *ngFor=\"let section of secondary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\n <a *ngIf=\"section.type !== 'separator'\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n </nav>\n </div>\n </div>\n </section>\n </aside>\n <div class=\"model-view-details-container\">\n <router-outlet></router-outlet>\n </div>\n </div>\n </main>\n", 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$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
|
|
3944
3957
|
}
|
|
3945
3958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
|
|
3946
3959
|
type: Component,
|
|
3947
|
-
args: [{ selector: 'lib-model-view-layout', standalone: false, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\
|
|
3960
|
+
args: [{ selector: 'lib-model-view-layout', standalone: false, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" (onAction)=\"emitActionClick($event)\" [icon]=\"icon\" [busy]=\"busy\">\n <main class=\"model-view-container\">\n <div class=\"model-view-container-inner\">\n <aside class=\"model-view-aside\">\n <section aria-labelledby=\"menu\" class=\"details-view-aside-header-section\">\n <div class=\"model-view-aside-header-container\">\n <div class=\"model-view-aside-header-container-inner\">\n <ng-content *ngIf=\"!busy\"></ng-content>\n\n <ng-container *ngIf=\"busy\">\n <div class=\"flex items-center p-5\">\n <div class=\"w-12 h-14 mr-4 rounded-lg bg-gray-200 animate-pulse\"></div>\n <div>\n <div class=\"h-6 w-48 bg-gray-200 rounded-lg animate-pulse\"></div>\n <div class=\"mt-1 h-4 w-40 bg-gray-200 rounded-lg animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <!-- menu items -->\n <div class=\"model-view-menu-container-mobile\">\n <lib-drop-down-menu [options]=\"tabsOptions\" [selected]=\"selectedTab\" (selectedChange)=\"navigateLink($event)\"></lib-drop-down-menu>\n </div>\n <div class=\"model-view-menu-container\">\n <nav class=\"model-view-menu-nav\">\n <div class=\"model-view-menu-item\">\n <ng-container *ngFor=\"let section of primary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\">\n \n </div>\n <a *ngIf=\"section.type !== 'separator'\"\n href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n <div class=\"model-view-menu-item-far\">\n <ng-container *ngFor=\"let section of secondary\">\n <div class=\"h-3\" *ngIf=\"section.type === 'separator'\"></div>\n <a *ngIf=\"section.type !== 'separator'\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n class=\"view-nav-link\">\n <i *ngIf=\"section.icon\" [class]=\"section.icon + ' mr-2'\"></i>\n {{section.text}}\n </a>\n </ng-container>\n </div>\n </nav>\n </div>\n </div>\n </section>\n </aside>\n <div class=\"model-view-details-container\">\n <router-outlet></router-outlet>\n </div>\n </div>\n </main>\n" }]
|
|
3948
3961
|
}], ctorParameters: () => [{ type: i1.Location }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { title: [{
|
|
3949
3962
|
type: Input
|
|
3950
3963
|
}], primary: [{
|
|
@@ -3962,6 +3975,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
3962
3975
|
type: Input
|
|
3963
3976
|
}], actions: [{
|
|
3964
3977
|
type: Input
|
|
3978
|
+
}], onAction: [{
|
|
3979
|
+
type: Output
|
|
3965
3980
|
}] } });
|
|
3966
3981
|
|
|
3967
3982
|
class SideViewLayoutComponent {
|
|
@@ -4025,11 +4040,11 @@ class SideViewLayoutComponent {
|
|
|
4025
4040
|
}
|
|
4026
4041
|
}
|
|
4027
4042
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SideViewLayoutComponent, isStandalone: false, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"], redirectOnClose: ["redirect-on-close", "redirectOnClose"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\
|
|
4043
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SideViewLayoutComponent, isStandalone: false, selector: "lib-side-view-layout", inputs: { title: "title", showActions: "showActions", disabled: "disabled", returnPath: ["return-path", "returnPath"], okLabel: ["ok-label", "okLabel"], okShow: ["ok-show", "okShow"], closeOnOk: ["ok-close-dialog", "closeOnOk"], cancelLabel: ["cancel-label", "cancelLabel"], cancelShow: ["cancel-show", "cancelShow"], forceLocationBack: ["force-location-back", "forceLocationBack"], redirectOnClose: ["redirect-on-close", "redirectOnClose"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\n <div class=\"side-view-layout-container\">\n <div class=\"side-view-layout-container-inner\">\n <div class=\"side-view-layout-header-margins\">\n <div class=\"side-view-layout-header-container\">\n <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\n {{title}}\n </h2>\n <div class=\"side-view-layout-close-button-container\">\n <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\n <span class=\"sr-only\">Close panel</span>\n <!-- Heroicon name: outline/x -->\n <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n <div class=\"side-view-layout-content-container\">\n <!-- Replace with your content -->\n <ng-content></ng-content>\n <!-- /End replace -->\n </div>\n </div>\n <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\n <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\n {{cancelLabel}}\n </button>\n <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\n {{okLabel}}\n </button>\n </div>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4029
4044
|
}
|
|
4030
4045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
|
|
4031
4046
|
type: Component,
|
|
4032
|
-
args: [{ selector: 'lib-side-view-layout', standalone: false, template: "<div class=\"side-view-layout-size-box\">\
|
|
4047
|
+
args: [{ selector: 'lib-side-view-layout', standalone: false, template: "<div class=\"side-view-layout-size-box\">\n <div class=\"side-view-layout-container\">\n <div class=\"side-view-layout-container-inner\">\n <div class=\"side-view-layout-header-margins\">\n <div class=\"side-view-layout-header-container\">\n <h2 class=\"side-view-layout-header-title\" id=\"slide-over-title\">\n {{title}}\n </h2>\n <div class=\"side-view-layout-close-button-container\">\n <button (click)=\"emitClose()\" class=\"side-view-layout-close-button\">\n <span class=\"sr-only\">Close panel</span>\n <!-- Heroicon name: outline/x -->\n <svg class=\"side-view-layout-close-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n <div class=\"side-view-layout-content-container\">\n <!-- Replace with your content -->\n <ng-content></ng-content>\n <!-- /End replace -->\n </div>\n </div>\n <div *ngIf=\"showActions\" class=\"side-view-layout-actions-container\">\n <button *ngIf=\"cancelShow\" (click)=\"emitCancel()\" type=\"button\" class=\"side-view-layout-action-button-cancel\">\n {{cancelLabel}}\n </button>\n <button *ngIf=\"okShow\" (click)=\"emitOK()\" class=\"side-view-layout-action-button-submit\" [disabled]=\"disabled\">\n {{okLabel}}\n </button>\n </div>\n </div>\n</div>\n\n" }]
|
|
4033
4048
|
}], ctorParameters: () => [{ type: i1.Location }, { type: i1$1.Router }], propDecorators: { title: [{
|
|
4034
4049
|
type: Input
|
|
4035
4050
|
}], showActions: [{
|
|
@@ -4094,9 +4109,6 @@ class FormLayoutComponent {
|
|
|
4094
4109
|
).subscribe();
|
|
4095
4110
|
}
|
|
4096
4111
|
}
|
|
4097
|
-
onSidePaneDeactivated($event) {
|
|
4098
|
-
this.onComplete.emit(true);
|
|
4099
|
-
}
|
|
4100
4112
|
emitActionClick(action) {
|
|
4101
4113
|
this.onAction.emit(action);
|
|
4102
4114
|
}
|
|
@@ -4114,15 +4126,25 @@ class FormLayoutComponent {
|
|
|
4114
4126
|
this.router$.navigate([action.link]);
|
|
4115
4127
|
}
|
|
4116
4128
|
}
|
|
4129
|
+
onSidePaneDeactivated($event) {
|
|
4130
|
+
this.formPane?.onSidePaneDeactivated($event);
|
|
4131
|
+
this.onComplete.emit(true);
|
|
4132
|
+
}
|
|
4133
|
+
onSidePaneActivated($event) {
|
|
4134
|
+
this.formPane?.onSidePaneActivated($event);
|
|
4135
|
+
}
|
|
4117
4136
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FormLayoutComponent, isStandalone: false, selector: "lib-form-layout", inputs: { title: "title", image: "image", icon: "icon", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\
|
|
4137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FormLayoutComponent, isStandalone: false, selector: "lib-form-layout", inputs: { title: "title", image: "image", icon: "icon", searchPlaceholder: ["search-placeholder", "searchPlaceholder"], actions: "actions", subTitle: ["sub-title", "subTitle"] }, outputs: { onAction: "onAction", onSearch: "onSearch", onComplete: "onComplete" }, viewQueries: [{ propertyName: "searchInput$", first: true, predicate: ["search"], descendants: true }, { propertyName: "formPane", first: true, predicate: ["formPane"], descendants: true }], ngImport: i0, template: "<div class=\"form-layout-container\">\n <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n <div class=\"flex\">\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\n <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\n </div>\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\n <i [class]=\"icon\" class=\"form-header-icon\"></i>\n </div>\n <div class=\"form-header-inner\">\n <h3 class=\"form-title\">{{ title }}</h3>\n <p class=\"form-subtitle\">{{ subTitle }}</p>\n </div>\n </div>\n \n <div class=\"form-header-actions\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\n </svg>-->\n </div>\n <input id=\"search\"\n #search\n class=\"form-search-input\"\n [placeholder]=\"searchPlaceholder\"\n type=\"search\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\">\n </div>\n <button type=\"button\"\n href=\"#\"\n class=\"btn-form-view-header-search\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\"\n href=\"#\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button type=\"button\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"form-content-container\">\n <div [ngClass]=\"{'form-content-container-inner': actions}\">\n <ng-content></ng-content>\n </div>\n </div>\n <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n <router-outlet name=\"formRightPane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\"></router-outlet>\n </lib-side-pane>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible", "pane-size", "params", "template"], outputs: ["onComplete", "onOpen", "onClose"] }] }); }
|
|
4119
4138
|
}
|
|
4120
4139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormLayoutComponent, decorators: [{
|
|
4121
4140
|
type: Component,
|
|
4122
|
-
args: [{ selector: 'lib-form-layout', standalone: false, template: "<div class=\"form-layout-container\">\
|
|
4141
|
+
args: [{ selector: 'lib-form-layout', standalone: false, template: "<div class=\"form-layout-container\">\n <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n <div class=\"flex\">\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"image\">\n <img alt=\"form tab image\" class=\"form-header-image\" [src]=\"image\">\n </div>\n <div class=\"mr-4 flex-shrink-0\" *ngIf=\"icon\">\n <i [class]=\"icon\" class=\"form-header-icon\"></i>\n </div>\n <div class=\"form-header-inner\">\n <h3 class=\"form-title\">{{ title }}</h3>\n <p class=\"form-subtitle\">{{ subTitle }}</p>\n </div>\n </div>\n \n <div class=\"form-header-actions\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n <ng-container *ngSwitchCase=\"'search'\">\n <label for=\"search\" class=\"sr-only\">Search</label>\n <div class=\"search-container\">\n <div class=\"pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center\">\n <!--<svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\" clip-rule=\"evenodd\" />\n </svg>-->\n </div>\n <input id=\"search\"\n #search\n class=\"form-search-input\"\n [placeholder]=\"searchPlaceholder\"\n type=\"search\"\n name=\"search\"\n (input)=\"searchActionType(search.value)\">\n </div>\n <button type=\"button\"\n href=\"#\"\n class=\"btn-form-view-header-search\"\n [title]=\"action.tooltip\"\n (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\"\n href=\"#\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button type=\"button\"\n class=\"ml-1 btn-form-view-header\"\n [title]=\"action.tooltip\"\n (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"form-content-container\">\n <div [ngClass]=\"{'form-content-container-inner': actions}\">\n <ng-content></ng-content>\n </div>\n </div>\n <lib-side-pane #formPane (onComplete)=\"onSidePaneDeactivated($event)\">\n <router-outlet name=\"formRightPane\"\n (activate)=\"onSidePaneActivated($event)\"\n (deactivate)=\"onSidePaneDeactivated($event)\"></router-outlet>\n </lib-side-pane>\n</div>\n" }]
|
|
4123
4142
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { searchInput$: [{
|
|
4124
4143
|
type: ViewChild,
|
|
4125
4144
|
args: ['search']
|
|
4145
|
+
}], formPane: [{
|
|
4146
|
+
type: ViewChild,
|
|
4147
|
+
args: ['formPane']
|
|
4126
4148
|
}], title: [{
|
|
4127
4149
|
type: Input
|
|
4128
4150
|
}], image: [{
|
|
@@ -4226,11 +4248,11 @@ class ErrorComponent {
|
|
|
4226
4248
|
ngOnInit() {
|
|
4227
4249
|
}
|
|
4228
4250
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ErrorComponent, isStandalone: false, selector: "lib-error", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\
|
|
4251
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ErrorComponent, isStandalone: false, selector: "lib-error", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\n <div class=\"bg-gray-600 view-container\">\n <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n <span class=\"block\">500</span>\n </h2>\n <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\n <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\n \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\n </a>\n </div>\n </div>\n</lib-view-layout>\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
|
|
4230
4252
|
}
|
|
4231
4253
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorComponent, decorators: [{
|
|
4232
4254
|
type: Component,
|
|
4233
|
-
args: [{ selector: 'lib-error', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\
|
|
4255
|
+
args: [{ selector: 'lib-error', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"500 - \u03C0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03C4\u03B7\u03BA\u03B5 \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1!\">\n <div class=\"bg-gray-600 view-container\">\n <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n <span class=\"block\">500</span>\n </h2>\n <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03C3\u03C6\u03AC\u03BB\u03BC\u03B1, \u03BA\u03B1\u03C4\u03B9 \u03B4\u03B5\u03BD \u03C0\u03AE\u03B3\u03B5 \u03BA\u03B1\u03BB\u03AC...!</p>\n <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\n \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\n </a>\n </div>\n </div>\n</lib-view-layout>\n" }]
|
|
4234
4256
|
}] });
|
|
4235
4257
|
|
|
4236
4258
|
class PageNotFoundComponent {
|
|
@@ -4238,22 +4260,22 @@ class PageNotFoundComponent {
|
|
|
4238
4260
|
ngOnInit() {
|
|
4239
4261
|
}
|
|
4240
4262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: PageNotFoundComponent, isStandalone: false, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\
|
|
4263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: PageNotFoundComponent, isStandalone: false, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\n <div class=\"text-gray-900\">\n <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\n <span class=\"block\">404</span>\n </h2>\n <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\n <a href=\"/\"\n class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\n \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\n </a>\n </div>\n </div>\n</lib-view-layout>\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
|
|
4242
4264
|
}
|
|
4243
4265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PageNotFoundComponent, decorators: [{
|
|
4244
4266
|
type: Component,
|
|
4245
|
-
args: [{ selector: 'lib-page-not-found', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\
|
|
4267
|
+
args: [{ selector: 'lib-page-not-found', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\n <div class=\"text-gray-900\">\n <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\n <span class=\"block\">404</span>\n </h2>\n <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\n <a href=\"/\"\n class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\n \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\n </a>\n </div>\n </div>\n</lib-view-layout>\n" }]
|
|
4246
4268
|
}], ctorParameters: () => [] });
|
|
4247
4269
|
|
|
4248
4270
|
class UnauthorizedComponent {
|
|
4249
4271
|
constructor() { }
|
|
4250
4272
|
ngOnInit() { }
|
|
4251
4273
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4252
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: UnauthorizedComponent, isStandalone: false, selector: "lib-unauthorized", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\
|
|
4274
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: UnauthorizedComponent, isStandalone: false, selector: "lib-unauthorized", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\n <div class=\"bg-gray-600 view-container\">\n <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n <span class=\"block\">401</span>\n </h2>\n <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\n <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\n \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\n </a>\n </div>\n </div>\n </lib-view-layout>\n\n\n", dependencies: [{ kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] }); }
|
|
4253
4275
|
}
|
|
4254
4276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UnauthorizedComponent, decorators: [{
|
|
4255
4277
|
type: Component,
|
|
4256
|
-
args: [{ selector: 'lib-unauthorized', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\
|
|
4278
|
+
args: [{ selector: 'lib-unauthorized', standalone: false, template: "<lib-view-layout [show-header]=\"false\" title=\"401 - \u03B4\u03B5\u03BD \u03B5\u03C0\u03B9\u03C4\u03C1\u03AD\u03C0\u03B5\u03C4\u03B1\u03B9 \u03B7 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7!\">\n <div class=\"bg-gray-600 view-container\">\n <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\n <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\n <span class=\"block\">401</span>\n </h2>\n <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03B1\u03C4\u03AC\u03BB\u03BB\u03B7\u03BB\u03B1 \u03B4\u03B9\u03BA\u03B1\u03B9\u03CE\u03BC\u03B1\u03C4\u03B1 \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2!</p>\n <a href=\"/\" class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-lg text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\n \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\n </a>\n </div>\n </div>\n </lib-view-layout>\n\n\n" }]
|
|
4257
4279
|
}], ctorParameters: () => [] });
|
|
4258
4280
|
|
|
4259
4281
|
class AddressPipe {
|
|
@@ -4780,24 +4802,24 @@ class ModalContainerComponent {
|
|
|
4780
4802
|
}, this.animationsEnabled ? animationTime.modal : 0);
|
|
4781
4803
|
}
|
|
4782
4804
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4783
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalContainerComponent, isStandalone: false, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0, template: `
|
|
4784
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4785
|
-
<div class="modal-content">
|
|
4786
|
-
<ng-content></ng-content>
|
|
4787
|
-
</div>
|
|
4788
|
-
</div>
|
|
4805
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ModalContainerComponent, isStandalone: false, selector: "lib-modal-container", host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "mousedown": "onClickStarted($event)", "click": "onClickStop($event)", "window:popstate": "onPopState()", "window:keydown.esc": "onEsc($event)" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "config.ariaLabelledBy", "attr.aria-describedby": "config.ariaDescribedby" }, classAttribute: "modal" }, ngImport: i0, template: `
|
|
4806
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4807
|
+
<div class="modal-content">
|
|
4808
|
+
<ng-content></ng-content>
|
|
4809
|
+
</div>
|
|
4810
|
+
</div>
|
|
4789
4811
|
`, isInline: true }); }
|
|
4790
4812
|
}
|
|
4791
4813
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalContainerComponent, decorators: [{
|
|
4792
4814
|
type: Component,
|
|
4793
4815
|
args: [{
|
|
4794
4816
|
selector: 'lib-modal-container',
|
|
4795
|
-
template: `
|
|
4796
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4797
|
-
<div class="modal-content">
|
|
4798
|
-
<ng-content></ng-content>
|
|
4799
|
-
</div>
|
|
4800
|
-
</div>
|
|
4817
|
+
template: `
|
|
4818
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4819
|
+
<div class="modal-content">
|
|
4820
|
+
<ng-content></ng-content>
|
|
4821
|
+
</div>
|
|
4822
|
+
</div>
|
|
4801
4823
|
`,
|
|
4802
4824
|
host: {
|
|
4803
4825
|
class: 'modal',
|