@indice/ng-components 0.4.0-beta.0 → 0.4.0-beta.2
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/_styles.scss +4324 -4320
- package/fesm2022/indice-ng-components.mjs +116 -114
- package/fesm2022/indice-ng-components.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/modal.css +157 -157
- package/package.json +2 -3
|
@@ -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: [{
|
|
@@ -821,11 +821,11 @@ class BreadcrumbComponent {
|
|
|
821
821
|
});
|
|
822
822
|
}
|
|
823
823
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
824
|
-
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\"\
|
|
824
|
+
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]=\"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\">{{ 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 {{ value.title }}\n </a>\n</ng-template>", 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"] }] }); }
|
|
825
825
|
}
|
|
826
826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
827
827
|
type: Component,
|
|
828
|
-
args: [{ selector: 'lib-breadcrumb', standalone: false, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\
|
|
828
|
+
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]=\"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\">{{ 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 {{ value.title }}\n </a>\n</ng-template>" }]
|
|
829
829
|
}], ctorParameters: () => [{ type: BreadcrumbService }] });
|
|
830
830
|
|
|
831
831
|
class ListColumnComponent {
|
|
@@ -1254,7 +1254,7 @@ class DatepickerComponent {
|
|
|
1254
1254
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1255
1255
|
multi: true
|
|
1256
1256
|
}
|
|
1257
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div [class.relative]=\"!inline\">\
|
|
1257
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div [class.relative]=\"!inline\">\n<div class=\"datepicker-container\" (clickOutside)=\"closeCalendar()\">\n <input *ngIf=\"!inline\"\n #dateInput\n [readonly]=\"readonly\"\n name=\"dateInput\"\n (blur)=\"onBlur($event)\"\n id=\"dateInput\"\n title=\"dateInput\"\n (focus)=\"showCalendar = false\"\n [value]=\"value | date: displayFormat\"\n class=\"datepicker-input\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\n [placeholder]=\"placeholder\">\n\n <button type=\"button\"\n *ngIf=\"!inline\"\n class=\"datepicker-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendar()\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n</div>\n<div *ngIf=\"showCalendar || inline\"\n [class.absolute]=\"!inline\"\n class=\"datepicker-background\"\n style=\"height:18rem;min-width:16rem;\"\n name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\"(click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">\n {{monthNames[month]}}\n </span>\n <span class=\"datepicker-selected-year\">\n {{year}}</span>\n </button>\n </div>\n <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousMonth();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextMonth()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n <ng-template #showYearsPickerTmpl>\n <div>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousYear();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextYear()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n </ng-template>\n </div>\n\n <div class=\"datepicker-wrapper\"\n *ngIf=\"!showYears; else showCalYearsTmpl\">\n <div *ngFor=\"let day of dayNames\"\n class=\"datepicker-day-name\"\n style=\"width: 14.28%\">{{day}}</div>\n </div>\n\n <ng-template #showCalYearsTmpl>\n <div class=\"datepicker-content-wrapper\">\n <div *ngFor=\"let year of showCalendarYears\"\n style=\"width: 18.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\"\n class=\"datepicker-year\"\n [class]=\"year.selected ? 'selected' : 'not-selected'\">\n {{year.year}}</div>\n </div>\n </div>\n </ng-template>\n\n <div class=\"datepicker-content-wrapper\" *ngIf=\"!showYears\">\n <div *ngFor=\"let blankday of blankDays\" style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\n <div *ngFor=\"let date of calendarDates;\" style=\"width: 14.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n {{date.day}}\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.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.DatePipe, name: "date" }] }); }
|
|
1258
1258
|
}
|
|
1259
1259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1260
1260
|
type: Component,
|
|
@@ -1264,7 +1264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1264
1264
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1265
1265
|
multi: true
|
|
1266
1266
|
}
|
|
1267
|
-
], standalone: false, template: "<div [class.relative]=\"!inline\">\
|
|
1267
|
+
], standalone: false, template: "<div [class.relative]=\"!inline\">\n<div class=\"datepicker-container\" (clickOutside)=\"closeCalendar()\">\n <input *ngIf=\"!inline\"\n #dateInput\n [readonly]=\"readonly\"\n name=\"dateInput\"\n (blur)=\"onBlur($event)\"\n id=\"dateInput\"\n title=\"dateInput\"\n (focus)=\"showCalendar = false\"\n [value]=\"value | date: displayFormat\"\n class=\"datepicker-input\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\n [placeholder]=\"placeholder\">\n\n <button type=\"button\"\n *ngIf=\"!inline\"\n class=\"datepicker-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendar()\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n</div>\n<div *ngIf=\"showCalendar || inline\"\n [class.absolute]=\"!inline\"\n class=\"datepicker-background\"\n style=\"height:18rem;min-width:16rem;\"\n name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\"(click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">\n {{monthNames[month]}}\n </span>\n <span class=\"datepicker-selected-year\">\n {{year}}</span>\n </button>\n </div>\n <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousMonth();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextMonth()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n <ng-template #showYearsPickerTmpl>\n <div>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousYear();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextYear()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n </ng-template>\n </div>\n\n <div class=\"datepicker-wrapper\"\n *ngIf=\"!showYears; else showCalYearsTmpl\">\n <div *ngFor=\"let day of dayNames\"\n class=\"datepicker-day-name\"\n style=\"width: 14.28%\">{{day}}</div>\n </div>\n\n <ng-template #showCalYearsTmpl>\n <div class=\"datepicker-content-wrapper\">\n <div *ngFor=\"let year of showCalendarYears\"\n style=\"width: 18.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\"\n class=\"datepicker-year\"\n [class]=\"year.selected ? 'selected' : 'not-selected'\">\n {{year.year}}</div>\n </div>\n </div>\n </ng-template>\n\n <div class=\"datepicker-content-wrapper\" *ngIf=\"!showYears\">\n <div *ngFor=\"let blankday of blankDays\" style=\"width: 14.28%\" class=\"datepicker-blank-days\">{{blankday}}</div>\n <div *ngFor=\"let date of calendarDates;\" style=\"width: 14.28%\" class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\" class=\"datepicker-days\" [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n {{date.day}}\n </div>\n </div>\n </div>\n </div>\n</div>" }]
|
|
1268
1268
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1269
1269
|
type: Inject,
|
|
1270
1270
|
args: [LOCALE_ID]
|
|
@@ -1429,11 +1429,11 @@ class AdvancedSearchComponent {
|
|
|
1429
1429
|
this.advancedSearchChanged.emit(this.filters);
|
|
1430
1430
|
}
|
|
1431
1431
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1432
|
-
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" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"advanced-search-container\">\
|
|
1432
|
+
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" }, 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 \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\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=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\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 \u0391\u03C0\u03CC:\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 \u0388\u03C9\u03C2:\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"] }] }); }
|
|
1433
1433
|
}
|
|
1434
1434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
|
|
1435
1435
|
type: Component,
|
|
1436
|
-
args: [{ selector: 'lib-advanced-search', standalone: false, template: "<div class=\"advanced-search-container\">\
|
|
1436
|
+
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 \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\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=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\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 \u0391\u03C0\u03CC:\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 \u0388\u03C9\u03C2:\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" }]
|
|
1437
1437
|
}], ctorParameters: () => [], propDecorators: { advancedSearchChanged: [{
|
|
1438
1438
|
type: Output
|
|
1439
1439
|
}], operatorsDisabled: [{
|
|
@@ -1457,11 +1457,11 @@ class ListViewEmptyStateComponent {
|
|
|
1457
1457
|
ngOnInit() {
|
|
1458
1458
|
}
|
|
1459
1459
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1460
|
-
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\">\
|
|
1460
|
+
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"] }] }); }
|
|
1461
1461
|
}
|
|
1462
1462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
|
|
1463
1463
|
type: Component,
|
|
1464
|
-
args: [{ selector: 'lib-list-view-empty-state', standalone: false, template: "<div class=\"py-20\">\
|
|
1464
|
+
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>" }]
|
|
1465
1465
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1466
1466
|
type: Input
|
|
1467
1467
|
}], subTitle: [{
|
|
@@ -1484,11 +1484,11 @@ class SkeletonLoaderComponent {
|
|
|
1484
1484
|
return new Array(i);
|
|
1485
1485
|
}
|
|
1486
1486
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1487
|
-
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'\">\
|
|
1487
|
+
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"] }] }); }
|
|
1488
1488
|
}
|
|
1489
1489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
1490
1490
|
type: Component,
|
|
1491
|
-
args: [{ selector: 'lib-skeleton-loader', standalone: false, template: "<div [class]=\"deckClass\" *ngIf=\"type === 'tiles'\">\
|
|
1491
|
+
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>" }]
|
|
1492
1492
|
}], ctorParameters: () => [], propDecorators: { count: [{
|
|
1493
1493
|
type: Input
|
|
1494
1494
|
}], type: [{
|
|
@@ -1625,11 +1625,11 @@ class ListViewComponent {
|
|
|
1625
1625
|
}
|
|
1626
1626
|
}
|
|
1627
1627
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1628
|
-
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"], 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"] }] }); }
|
|
1628
|
+
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"], 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"] }] }); }
|
|
1629
1629
|
}
|
|
1630
1630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
1631
1631
|
type: Component,
|
|
1632
|
-
args: [{ selector: 'lib-list-view', standalone: false, template: "<div>\
|
|
1632
|
+
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" }]
|
|
1633
1633
|
}], ctorParameters: () => [], propDecorators: { searchOptions: [{
|
|
1634
1634
|
type: Input,
|
|
1635
1635
|
args: ['search-options']
|
|
@@ -1705,11 +1705,11 @@ class CollapsiblePanelComponent {
|
|
|
1705
1705
|
ngOnInit() {
|
|
1706
1706
|
}
|
|
1707
1707
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1708
|
-
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\">\
|
|
1708
|
+
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"] }] }); }
|
|
1709
1709
|
}
|
|
1710
1710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
|
|
1711
1711
|
type: Component,
|
|
1712
|
-
args: [{ selector: 'lib-collapsible-panel', standalone: false, template: "<div class=\"collapsible-panel-container\">\
|
|
1712
|
+
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" }]
|
|
1713
1713
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1714
1714
|
type: Input
|
|
1715
1715
|
}] } });
|
|
@@ -1733,11 +1733,11 @@ class KpiTileComponent {
|
|
|
1733
1733
|
return false;
|
|
1734
1734
|
}
|
|
1735
1735
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1736
|
-
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 }\">\
|
|
1736
|
+
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"] }] }); }
|
|
1737
1737
|
}
|
|
1738
1738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiTileComponent, decorators: [{
|
|
1739
1739
|
type: Component,
|
|
1740
|
-
args: [{ selector: 'lib-kpi-tile', standalone: false, template: "<div class=\"card\" [ngClass]=\"{'card-deck-busy' : busy }\">\
|
|
1740
|
+
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>" }]
|
|
1741
1741
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
1742
1742
|
type: Input
|
|
1743
1743
|
}], busy: [{
|
|
@@ -1790,11 +1790,11 @@ class ToasterComponent {
|
|
|
1790
1790
|
setTimeout(() => this.remove.emit(index), 100);
|
|
1791
1791
|
}
|
|
1792
1792
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1793
|
-
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\"\
|
|
1793
|
+
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]" }] }); }
|
|
1794
1794
|
}
|
|
1795
1795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
1796
1796
|
type: Component,
|
|
1797
|
-
args: [{ selector: 'lib-toaster', standalone: false, template: "<div aria-live=\"assertive\"\
|
|
1797
|
+
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>" }]
|
|
1798
1798
|
}], ctorParameters: () => [], propDecorators: { toast: [{
|
|
1799
1799
|
type: Input
|
|
1800
1800
|
}], i: [{
|
|
@@ -1819,11 +1819,11 @@ class ToasterContainerComponent {
|
|
|
1819
1819
|
this.toasts = this.toasts.slice(0, index).concat(this.toasts.slice(index + 1));
|
|
1820
1820
|
}
|
|
1821
1821
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1822
|
-
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>\
|
|
1822
|
+
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"] }] }); }
|
|
1823
1823
|
}
|
|
1824
1824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToasterContainerComponent, decorators: [{
|
|
1825
1825
|
type: Component,
|
|
1826
|
-
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>\
|
|
1826
|
+
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" }]
|
|
1827
1827
|
}], ctorParameters: () => [{ type: ToasterService }] });
|
|
1828
1828
|
|
|
1829
1829
|
class AvatarInitialsComponent {
|
|
@@ -1860,11 +1860,11 @@ class AvatarInitialsComponent {
|
|
|
1860
1860
|
}
|
|
1861
1861
|
}
|
|
1862
1862
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1863
|
-
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'\">\
|
|
1863
|
+
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"] }] }); }
|
|
1864
1864
|
}
|
|
1865
1865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
|
|
1866
1866
|
type: Component,
|
|
1867
|
-
args: [{ selector: 'lib-avatar-initials', standalone: false, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\
|
|
1867
|
+
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" }]
|
|
1868
1868
|
}], ctorParameters: () => [], propDecorators: { name: [{
|
|
1869
1869
|
type: Input
|
|
1870
1870
|
}], large: [{
|
|
@@ -1912,7 +1912,7 @@ class ToggleComponent {
|
|
|
1912
1912
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1913
1913
|
multi: true
|
|
1914
1914
|
}
|
|
1915
|
-
], ngImport: i0, template: "<button type=\"button\"\
|
|
1915
|
+
], 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 ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\n <span aria-hidden=\"true\"\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n class=\"toggle-span\"></span>\n</button>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1916
1916
|
}
|
|
1917
1917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1918
1918
|
type: Component,
|
|
@@ -1922,7 +1922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1922
1922
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1923
1923
|
multi: true
|
|
1924
1924
|
}
|
|
1925
|
-
], standalone: false, template: "<button type=\"button\"\
|
|
1925
|
+
], 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 ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\n <span aria-hidden=\"true\"\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\n class=\"toggle-span\"></span>\n</button>" }]
|
|
1926
1926
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
1927
1927
|
type: Input
|
|
1928
1928
|
}], disabled: [{
|
|
@@ -2009,11 +2009,11 @@ class SidePaneComponent {
|
|
|
2009
2009
|
this.onComplete.emit(true);
|
|
2010
2010
|
}
|
|
2011
2011
|
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 }); }
|
|
2012
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SidePaneComponent, isStandalone: false, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"], size: ["pane-size", "size"] }, outputs: { onComplete: "onComplete", onOpen: "onOpen", onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\
|
|
2012
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SidePaneComponent, isStandalone: false, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"], size: ["pane-size", "size"] }, outputs: { onComplete: "onComplete", onOpen: "onOpen", onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showPane\" 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 <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"] }] }); }
|
|
2013
2013
|
}
|
|
2014
2014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SidePaneComponent, decorators: [{
|
|
2015
2015
|
type: Component,
|
|
2016
|
-
args: [{ selector: 'lib-side-pane', standalone: false, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\
|
|
2016
|
+
args: [{ selector: 'lib-side-pane', standalone: false, template: "<div *ngIf=\"showPane\" 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 <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
2017
2017
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
2018
2018
|
type: Inject,
|
|
2019
2019
|
args: [DOCUMENT]
|
|
@@ -2051,11 +2051,11 @@ class NavLinksListComponent {
|
|
|
2051
2051
|
this.fragmentSub$ = this.activeFragment?.subscribe(fragment => this.fragmentValue = fragment);
|
|
2052
2052
|
}
|
|
2053
2053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2054
|
-
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: "\
|
|
2054
|
+
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" }] }); }
|
|
2055
2055
|
}
|
|
2056
2056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NavLinksListComponent, decorators: [{
|
|
2057
2057
|
type: Component,
|
|
2058
|
-
args: [{ selector: 'lib-nav-links-list', standalone: false, template: "\
|
|
2058
|
+
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" }]
|
|
2059
2059
|
}], ctorParameters: () => [], propDecorators: { links: [{
|
|
2060
2060
|
type: Input
|
|
2061
2061
|
}], activeFragment: [{
|
|
@@ -2160,11 +2160,11 @@ class ComboboxComponent {
|
|
|
2160
2160
|
this.onSearch.emit(searchTerm);
|
|
2161
2161
|
}
|
|
2162
2162
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2163
|
-
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()\">\
|
|
2163
|
+
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"] }] }); }
|
|
2164
2164
|
}
|
|
2165
2165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
2166
2166
|
type: Component,
|
|
2167
|
-
args: [{ selector: 'lib-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\
|
|
2167
|
+
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>" }]
|
|
2168
2168
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2169
2169
|
type: Input
|
|
2170
2170
|
}], placeholder: [{
|
|
@@ -2263,11 +2263,11 @@ class EnhancedComboboxComponent {
|
|
|
2263
2263
|
this.onShowMore.emit();
|
|
2264
2264
|
}
|
|
2265
2265
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EnhancedComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2266
|
-
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()\">\
|
|
2266
|
+
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"] }] }); }
|
|
2267
2267
|
}
|
|
2268
2268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EnhancedComboboxComponent, decorators: [{
|
|
2269
2269
|
type: Component,
|
|
2270
|
-
args: [{ selector: 'lib-enhanced-combobox', standalone: false, template: "<div class=\"combobox-wrapper\" (clickOutside)=\"onClickOutside()\">\
|
|
2270
|
+
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>" }]
|
|
2271
2271
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2272
2272
|
type: Input
|
|
2273
2273
|
}], placeholder: [{
|
|
@@ -2340,20 +2340,20 @@ class LibTabComponent {
|
|
|
2340
2340
|
this.id = this.id || uuid.v4();
|
|
2341
2341
|
}
|
|
2342
2342
|
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 }); }
|
|
2343
|
-
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: `
|
|
2344
|
-
<ng-template>
|
|
2345
|
-
<ng-content></ng-content>
|
|
2346
|
-
</ng-template>
|
|
2343
|
+
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: `
|
|
2344
|
+
<ng-template>
|
|
2345
|
+
<ng-content></ng-content>
|
|
2346
|
+
</ng-template>
|
|
2347
2347
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2348
2348
|
}
|
|
2349
2349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabComponent, decorators: [{
|
|
2350
2350
|
type: Component,
|
|
2351
2351
|
args: [{
|
|
2352
2352
|
selector: 'lib-tab',
|
|
2353
|
-
template: `
|
|
2354
|
-
<ng-template>
|
|
2355
|
-
<ng-content></ng-content>
|
|
2356
|
-
</ng-template>
|
|
2353
|
+
template: `
|
|
2354
|
+
<ng-template>
|
|
2355
|
+
<ng-content></ng-content>
|
|
2356
|
+
</ng-template>
|
|
2357
2357
|
`,
|
|
2358
2358
|
encapsulation: ViewEncapsulation.None,
|
|
2359
2359
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -2422,13 +2422,13 @@ class LibTabGroupComponent {
|
|
|
2422
2422
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2423
2423
|
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: [
|
|
2424
2424
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
2425
|
-
], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\
|
|
2425
|
+
], 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"] }] }); }
|
|
2426
2426
|
}
|
|
2427
2427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibTabGroupComponent, decorators: [{
|
|
2428
2428
|
type: Component,
|
|
2429
2429
|
args: [{ selector: 'lib-tab-group', providers: [
|
|
2430
2430
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
2431
|
-
], standalone: false, template: "<div class=\"tab-group-select-hidden\">\
|
|
2431
|
+
], 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>" }]
|
|
2432
2432
|
}], ctorParameters: () => [], propDecorators: { tabs: [{
|
|
2433
2433
|
type: ContentChildren,
|
|
2434
2434
|
args: [LibTabComponent, { descendants: true }]
|
|
@@ -2504,20 +2504,20 @@ class LibStepComponent {
|
|
|
2504
2504
|
return StepState.Upcoming;
|
|
2505
2505
|
}
|
|
2506
2506
|
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 }); }
|
|
2507
|
-
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: `
|
|
2508
|
-
<ng-template>
|
|
2509
|
-
<ng-content></ng-content>
|
|
2510
|
-
</ng-template>
|
|
2507
|
+
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: `
|
|
2508
|
+
<ng-template>
|
|
2509
|
+
<ng-content></ng-content>
|
|
2510
|
+
</ng-template>
|
|
2511
2511
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2512
2512
|
}
|
|
2513
2513
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepComponent, decorators: [{
|
|
2514
2514
|
type: Component,
|
|
2515
2515
|
args: [{
|
|
2516
2516
|
selector: 'lib-step',
|
|
2517
|
-
template: `
|
|
2518
|
-
<ng-template>
|
|
2519
|
-
<ng-content></ng-content>
|
|
2520
|
-
</ng-template>
|
|
2517
|
+
template: `
|
|
2518
|
+
<ng-template>
|
|
2519
|
+
<ng-content></ng-content>
|
|
2520
|
+
</ng-template>
|
|
2521
2521
|
`,
|
|
2522
2522
|
encapsulation: ViewEncapsulation.None,
|
|
2523
2523
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -2637,13 +2637,13 @@ class LibStepperComponent {
|
|
|
2637
2637
|
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 }); }
|
|
2638
2638
|
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: [
|
|
2639
2639
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2640
|
-
], 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"] }] }); }
|
|
2640
|
+
], 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"] }] }); }
|
|
2641
2641
|
}
|
|
2642
2642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LibStepperComponent, decorators: [{
|
|
2643
2643
|
type: Component,
|
|
2644
2644
|
args: [{ selector: 'lib-stepper', providers: [
|
|
2645
2645
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2646
|
-
], 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>" }]
|
|
2646
|
+
], 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>" }]
|
|
2647
2647
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
2648
2648
|
type: ContentChildren,
|
|
2649
2649
|
args: [LibStepComponent, { descendants: true }]
|
|
@@ -2701,7 +2701,7 @@ class ToggleButtonComponent {
|
|
|
2701
2701
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
2702
2702
|
multi: true
|
|
2703
2703
|
}
|
|
2704
|
-
], ngImport: i0, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\
|
|
2704
|
+
], ngImport: i0, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\n<div class=\"flex items-center\">\n<button type=\"button\"\n (click)=\"changeValue()\"\n [disabled]=\"disabled\"\n class=\"toggle-button-button\" \n [class.toggle-button-bg-false] = \"!value\"\n [class.toggle-button-bg-true] = \"value\"\n [class.toggle-button-button-disabled]=\"disabled\"\n role=\"switch\" \n aria-checked=\"false\">\n <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\n <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\n <span \n class=\"toggle-button-icon-container\"\n [class.toggle-button-icon-container-false] = \"!value\"\n [class.toggle-button-icon-container-true] = \"value\">\n <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n <span \n [class.toggle-button-container-inner-true]=\"value\"\n [class.toggle-button-container-inner-false]=\"!value\"\n class=\"toggle-button-icon-container-inner\"\n aria-hidden=\"true\">\n <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\n <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n <span \n [class.toggle-button-container-inner-true]=\"!value\"\n [class.toggle-button-container-inner-false]=\"value\"\n class=\"toggle-button-icon-container-inner\"\n aria-hidden=\"true\">\n <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\n <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\n </svg>\n </span>\n </span>\n</button>\n<span class=\"ml-3\" id=\"toggle-button-labels\">\n <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\n <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\n <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\n <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\n</span>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2705
2705
|
}
|
|
2706
2706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
2707
2707
|
type: Component,
|
|
@@ -2711,7 +2711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
2711
2711
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
2712
2712
|
multi: true
|
|
2713
2713
|
}
|
|
2714
|
-
], standalone: false, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\
|
|
2714
|
+
], standalone: false, template: "<!-- Enabled: \"bg-indigo-600\", Not Enabled: \"bg-gray-200\" -->\n<div class=\"flex items-center\">\n<button type=\"button\"\n (click)=\"changeValue()\"\n [disabled]=\"disabled\"\n class=\"toggle-button-button\" \n [class.toggle-button-bg-false] = \"!value\"\n [class.toggle-button-bg-true] = \"value\"\n [class.toggle-button-button-disabled]=\"disabled\"\n role=\"switch\" \n aria-checked=\"false\">\n <span class=\"sr-only\">{{value ? textTrue : textFalse}}</span>\n <!-- Enabled: \"translate-x-5\", Not Enabled: \"translate-x-0\" -->\n <span \n class=\"toggle-button-icon-container\"\n [class.toggle-button-icon-container-false] = \"!value\"\n [class.toggle-button-icon-container-true] = \"value\">\n <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n <span \n [class.toggle-button-container-inner-true]=\"value\"\n [class.toggle-button-container-inner-false]=\"!value\"\n class=\"toggle-button-icon-container-inner\"\n aria-hidden=\"true\">\n <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"none\" viewBox=\"0 0 12 12\">\n <path d=\"M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <!-- Enabled: \"opacity-0 ease-out duration-100\", Not Enabled: \"opacity-100 ease-in duration-200\" -->\n <span \n [class.toggle-button-container-inner-true]=\"!value\"\n [class.toggle-button-container-inner-false]=\"value\"\n class=\"toggle-button-icon-container-inner\"\n aria-hidden=\"true\">\n <svg *ngIf=\"icon\" class=\"toggle-button-icon\" fill=\"currentColor\" viewBox=\"0 0 12 12\">\n <path d=\"M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z\" />\n </svg>\n </span>\n </span>\n</button>\n<span class=\"ml-3\" id=\"toggle-button-labels\">\n <div class=\"toggle-button-text\">{{value ? textTrue : textFalse}}</div>\n <div *ngIf=\"text\" class=\"toggle-button-text\">{{text}}</div>\n <div *ngIf=\"description\" class=\"toggle-button-description\">{{description}}</div>\n <div class=\"toggle-button-description\">{{value ? descriptionTrue : descriptionFalse}}</div>\n</span>\n</div>" }]
|
|
2715
2715
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
2716
2716
|
type: Input
|
|
2717
2717
|
}], disabled: [{
|
|
@@ -2753,11 +2753,11 @@ class ToggleButtonsListComponent {
|
|
|
2753
2753
|
this.valueChange.emit(optionValue);
|
|
2754
2754
|
}
|
|
2755
2755
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2756
|
-
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" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\
|
|
2756
|
+
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" }, 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\">\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>", 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"] }] }); }
|
|
2757
2757
|
}
|
|
2758
2758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
|
|
2759
2759
|
type: Component,
|
|
2760
|
-
args: [{ selector: 'lib-toggle-buttons-list', standalone: false, template: "<div class=\"relative items-center inline-flex\">\
|
|
2760
|
+
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\">\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>" }]
|
|
2761
2761
|
}], ctorParameters: () => [], propDecorators: { icon: [{
|
|
2762
2762
|
type: Input
|
|
2763
2763
|
}], options: [{
|
|
@@ -2834,11 +2834,11 @@ class ContentTileComponent {
|
|
|
2834
2834
|
return false;
|
|
2835
2835
|
}
|
|
2836
2836
|
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 }); }
|
|
2837
|
-
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\">\
|
|
2837
|
+
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"] }] }); }
|
|
2838
2838
|
}
|
|
2839
2839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentTileComponent, decorators: [{
|
|
2840
2840
|
type: Component,
|
|
2841
|
-
args: [{ selector: 'lib-content-tile', standalone: false, template: "<div class=\"card bg-white\" [class.card-deck-busy]=\"busy\">\
|
|
2841
|
+
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" }]
|
|
2842
2842
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { title: [{
|
|
2843
2843
|
type: Input
|
|
2844
2844
|
}], busy: [{
|
|
@@ -2890,11 +2890,11 @@ class StatsGridComponent {
|
|
|
2890
2890
|
;
|
|
2891
2891
|
}
|
|
2892
2892
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2893
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: StatsGridComponent, isStandalone: false, selector: "lib-stats-grid", inputs: { busy: "busy", count: "count", mode: "mode", labels: "labels", values: "values", colors: "colors" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!busy\">\
|
|
2893
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: StatsGridComponent, isStandalone: false, selector: "lib-stats-grid", inputs: { busy: "busy", count: "count", mode: "mode", labels: "labels", values: "values", colors: "colors" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n </div>\n </li>\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n </div>\n </li>\n </ng-container>\n </ul>\n </div>\n <div *ngIf=\"busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n </ng-container>\n </ul>\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"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
|
|
2894
2894
|
}
|
|
2895
2895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatsGridComponent, decorators: [{
|
|
2896
2896
|
type: Component,
|
|
2897
|
-
args: [{ selector: 'lib-stats-grid', standalone: false, template: "<div *ngIf=\"!busy\">\
|
|
2897
|
+
args: [{ selector: 'lib-stats-grid', standalone: false, template: "<div *ngIf=\"!busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n </div>\n </li>\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n </div>\n </li>\n </ng-container>\n </ul>\n </div>\n <div *ngIf=\"busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n </ng-container>\n </ul>\n </div> " }]
|
|
2898
2898
|
}], ctorParameters: () => [], propDecorators: { busy: [{
|
|
2899
2899
|
type: Input
|
|
2900
2900
|
}], count: [{
|
|
@@ -2931,11 +2931,11 @@ class ProgressBarComponent {
|
|
|
2931
2931
|
}
|
|
2932
2932
|
}
|
|
2933
2933
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ProgressBarComponent, isStandalone: false, selector: "lib-progress-bar", inputs: { value: "value", valueText: ["value-text", "valueText"], total: "total", totalText: ["total-text", "totalText"], text: "text", busy: "busy" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"progress-bar-container\">\
|
|
2934
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ProgressBarComponent, isStandalone: false, selector: "lib-progress-bar", inputs: { value: "value", valueText: ["value-text", "valueText"], total: "total", totalText: ["total-text", "totalText"], text: "text", busy: "busy" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"progress-bar-container\">\n <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\n <div class=\"progress-bar-backdrop\">\n <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n </div>\n</div>\n ", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2935
2935
|
}
|
|
2936
2936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2937
2937
|
type: Component,
|
|
2938
|
-
args: [{ selector: 'lib-progress-bar', standalone: false, template: "<div class=\"progress-bar-container\">\
|
|
2938
|
+
args: [{ selector: 'lib-progress-bar', standalone: false, template: "<div class=\"progress-bar-container\">\n <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\n <div class=\"progress-bar-backdrop\">\n <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n </div>\n</div>\n " }]
|
|
2939
2939
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
2940
2940
|
type: Input
|
|
2941
2941
|
}], valueText: [{
|
|
@@ -3251,11 +3251,11 @@ class ShellSidebarComponent {
|
|
|
3251
3251
|
this.sectionLinks = this.links[this.sectionLinksPath];
|
|
3252
3252
|
}
|
|
3253
3253
|
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 }); }
|
|
3254
|
-
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 -->\
|
|
3254
|
+
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"] }] }); }
|
|
3255
3255
|
}
|
|
3256
3256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarComponent, decorators: [{
|
|
3257
3257
|
type: Component,
|
|
3258
|
-
args: [{ selector: 'lib-shell-sidebar', standalone: false, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\
|
|
3258
|
+
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>" }]
|
|
3259
3259
|
}], ctorParameters: () => [{ type: i1$1.Router, decorators: [{
|
|
3260
3260
|
type: Inject,
|
|
3261
3261
|
args: [Router]
|
|
@@ -3292,11 +3292,11 @@ class LanguageSelectionComponent {
|
|
|
3292
3292
|
this.menuExpanded = false;
|
|
3293
3293
|
}
|
|
3294
3294
|
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 }); }
|
|
3295
|
-
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)\">\
|
|
3295
|
+
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" }] }); }
|
|
3296
3296
|
}
|
|
3297
3297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
|
|
3298
3298
|
type: Component,
|
|
3299
|
-
args: [{ selector: 'lib-language-selection', standalone: false, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
3299
|
+
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" }]
|
|
3300
3300
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3301
3301
|
type: Inject,
|
|
3302
3302
|
args: [APP_LANGUAGES]
|
|
@@ -3362,11 +3362,11 @@ class NotificationsIndicatorComponent {
|
|
|
3362
3362
|
this.menuExpanded = false;
|
|
3363
3363
|
}
|
|
3364
3364
|
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 }); }
|
|
3365
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NotificationsIndicatorComponent, isStandalone: false, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\
|
|
3365
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: NotificationsIndicatorComponent, isStandalone: false, selector: "lib-notifications-indicator", 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\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</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\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</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\">{{allNotificationsLink!.text}}</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" }] }); }
|
|
3366
3366
|
}
|
|
3367
3367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
|
|
3368
3368
|
type: Component,
|
|
3369
|
-
args: [{ selector: 'lib-notifications-indicator', standalone: false, template: "<div class=\"relative\"\
|
|
3369
|
+
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\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</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\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</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\">{{allNotificationsLink!.text}}</button>\n </a>\n </div>\n </div>\n</div>\n" }]
|
|
3370
3370
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3371
3371
|
type: Inject,
|
|
3372
3372
|
args: [APP_NOTIFICATIONS]
|
|
@@ -3418,11 +3418,11 @@ class UserProfileMenuComponent {
|
|
|
3418
3418
|
this.userMenuExpanded = false;
|
|
3419
3419
|
}
|
|
3420
3420
|
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 }); }
|
|
3421
|
-
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)\">\
|
|
3421
|
+
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-opacity-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-opacity-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"] }] }); }
|
|
3422
3422
|
}
|
|
3423
3423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
3424
3424
|
type: Component,
|
|
3425
|
-
args: [{ selector: 'lib-user-profile-menu', standalone: false, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
3425
|
+
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-opacity-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-opacity-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" }]
|
|
3426
3426
|
}], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
|
|
3427
3427
|
type: Inject,
|
|
3428
3428
|
args: [AuthService]
|
|
@@ -3519,11 +3519,11 @@ class ShellHeaderComponent {
|
|
|
3519
3519
|
}
|
|
3520
3520
|
}
|
|
3521
3521
|
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 }); }
|
|
3522
|
-
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>\
|
|
3522
|
+
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" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
|
|
3523
3523
|
}
|
|
3524
3524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellHeaderComponent, decorators: [{
|
|
3525
3525
|
type: Component,
|
|
3526
|
-
args: [{ selector: 'lib-shell-header', standalone: false, template: "<nav>\
|
|
3526
|
+
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" }]
|
|
3527
3527
|
}], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
|
|
3528
3528
|
type: Inject,
|
|
3529
3529
|
args: [AuthService]
|
|
@@ -3573,11 +3573,11 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
|
|
|
3573
3573
|
this.links = links;
|
|
3574
3574
|
}
|
|
3575
3575
|
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 }); }
|
|
3576
|
-
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\">\
|
|
3576
|
+
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" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name", "show-picture"] }] }); }
|
|
3577
3577
|
}
|
|
3578
3578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
|
|
3579
3579
|
type: Component,
|
|
3580
|
-
args: [{ selector: 'lib-shell-sidebar-header', standalone: false, template: "<div class=\"shell-header-paddings\">\
|
|
3580
|
+
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" }]
|
|
3581
3581
|
}], ctorParameters: () => [{ type: i2$1.AuthService, decorators: [{
|
|
3582
3582
|
type: Inject,
|
|
3583
3583
|
args: [AuthService]
|
|
@@ -3607,11 +3607,11 @@ class ShellSidebarLayoutComponent {
|
|
|
3607
3607
|
this._userSettings.set('MobileSideBar', this.showMobileSidebar);
|
|
3608
3608
|
}
|
|
3609
3609
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [{ token: UserSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3610
|
-
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>\
|
|
3610
|
+
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" }] }); }
|
|
3611
3611
|
}
|
|
3612
3612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
3613
3613
|
type: Component,
|
|
3614
|
-
args: [{ selector: 'lib-shell-sidebar-layout', standalone: false, template: "<div>\
|
|
3614
|
+
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>" }]
|
|
3615
3615
|
}], ctorParameters: () => [{ type: UserSettingsService }], propDecorators: { config: [{
|
|
3616
3616
|
type: Input
|
|
3617
3617
|
}], sidebarFooterTemplate: [{
|
|
@@ -3625,11 +3625,11 @@ class ShellFooterComponent {
|
|
|
3625
3625
|
this.links = links;
|
|
3626
3626
|
}
|
|
3627
3627
|
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 }); }
|
|
3628
|
-
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\">\
|
|
3628
|
+
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" }] }); }
|
|
3629
3629
|
}
|
|
3630
3630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellFooterComponent, decorators: [{
|
|
3631
3631
|
type: Component,
|
|
3632
|
-
args: [{ selector: 'lib-shell-footer', standalone: false, template: "<footer class=\"shell-footer-component-container\">\
|
|
3632
|
+
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" }]
|
|
3633
3633
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3634
3634
|
type: Inject,
|
|
3635
3635
|
args: [APP_LINKS]
|
|
@@ -3641,11 +3641,11 @@ class ShellStackedLayoutComponent {
|
|
|
3641
3641
|
}
|
|
3642
3642
|
ngOnInit() { }
|
|
3643
3643
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3644
|
-
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\"\
|
|
3644
|
+
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"] }] }); }
|
|
3645
3645
|
}
|
|
3646
3646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
|
|
3647
3647
|
type: Component,
|
|
3648
|
-
args: [{ selector: 'lib-shell-stacked-layout', standalone: false, template: "<div class=\"shell-header-container\"\
|
|
3648
|
+
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>" }]
|
|
3649
3649
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
3650
3650
|
type: Input
|
|
3651
3651
|
}], busy: [{
|
|
@@ -3713,11 +3713,11 @@ class ShellLayoutComponent {
|
|
|
3713
3713
|
}
|
|
3714
3714
|
}
|
|
3715
3715
|
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 }); }
|
|
3716
|
-
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\">\
|
|
3716
|
+
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\">\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)=\"rightPane.onSidePaneActivated($event)\"\n (deactivate)=\"rightPane.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"], outputs: ["onComplete", "onOpen", "onClose"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }] }); }
|
|
3717
3717
|
}
|
|
3718
3718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
3719
3719
|
type: Component,
|
|
3720
|
-
args: [{ selector: 'lib-shell-layout', standalone: false, template: "<div [class.hidden]=\"!loaded\" [class.block]=\"loaded\">\
|
|
3720
|
+
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)=\"rightPane.onSidePaneActivated($event)\"\n (deactivate)=\"rightPane.onSidePaneDeactivated($event)\">\n </router-outlet>\n </lib-side-pane>\n <lib-toaster-container></lib-toaster-container>\n</div>" }]
|
|
3721
3721
|
}], ctorParameters: () => [{ type: i1$1.Router }, { type: ComponentLoaderFactory }, { type: undefined, decorators: [{
|
|
3722
3722
|
type: Inject,
|
|
3723
3723
|
args: [SHELL_CONFIG]
|
|
@@ -3793,11 +3793,11 @@ class ViewLayoutComponent {
|
|
|
3793
3793
|
}
|
|
3794
3794
|
}
|
|
3795
3795
|
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 }); }
|
|
3796
|
-
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\">\
|
|
3796
|
+
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]" }] }); }
|
|
3797
3797
|
}
|
|
3798
3798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ViewLayoutComponent, decorators: [{
|
|
3799
3799
|
type: Component,
|
|
3800
|
-
args: [{ selector: 'lib-view-layout', standalone: false, template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\
|
|
3800
|
+
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>" }]
|
|
3801
3801
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { searchInput$: [{
|
|
3802
3802
|
type: ViewChild,
|
|
3803
3803
|
args: ['search']
|
|
@@ -3899,11 +3899,11 @@ class ModelViewLayoutComponent {
|
|
|
3899
3899
|
this.router.navigate([link], { relativeTo: this.route });
|
|
3900
3900
|
}
|
|
3901
3901
|
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 }); }
|
|
3902
|
-
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\">\
|
|
3902
|
+
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\">\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"] }] }); }
|
|
3903
3903
|
}
|
|
3904
3904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
|
|
3905
3905
|
type: Component,
|
|
3906
|
-
args: [{ selector: 'lib-model-view-layout', standalone: false, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [icon]=\"icon\" [busy]=\"busy\">\
|
|
3906
|
+
args: [{ selector: 'lib-model-view-layout', standalone: false, template: "<lib-view-layout [title]=\"title || ' '\" [meta-items]=\"metaItems\" [actions]=\"actions\" [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" }]
|
|
3907
3907
|
}], ctorParameters: () => [{ type: i1.Location }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { title: [{
|
|
3908
3908
|
type: Input
|
|
3909
3909
|
}], primary: [{
|
|
@@ -3984,11 +3984,11 @@ class SideViewLayoutComponent {
|
|
|
3984
3984
|
}
|
|
3985
3985
|
}
|
|
3986
3986
|
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 }); }
|
|
3987
|
-
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\">\
|
|
3987
|
+
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"] }] }); }
|
|
3988
3988
|
}
|
|
3989
3989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
|
|
3990
3990
|
type: Component,
|
|
3991
|
-
args: [{ selector: 'lib-side-view-layout', standalone: false, template: "<div class=\"side-view-layout-size-box\">\
|
|
3991
|
+
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" }]
|
|
3992
3992
|
}], ctorParameters: () => [{ type: i1.Location }, { type: i1$1.Router }], propDecorators: { title: [{
|
|
3993
3993
|
type: Input
|
|
3994
3994
|
}], showActions: [{
|
|
@@ -4074,11 +4074,11 @@ class FormLayoutComponent {
|
|
|
4074
4074
|
}
|
|
4075
4075
|
}
|
|
4076
4076
|
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 }); }
|
|
4077
|
-
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\">\
|
|
4077
|
+
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\">\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)=\"formPane.onSidePaneActivated($event)\"\n (deactivate)=\"formPane.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"], outputs: ["onComplete", "onOpen", "onClose"] }] }); }
|
|
4078
4078
|
}
|
|
4079
4079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FormLayoutComponent, decorators: [{
|
|
4080
4080
|
type: Component,
|
|
4081
|
-
args: [{ selector: 'lib-form-layout', standalone: false, template: "<div class=\"form-layout-container\">\
|
|
4081
|
+
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)=\"formPane.onSidePaneActivated($event)\"\n (deactivate)=\"formPane.onSidePaneDeactivated($event)\"></router-outlet>\n </lib-side-pane>\n</div>\n" }]
|
|
4082
4082
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { searchInput$: [{
|
|
4083
4083
|
type: ViewChild,
|
|
4084
4084
|
args: ['search']
|
|
@@ -4185,11 +4185,11 @@ class ErrorComponent {
|
|
|
4185
4185
|
ngOnInit() {
|
|
4186
4186
|
}
|
|
4187
4187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4188
|
-
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!\">\
|
|
4188
|
+
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"] }] }); }
|
|
4189
4189
|
}
|
|
4190
4190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorComponent, decorators: [{
|
|
4191
4191
|
type: Component,
|
|
4192
|
-
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!\">\
|
|
4192
|
+
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" }]
|
|
4193
4193
|
}] });
|
|
4194
4194
|
|
|
4195
4195
|
class PageNotFoundComponent {
|
|
@@ -4197,22 +4197,22 @@ class PageNotFoundComponent {
|
|
|
4197
4197
|
ngOnInit() {
|
|
4198
4198
|
}
|
|
4199
4199
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4200
|
-
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!\">\
|
|
4200
|
+
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"] }] }); }
|
|
4201
4201
|
}
|
|
4202
4202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PageNotFoundComponent, decorators: [{
|
|
4203
4203
|
type: Component,
|
|
4204
|
-
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!\">\
|
|
4204
|
+
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" }]
|
|
4205
4205
|
}], ctorParameters: () => [] });
|
|
4206
4206
|
|
|
4207
4207
|
class UnauthorizedComponent {
|
|
4208
4208
|
constructor() { }
|
|
4209
4209
|
ngOnInit() { }
|
|
4210
4210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4211
|
-
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!\">\
|
|
4211
|
+
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"] }] }); }
|
|
4212
4212
|
}
|
|
4213
4213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: UnauthorizedComponent, decorators: [{
|
|
4214
4214
|
type: Component,
|
|
4215
|
-
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!\">\
|
|
4215
|
+
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" }]
|
|
4216
4216
|
}], ctorParameters: () => [] });
|
|
4217
4217
|
|
|
4218
4218
|
class AddressPipe {
|
|
@@ -4737,24 +4737,24 @@ class ModalContainerComponent {
|
|
|
4737
4737
|
}, this.animationsEnabled ? animationTime.modal : 0);
|
|
4738
4738
|
}
|
|
4739
4739
|
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 }); }
|
|
4740
|
-
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: `
|
|
4741
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4742
|
-
<div class="modal-content">
|
|
4743
|
-
<ng-content></ng-content>
|
|
4744
|
-
</div>
|
|
4745
|
-
</div>
|
|
4740
|
+
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: `
|
|
4741
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4742
|
+
<div class="modal-content">
|
|
4743
|
+
<ng-content></ng-content>
|
|
4744
|
+
</div>
|
|
4745
|
+
</div>
|
|
4746
4746
|
`, isInline: true }); }
|
|
4747
4747
|
}
|
|
4748
4748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ModalContainerComponent, decorators: [{
|
|
4749
4749
|
type: Component,
|
|
4750
4750
|
args: [{
|
|
4751
4751
|
selector: 'lib-modal-container',
|
|
4752
|
-
template: `
|
|
4753
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4754
|
-
<div class="modal-content">
|
|
4755
|
-
<ng-content></ng-content>
|
|
4756
|
-
</div>
|
|
4757
|
-
</div>
|
|
4752
|
+
template: `
|
|
4753
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
4754
|
+
<div class="modal-content">
|
|
4755
|
+
<ng-content></ng-content>
|
|
4756
|
+
</div>
|
|
4757
|
+
</div>
|
|
4758
4758
|
`,
|
|
4759
4759
|
host: {
|
|
4760
4760
|
class: 'modal',
|
|
@@ -5088,7 +5088,8 @@ class IndiceComponentsModule {
|
|
|
5088
5088
|
ProgressBarComponent], imports: [CommonModule,
|
|
5089
5089
|
RouterModule,
|
|
5090
5090
|
IndiceAuthModule,
|
|
5091
|
-
FormsModule], exports: [
|
|
5091
|
+
FormsModule], exports: [RouterModule,
|
|
5092
|
+
AddressPipe,
|
|
5092
5093
|
AdvancedSearchComponent,
|
|
5093
5094
|
AuthCallbackComponent,
|
|
5094
5095
|
AuthRenewComponent,
|
|
@@ -5142,7 +5143,7 @@ class IndiceComponentsModule {
|
|
|
5142
5143
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
|
|
5143
5144
|
RouterModule,
|
|
5144
5145
|
IndiceAuthModule,
|
|
5145
|
-
FormsModule] }); }
|
|
5146
|
+
FormsModule, RouterModule] }); }
|
|
5146
5147
|
}
|
|
5147
5148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IndiceComponentsModule, decorators: [{
|
|
5148
5149
|
type: NgModule,
|
|
@@ -5216,6 +5217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
5216
5217
|
FormsModule
|
|
5217
5218
|
],
|
|
5218
5219
|
exports: [
|
|
5220
|
+
RouterModule,
|
|
5219
5221
|
AddressPipe,
|
|
5220
5222
|
AdvancedSearchComponent,
|
|
5221
5223
|
AuthCallbackComponent,
|