@indice/ng-components 0.2.160-beta.9 → 0.2.162
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.css +4270 -4270
- package/esm2020/lib/controls/advanced-search/advanced-search.component.mjs +3 -3
- package/esm2020/lib/controls/advanced-search/models.mjs +1 -1
- package/esm2020/lib/controls/avatar-initials/avatar-initials.component.mjs +3 -3
- package/esm2020/lib/controls/collapsible-panel/collapsible-panel.component.mjs +3 -3
- package/esm2020/lib/controls/combobox/combobox.component.mjs +3 -3
- package/esm2020/lib/controls/date-picker/date-picker.component.mjs +3 -3
- package/esm2020/lib/controls/drop-down-menu/drop-down-menu.component.mjs +3 -3
- package/esm2020/lib/controls/kpi-tile/kpi-tile.component.mjs +3 -3
- package/esm2020/lib/controls/language-selection/language-selection.component.mjs +3 -3
- package/esm2020/lib/controls/list-view/list-column.component.mjs +1 -1
- package/esm2020/lib/controls/list-view/list-details-section.component.mjs +1 -1
- package/esm2020/lib/controls/list-view/list-tile.component.mjs +1 -1
- package/esm2020/lib/controls/list-view/list-view-empty-state.component.mjs +3 -3
- package/esm2020/lib/controls/list-view/list-view.component.mjs +3 -3
- package/esm2020/lib/controls/nav-links-list/nav-links-list.component.mjs +3 -3
- package/esm2020/lib/controls/notifications-indicator/notifications-indicator.component.mjs +3 -3
- package/esm2020/lib/controls/pager/pager.component.mjs +3 -3
- package/esm2020/lib/controls/side-pane/side-pane.component.mjs +3 -3
- package/esm2020/lib/controls/skeleton-loader/skeleton-loader.component.mjs +3 -3
- package/esm2020/lib/controls/stepper/lib-step-info.directive.mjs +1 -1
- package/esm2020/lib/controls/stepper/lib-step-label.directive.mjs +1 -1
- package/esm2020/lib/controls/stepper/lib-step.component.mjs +9 -9
- package/esm2020/lib/controls/stepper/lib-stepper.component.mjs +3 -3
- package/esm2020/lib/controls/stepper/types/step-selected-event.mjs +1 -1
- package/esm2020/lib/controls/stepper/types/stepper-type.mjs +1 -1
- package/esm2020/lib/controls/tabs/lib-tab-group.component.mjs +3 -3
- package/esm2020/lib/controls/tabs/lib-tab.component.mjs +9 -9
- package/esm2020/lib/controls/toaster/toaster-container.component.mjs +3 -3
- package/esm2020/lib/controls/toaster/toaster.component.mjs +3 -3
- package/esm2020/lib/controls/toggle/toggle.component.mjs +3 -3
- package/esm2020/lib/controls/user-profile-menu/user-profile-menu.component.mjs +3 -3
- package/esm2020/lib/directives/click-outside.directive.mjs +1 -1
- package/esm2020/lib/directives/dynamic-component-host.directive.mjs +1 -1
- package/esm2020/lib/helpers/base-list.component.mjs +1 -1
- package/esm2020/lib/icons.mjs +1 -1
- package/esm2020/lib/layouts/shell/shell-footer/shell-footer.component.mjs +3 -3
- package/esm2020/lib/layouts/shell/shell-header/shell-header.component.mjs +3 -3
- package/esm2020/lib/layouts/shell/shell-layout/shell-layout.component.mjs +3 -3
- package/esm2020/lib/layouts/shell/shell-sidebar/shell-sidebar.component.mjs +3 -3
- package/esm2020/lib/layouts/shell/shell-sidebar-header/shell-sidebar-header.component.mjs +3 -3
- package/esm2020/lib/layouts/shell/shell-sidebar-layout/shell-sidebar-layout.component.mjs +3 -3
- package/esm2020/lib/layouts/shell/shell-stacked-layout/shell-stacked-layout.component.mjs +3 -3
- package/esm2020/lib/layouts/views/form-layout/form-layout.component.mjs +3 -3
- package/esm2020/lib/layouts/views/model-view-layout/model-view-layout.component.mjs +3 -3
- package/esm2020/lib/layouts/views/side-view-layout/side-view-layout.component.mjs +3 -3
- package/esm2020/lib/layouts/views/view-layout/view-layout.component.mjs +3 -3
- package/esm2020/lib/ng-components.module.mjs +1 -1
- package/esm2020/lib/pages/auth/auth-callback/auth-callback.component.mjs +1 -1
- package/esm2020/lib/pages/auth/auth-renew/auth-renew.component.mjs +1 -1
- package/esm2020/lib/pages/auth/logged-out/logged-out.component.mjs +1 -1
- package/esm2020/lib/pages/http-status/error/error.component.mjs +3 -3
- package/esm2020/lib/pages/http-status/page-not-found/page-not-found.component.mjs +3 -3
- package/esm2020/lib/pages/http-status/unauthorized/unauthorized.component.mjs +3 -3
- package/esm2020/lib/pipes/address.pipe.mjs +1 -1
- package/esm2020/lib/pipes/duration-format.pipe.mjs +1 -1
- package/esm2020/lib/services/component-loader/component-loader-options.class.mjs +1 -1
- package/esm2020/lib/services/component-loader/component-loader.class.mjs +1 -1
- package/esm2020/lib/services/component-loader/component-loader.factory.mjs +1 -1
- package/esm2020/lib/services/component-loader/content-ref.class.mjs +1 -1
- package/esm2020/lib/services/modal-service/modal-backdrop-component.mjs +1 -1
- package/esm2020/lib/services/modal-service/modal-container-component.mjs +13 -13
- package/esm2020/lib/services/modal-service/modal-options.class.mjs +1 -1
- package/esm2020/lib/services/modal-service/modal-service.mjs +1 -1
- package/esm2020/lib/services/modal-service/modal-styles.class.mjs +1 -1
- package/esm2020/lib/services/modal-service/modal.class.mjs +1 -1
- package/esm2020/lib/services/toaster.service.mjs +1 -1
- package/esm2020/lib/tokens.mjs +1 -1
- package/esm2020/lib/types.mjs +1 -1
- package/esm2020/public-api.mjs +1 -1
- package/fesm2015/indice-ng-components.mjs +98 -98
- package/fesm2015/indice-ng-components.mjs.map +1 -1
- package/fesm2020/indice-ng-components.mjs +98 -98
- package/fesm2020/indice-ng-components.mjs.map +1 -1
- package/lib/helpers/base-list.component.d.ts +2 -3
- package/modal.css +157 -157
- package/package.json +2 -2
|
@@ -240,10 +240,10 @@ class DropDownMenuComponent {
|
|
|
240
240
|
}
|
|
241
241
|
}
|
|
242
242
|
DropDownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
-
DropDownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder" }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\
|
|
243
|
+
DropDownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: { options: "options", selectedValue: ["selected", "selectedValue"], multiple: "multiple", placeholder: "placeholder" }, outputs: { selectedChange: "selectedChange", selectedChanged: "selectedChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\n <button\n type=\"button\"\n (click)=\"expanded = !expanded\"\n class=\"dropdown-button\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"true\"\n aria-labelledby=\"listbox-label\"\n >\n <span class=\"dropdown-selected-text\">\n {{ 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\n 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 />\n </svg>\n </span>\n </button>\n <ul\n *ngIf=\"expanded && options && options.length > 0\"\n class=\"dropdown-ul\"\n tabindex=\"-1\"\n role=\"listbox\"\n aria-labelledby=\"listbox-label\"\n aria-activedescendant=\"listbox-option-3\"\n >\n <ng-container *ngFor=\"let option of options\">\n <li\n [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\n (click)=\"selectOption(option)\"\n id=\"listbox-option-0\"\n role=\"option\"\n >\n <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\n {{ option.text }}\n </span>\n <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\n <!-- Heroicon name: solid/check -->\n <svg\n class=\"dropdown-li-selected-indicator\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n 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 />\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"] }] });
|
|
244
244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DropDownMenuComponent, decorators: [{
|
|
245
245
|
type: Component,
|
|
246
|
-
args: [{ selector: 'lib-drop-down-menu', template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\
|
|
246
|
+
args: [{ selector: 'lib-drop-down-menu', template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\n <button\n type=\"button\"\n (click)=\"expanded = !expanded\"\n class=\"dropdown-button\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"true\"\n aria-labelledby=\"listbox-label\"\n >\n <span class=\"dropdown-selected-text\">\n {{ 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\n 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 />\n </svg>\n </span>\n </button>\n <ul\n *ngIf=\"expanded && options && options.length > 0\"\n class=\"dropdown-ul\"\n tabindex=\"-1\"\n role=\"listbox\"\n aria-labelledby=\"listbox-label\"\n aria-activedescendant=\"listbox-option-3\"\n >\n <ng-container *ngFor=\"let option of options\">\n <li\n [class]=\"isSelected(option) ? 'dropdown-li-selected' : 'dropdown-li'\"\n (click)=\"selectOption(option)\"\n id=\"listbox-option-0\"\n role=\"option\"\n >\n <span [class]=\"isSelected(option) ? 'dropdown-li-selected-text' : 'dropdown-li-text'\">\n {{ option.text }}\n </span>\n <span *ngIf=\"isSelected(option)\" class=\"dropdown-li-selected-indicator-container\">\n <!-- Heroicon name: solid/check -->\n <svg\n class=\"dropdown-li-selected-indicator\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n 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 />\n </svg>\n </span>\n </li>\n </ng-container>\n </ul>\n</div>\n" }]
|
|
247
247
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
248
248
|
type: Input
|
|
249
249
|
}], selectedValue: [{
|
|
@@ -510,10 +510,10 @@ class PagerComponent {
|
|
|
510
510
|
}
|
|
511
511
|
}
|
|
512
512
|
PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PagerComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
513
|
-
PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: PagerComponent, 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\">\
|
|
513
|
+
PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: PagerComponent, 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-inner\">\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-2\" *ngIf=\"count !== null && count > pageSize\">\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 [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=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [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"], outputs: ["selectedChange", "selectedChanged"] }] });
|
|
514
514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PagerComponent, decorators: [{
|
|
515
515
|
type: Component,
|
|
516
|
-
args: [{ selector: 'lib-pager', template: "<div class=\"pager-container\">\
|
|
516
|
+
args: [{ selector: 'lib-pager', template: "<div class=\"pager-container\">\n <div class=\"pager-container-inner\">\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-2\" *ngIf=\"count !== null && count > pageSize\">\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 [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=\"(pages && pages.length > 0) && (count !== null && count > pageSize)\" [options]=\"pages\" [selected]=\"page\" (selectedChanged)=\"pageOptionChanged($event)\"></lib-drop-down-menu>\n </div>\n </div>\n</div>\n" }]
|
|
517
517
|
}], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { busy: [{
|
|
518
518
|
type: Input
|
|
519
519
|
}], count: [{
|
|
@@ -610,10 +610,10 @@ class ListViewEmptyStateComponent {
|
|
|
610
610
|
}
|
|
611
611
|
}
|
|
612
612
|
ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
-
ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\
|
|
613
|
+
ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
614
614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
|
|
615
615
|
type: Component,
|
|
616
|
-
args: [{ selector: 'lib-list-view-empty-state', template: "<div class=\"p-20\">\
|
|
616
|
+
args: [{ selector: 'lib-list-view-empty-state', template: "<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" }]
|
|
617
617
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
618
618
|
type: Input
|
|
619
619
|
}], subTitle: [{
|
|
@@ -636,10 +636,10 @@ class SkeletonLoaderComponent {
|
|
|
636
636
|
}
|
|
637
637
|
}
|
|
638
638
|
SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
639
|
-
SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\
|
|
639
|
+
SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: { count: "count", type: "type" }, ngImport: i0, template: "<!-- <h1>SKELETON LOADER!</h1> -->\n<ng-container *ngSwitch=\"type\">\n <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n <div class=\"animate-pulse flex flex-col\">\n <div class=\"rounded w-full h-32 bg-gray-200\"></div>\n <div class=\"flex flex-col mt-5\">\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\">\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 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 class=\"flex items-center mt-5\">\n <div>\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n </div>\n <div class=\"flex justify-between w-full ml-3\">\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n <div class=\"animate-pulse flex flex-col\">\n <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n <div class=\"flex flex-col mt-5\">\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\">\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 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 class=\"flex items-center mt-5\">\n <div>\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n </div>\n <div class=\"flex justify-between w-full ml-3\">\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\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 </ng-container>\n </div>\n <div class=\"cards-deck-3\" *ngSwitchDefault>\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n <div class=\"animate-pulse flex flex-col\">\n <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n <div class=\"flex flex-col mt-5\">\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\">\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 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 class=\"flex items-center mt-5\">\n <div>\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n </div>\n <div class=\"flex justify-between w-full ml-3\">\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }] });
|
|
640
640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
641
641
|
type: Component,
|
|
642
|
-
args: [{ selector: 'lib-skeleton-loader', template: "<!-- <h1>SKELETON LOADER!</h1> -->\
|
|
642
|
+
args: [{ selector: 'lib-skeleton-loader', template: "<!-- <h1>SKELETON LOADER!</h1> -->\n<ng-container *ngSwitch=\"type\">\n <div class=\"cards-deck-4\" *ngSwitchCase=\"'tiles'\">\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n <div class=\"animate-pulse flex flex-col\">\n <div class=\"rounded w-full h-32 bg-gray-200\"></div>\n <div class=\"flex flex-col mt-5\">\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\">\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 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 class=\"flex items-center mt-5\">\n <div>\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n </div>\n <div class=\"flex justify-between w-full ml-3\">\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"cards-deck-3\" *ngSwitchCase=\"'large-tiles'\">\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n <div class=\"animate-pulse flex flex-col\">\n <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n <div class=\"flex flex-col mt-5\">\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\">\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 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 class=\"flex items-center mt-5\">\n <div>\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n </div>\n <div class=\"flex justify-between w-full ml-3\">\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"cards-deck-1\" *ngSwitchCase=\"'table'\">\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4\">\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 </ng-container>\n </div>\n <div class=\"cards-deck-3\" *ngSwitchDefault>\n <ng-container *ngFor=\"let i of counter(count)\">\n <div class=\"relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg\">\n <div class=\"animate-pulse flex flex-col\">\n <div class=\"rounded w-full h-52 bg-gray-200\"></div>\n <div class=\"flex flex-col mt-5\">\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\">\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 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 class=\"flex items-center mt-5\">\n <div>\n <div class=\"rounded-full bg-gray-200 w-10 h-10\"></div>\n </div>\n <div class=\"flex justify-between w-full ml-3\">\n <div class=\"w-5/12 h-3 bg-gray-200 rounded\"></div>\n <div class=\"w-2/12 h-3 bg-gray-200 rounded\"></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-container>\n" }]
|
|
643
643
|
}], ctorParameters: function () { return []; }, propDecorators: { count: [{
|
|
644
644
|
type: Input
|
|
645
645
|
}], type: [{
|
|
@@ -984,7 +984,7 @@ DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
984
984
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
985
985
|
multi: true
|
|
986
986
|
}
|
|
987
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex\"\
|
|
987
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex\"\n [ngClass]=\"{'relative': !inline}\"\n (clickOutside)=\"closeCalendar()\">\n\n <input type=\"text\"\n *ngIf=\"!inline\"\n #dateInput\n [readonly]=\"readonly\"\n name=\"dateInput\"\n (blur)=\"onBlur($event)\"\n id=\"dateInput\"\n (focus)=\"showCalendar = false\"\n [value]=\"value | date: displayFormat\"\n class=\"detapicker-input\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\n [placeholder]=\"disabled ? '' : 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\n <div *ngIf=\"showCalendar || inline\"\n [ngClass]=\"{'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\"\n (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\"\n *ngIf=\"!showYears\">\n <div *ngFor=\"let blankday of blankDays\"\n style=\"width: 14.28%\"\n class=\"datepicker-blank-days\">{{blankday}}</div>\n <div *ngFor=\"let date of calendarDates;\"\n style=\"width: 14.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\"\n class=\"datepicker-days\"\n [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n {{date.day}}</div>\n </div>\n </div>\n </div>\n\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" }] });
|
|
988
988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
989
989
|
type: Component,
|
|
990
990
|
args: [{ selector: 'lib-date-picker', providers: [
|
|
@@ -993,7 +993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
993
993
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
994
994
|
multi: true
|
|
995
995
|
}
|
|
996
|
-
], template: "<div class=\"flex\"\
|
|
996
|
+
], template: "<div class=\"flex\"\n [ngClass]=\"{'relative': !inline}\"\n (clickOutside)=\"closeCalendar()\">\n\n <input type=\"text\"\n *ngIf=\"!inline\"\n #dateInput\n [readonly]=\"readonly\"\n name=\"dateInput\"\n (blur)=\"onBlur($event)\"\n id=\"dateInput\"\n (focus)=\"showCalendar = false\"\n [value]=\"value | date: displayFormat\"\n class=\"detapicker-input\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\n [placeholder]=\"disabled ? '' : 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\n <div *ngIf=\"showCalendar || inline\"\n [ngClass]=\"{'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\"\n (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\"\n *ngIf=\"!showYears\">\n <div *ngFor=\"let blankday of blankDays\"\n style=\"width: 14.28%\"\n class=\"datepicker-blank-days\">{{blankday}}</div>\n <div *ngFor=\"let date of calendarDates;\"\n style=\"width: 14.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\"\n class=\"datepicker-days\"\n [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n {{date.day}}</div>\n </div>\n </div>\n </div>\n\n</div>" }]
|
|
997
997
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
998
998
|
type: Inject,
|
|
999
999
|
args: [LOCALE_ID]
|
|
@@ -1113,10 +1113,10 @@ class AdvancedSearchComponent {
|
|
|
1113
1113
|
}
|
|
1114
1114
|
}
|
|
1115
1115
|
AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1116
|
-
AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\
|
|
1116
|
+
AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, 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 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': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\n [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\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 <!-- This example requires Tailwind CSS v2.0+ -->\n <ng-container *ngFor=\"let filter of filters; let i = index\">\n <span *ngIf=\"filter && filter.member\"\n class=\"advanced-search-chips\">\n {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n <button (click)=\"removeFilter(i)\"\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</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: 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: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder"], outputs: ["selectedChange", "selectedChanged"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }] });
|
|
1117
1117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
|
|
1118
1118
|
type: Component,
|
|
1119
|
-
args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\
|
|
1119
|
+
args: [{ selector: 'lib-advanced-search', 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 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': fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined}\"\n [disabled]=\"fieldValue === undefined && fieldValueDateFrom === undefined && fieldValueDateTo === undefined\"\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 <!-- This example requires Tailwind CSS v2.0+ -->\n <ng-container *ngFor=\"let filter of filters; let i = index\">\n <span *ngIf=\"filter && filter.member\"\n class=\"advanced-search-chips\">\n {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\n <button (click)=\"removeFilter(i)\"\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</div>" }]
|
|
1120
1120
|
}], ctorParameters: function () { return []; }, propDecorators: { advancedSearchChanged: [{
|
|
1121
1121
|
type: Output
|
|
1122
1122
|
}], searchOptions: [{
|
|
@@ -1252,10 +1252,10 @@ class ListViewComponent {
|
|
|
1252
1252
|
}
|
|
1253
1253
|
}
|
|
1254
1254
|
ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1255
|
-
ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, 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"], 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 class=\"px-2\">\r\n\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [filters]=\"filters\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></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 </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]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"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\"\r\n [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\"\r\n [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [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\"\r\n [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 class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [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\"\r\n *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 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 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=\"pt-2 px-2\">\r\n\r\n <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || 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 </lib-pager>\r\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: "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: 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: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }] });
|
|
1255
|
+
ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListViewComponent, 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"], 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 class=\"px-2\">\n\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n [search-options]=\"searchOptions\"\n [filters]=\"filters\"\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></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 </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n <ng-container *ngSwitchCase=\"'tiles'\">\n <div [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\"\n [count]=\"5\"\n [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"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\"\n [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\"\n [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\"\n [count]=\"5\"\n [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\"\n [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 class=\"list-view-th-details\"></th>\n </ng-container>\n <ng-container *ngFor=\"let col of columns\">\n <th scope=\"col\"\n [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\"\n *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 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 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\">\n <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n class=\"pt-2\"\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 </lib-pager>\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: "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: 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: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }] });
|
|
1256
1256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
1257
1257
|
type: Component,
|
|
1258
|
-
args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\
|
|
1258
|
+
args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\n\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\n [search-options]=\"searchOptions\"\n [filters]=\"filters\"\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\"></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 </lib-pager>\n</div>\n\n<ng-container [ngSwitch]=\"view\">\n\n <ng-container *ngSwitchCase=\"'tiles'\">\n <div [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\"\n [count]=\"5\"\n [type]=\"'tiles'\"></lib-skeleton-loader>\n\n <ng-container *ngIf=\"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\"\n [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\"\n [class]=\"tilesDeckClass\">\n\n <lib-skeleton-loader *ngIf=\"busy\"\n [count]=\"5\"\n [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\"\n [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 class=\"list-view-th-details\"></th>\n </ng-container>\n <ng-container *ngFor=\"let col of columns\">\n <th scope=\"col\"\n [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\"\n *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 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 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\">\n <lib-pager *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\"\n class=\"pt-2\"\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 </lib-pager>\n</div>" }]
|
|
1259
1259
|
}], ctorParameters: function () { return []; }, propDecorators: { searchOptions: [{
|
|
1260
1260
|
type: Input,
|
|
1261
1261
|
args: ['search-options']
|
|
@@ -1329,10 +1329,10 @@ class CollapsiblePanelComponent {
|
|
|
1329
1329
|
}
|
|
1330
1330
|
}
|
|
1331
1331
|
CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1332
|
-
CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: CollapsiblePanelComponent, selector: "lib-collapsible-panel", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"collapsible-panel-container\">\
|
|
1332
|
+
CollapsiblePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: CollapsiblePanelComponent, 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"] }] });
|
|
1333
1333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
|
|
1334
1334
|
type: Component,
|
|
1335
|
-
args: [{ selector: 'lib-collapsible-panel', template: "<div class=\"collapsible-panel-container\">\
|
|
1335
|
+
args: [{ selector: 'lib-collapsible-panel', 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" }]
|
|
1336
1336
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
1337
1337
|
type: Input
|
|
1338
1338
|
}] } });
|
|
@@ -1355,10 +1355,10 @@ class KpiTileComponent {
|
|
|
1355
1355
|
}
|
|
1356
1356
|
}
|
|
1357
1357
|
KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1358
|
-
KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\
|
|
1358
|
+
KpiTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: KpiTileComponent, selector: "lib-kpi-tile", inputs: { title: "title", busy: "busy", kpi: "kpi" }, outputs: { tileAction: "tile-action" }, ngImport: i0, template: "<div class=\"card\"\n [ngClass]=\"{'card-deck-busy' : busy }\">\n <div class=\"card-body\">\n <div class=\"kpi-tile-title-container\">\n <a href=\"#\"\n class=\"kpi-tile-action\"\n (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n </div>\n <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n <div class=\"card-footer\">\n <div class=\"text-xs\">\n <a href=\"#\"\n class=\"kpi-tile-action\"\n (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n </div>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1359
1359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, decorators: [{
|
|
1360
1360
|
type: Component,
|
|
1361
|
-
args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\
|
|
1361
|
+
args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\n [ngClass]=\"{'card-deck-busy' : busy }\">\n <div class=\"card-body\">\n <div class=\"kpi-tile-title-container\">\n <a href=\"#\"\n class=\"kpi-tile-action\"\n (click)=\"emitTileAction($event)\">{{title || '-'}}</a>\n </div>\n <p class=\"kpi-tile-value\">{{kpi || '-'}}</p>\n <div class=\"card-footer\">\n <div class=\"text-xs\">\n <a href=\"#\"\n class=\"kpi-tile-action\"\n (click)=\"emitTileAction($event)\">\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1</a>\n </div>\n </div>\n </div>\n</div>" }]
|
|
1362
1362
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
1363
1363
|
type: Input
|
|
1364
1364
|
}], busy: [{
|
|
@@ -1405,10 +1405,10 @@ class ToasterComponent {
|
|
|
1405
1405
|
}
|
|
1406
1406
|
}
|
|
1407
1407
|
ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1408
|
-
ToasterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToasterComponent, selector: "lib-toaster", inputs: { toast: "toast", i: "i" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div aria-live=\"assertive\"\
|
|
1408
|
+
ToasterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToasterComponent, 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]" }] });
|
|
1409
1409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
1410
1410
|
type: Component,
|
|
1411
|
-
args: [{ selector: 'lib-toaster', template: "<div aria-live=\"assertive\"\
|
|
1411
|
+
args: [{ selector: 'lib-toaster', 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>" }]
|
|
1412
1412
|
}], ctorParameters: function () { return []; }, propDecorators: { toast: [{
|
|
1413
1413
|
type: Input
|
|
1414
1414
|
}], i: [{
|
|
@@ -1434,10 +1434,10 @@ class ToasterContainerComponent {
|
|
|
1434
1434
|
}
|
|
1435
1435
|
}
|
|
1436
1436
|
ToasterContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1437
|
-
ToasterContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToasterContainerComponent, 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>\
|
|
1437
|
+
ToasterContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ToasterContainerComponent, 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"] }] });
|
|
1438
1438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterContainerComponent, decorators: [{
|
|
1439
1439
|
type: Component,
|
|
1440
|
-
args: [{ selector: 'lib-toaster-container', template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\
|
|
1440
|
+
args: [{ selector: 'lib-toaster-container', template: "<lib-toaster *ngFor=\"let toast of toasts; let i=index\" [toast]=\"toast\" [i]=\"i\" (remove)=\"remove($event)\"></lib-toaster>\n" }]
|
|
1441
1441
|
}], ctorParameters: function () { return [{ type: ToasterService }]; } });
|
|
1442
1442
|
|
|
1443
1443
|
class AvatarInitialsComponent {
|
|
@@ -1475,10 +1475,10 @@ class AvatarInitialsComponent {
|
|
|
1475
1475
|
}
|
|
1476
1476
|
}
|
|
1477
1477
|
AvatarInitialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1478
|
-
AvatarInitialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\
|
|
1478
|
+
AvatarInitialsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AvatarInitialsComponent, 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"] }] });
|
|
1479
1479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
|
|
1480
1480
|
type: Component,
|
|
1481
|
-
args: [{ selector: 'lib-avatar-initials', template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\
|
|
1481
|
+
args: [{ selector: 'lib-avatar-initials', template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\n <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\n</div>\n" }]
|
|
1482
1482
|
}], ctorParameters: function () { return []; }, propDecorators: { name: [{
|
|
1483
1483
|
type: Input
|
|
1484
1484
|
}], large: [{
|
|
@@ -1527,7 +1527,7 @@ ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
1527
1527
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1528
1528
|
multi: true
|
|
1529
1529
|
}
|
|
1530
|
-
], ngImport: i0, template: "<button type=\"button\"\
|
|
1530
|
+
], 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"] }] });
|
|
1531
1531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1532
1532
|
type: Component,
|
|
1533
1533
|
args: [{ selector: 'lib-toggle', providers: [
|
|
@@ -1536,7 +1536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
1536
1536
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1537
1537
|
multi: true
|
|
1538
1538
|
}
|
|
1539
|
-
], template: "<button type=\"button\"\
|
|
1539
|
+
], 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>" }]
|
|
1540
1540
|
}], ctorParameters: function () { return []; }, propDecorators: { value: [{
|
|
1541
1541
|
type: Input
|
|
1542
1542
|
}], disabled: [{
|
|
@@ -1597,10 +1597,10 @@ class SidePaneComponent {
|
|
|
1597
1597
|
}
|
|
1598
1598
|
}
|
|
1599
1599
|
SidePaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SidePaneComponent, deps: [{ token: i1$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1600
|
-
SidePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SidePaneComponent, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"] }, outputs: { onComplete: "onComplete" }, ngImport: i0, template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\
|
|
1600
|
+
SidePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SidePaneComponent, selector: "lib-side-pane", inputs: { showPane: ["visible", "showPane"] }, outputs: { onComplete: "onComplete" }, 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"] }] });
|
|
1601
1601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SidePaneComponent, decorators: [{
|
|
1602
1602
|
type: Component,
|
|
1603
|
-
args: [{ selector: 'lib-side-pane', template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\
|
|
1603
|
+
args: [{ selector: 'lib-side-pane', 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" }]
|
|
1604
1604
|
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
1605
1605
|
type: Inject,
|
|
1606
1606
|
args: [DOCUMENT]
|
|
@@ -1630,10 +1630,10 @@ class NavLinksListComponent {
|
|
|
1630
1630
|
}
|
|
1631
1631
|
}
|
|
1632
1632
|
NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1633
|
-
NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavLinksListComponent, 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"] }, ngImport: i0, template: "\
|
|
1633
|
+
NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavLinksListComponent, 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"] }, ngImport: i0, template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n <div class=\"nav-link-list-container-inner\">\n <ng-container *ngFor=\"let link of links | async\">\n <ng-container [ngSwitch]=\"link.type\">\n <a *ngSwitchCase=\"'router'\"\n href=\"#\"\n [routerLink]=\"[link.path]\"\n [routerLinkActive]=\"navLinkActiveClass\"\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n [class]=\"navLinkClass\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n </a>\n <a *ngSwitchCase=\"'external'\"\n [href]=\"link.path\"\n [attr.target]=\"link.external ? '_blank' : '_self'\"\n [class]=\"navLinkClass\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n </a>\n <a *ngSwitchCase=\"'fragment'\"\n routerLink=\".\"\n [fragment]=\"link.path\"\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
1634
1634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, decorators: [{
|
|
1635
1635
|
type: Component,
|
|
1636
|
-
args: [{ selector: 'lib-nav-links-list', template: "\
|
|
1636
|
+
args: [{ selector: 'lib-nav-links-list', template: "\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\n <div class=\"nav-link-list-container-inner\">\n <ng-container *ngFor=\"let link of links | async\">\n <ng-container [ngSwitch]=\"link.type\">\n <a *ngSwitchCase=\"'router'\"\n href=\"#\"\n [routerLink]=\"[link.path]\"\n [routerLinkActive]=\"navLinkActiveClass\"\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n [class]=\"navLinkClass\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\n </a>\n <a *ngSwitchCase=\"'external'\"\n [href]=\"link.path\"\n [attr.target]=\"link.external ? '_blank' : '_self'\"\n [class]=\"navLinkClass\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n </a>\n <a *ngSwitchCase=\"'fragment'\"\n routerLink=\".\"\n [fragment]=\"link.path\"\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\n </a>\n </ng-container>\n </ng-container>\n </div>\n</div>\n" }]
|
|
1637
1637
|
}], ctorParameters: function () { return []; }, propDecorators: { links: [{
|
|
1638
1638
|
type: Input
|
|
1639
1639
|
}], activeFragment: [{
|
|
@@ -1718,10 +1718,10 @@ class ComboboxComponent {
|
|
|
1718
1718
|
}
|
|
1719
1719
|
}
|
|
1720
1720
|
ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1721
|
-
ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\
|
|
1721
|
+
ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\n <form autocomplete=\"off\" [id]=\"id + '-form'\">\n <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\n class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\n aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\n </form>\n <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\n <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" 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 + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\n <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </li>\n </ul>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\n <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </li>\n</ul>\n<ng-template #defaultItemTemplate let-item>\n <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate let-item>\n <div class=\"grid grid-cols-1\">\n <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\n <div class=\"flex-1 min-w-0\">\n <div class=\"focus:outline-none\">\n <span class=\"absolute\" aria-hidden=\"true\"></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\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">Close</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\"\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"] }] });
|
|
1722
1722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
1723
1723
|
type: Component,
|
|
1724
|
-
args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\
|
|
1724
|
+
args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\n <form autocomplete=\"off\" [id]=\"id + '-form'\">\n <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\n class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\n aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\n </form>\n <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\n <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n </svg>\n <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" 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 + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\n <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </li>\n </ul>\n</div>\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\n <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n </li>\n</ul>\n<ng-template #defaultItemTemplate let-item>\n <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\n</ng-template>\n<ng-template #defaultSelectedItemTemplate let-item>\n <div class=\"grid grid-cols-1\">\n <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\n <div class=\"flex-1 min-w-0\">\n <div class=\"focus:outline-none\">\n <span class=\"absolute\" aria-hidden=\"true\"></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\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">Close</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\"\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>" }]
|
|
1725
1725
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
1726
1726
|
type: Input
|
|
1727
1727
|
}], items: [{
|
|
@@ -1772,19 +1772,19 @@ class LibTabComponent {
|
|
|
1772
1772
|
}
|
|
1773
1773
|
}
|
|
1774
1774
|
LibTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabComponent, deps: [{ token: LIBTABGROUP_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1775
|
-
LibTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabComponent, selector: "lib-tab", inputs: { label: "label", id: "id" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
1776
|
-
<ng-template>
|
|
1777
|
-
<ng-content></ng-content>
|
|
1778
|
-
</ng-template>
|
|
1775
|
+
LibTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabComponent, selector: "lib-tab", inputs: { label: "label", id: "id" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
1776
|
+
<ng-template>
|
|
1777
|
+
<ng-content></ng-content>
|
|
1778
|
+
</ng-template>
|
|
1779
1779
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1780
1780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabComponent, decorators: [{
|
|
1781
1781
|
type: Component,
|
|
1782
1782
|
args: [{
|
|
1783
1783
|
selector: 'lib-tab',
|
|
1784
|
-
template: `
|
|
1785
|
-
<ng-template>
|
|
1786
|
-
<ng-content></ng-content>
|
|
1787
|
-
</ng-template>
|
|
1784
|
+
template: `
|
|
1785
|
+
<ng-template>
|
|
1786
|
+
<ng-content></ng-content>
|
|
1787
|
+
</ng-template>
|
|
1788
1788
|
`,
|
|
1789
1789
|
encapsulation: ViewEncapsulation.None,
|
|
1790
1790
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
@@ -1844,12 +1844,12 @@ class LibTabGroupComponent {
|
|
|
1844
1844
|
LibTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1845
1845
|
LibTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
|
|
1846
1846
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
1847
|
-
], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\
|
|
1847
|
+
], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\n <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</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\" aria-label=\"Tabs\">\n <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n {{ tab.label }}\n </a>\n </nav>\n </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\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: "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"] }] });
|
|
1848
1848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, decorators: [{
|
|
1849
1849
|
type: Component,
|
|
1850
1850
|
args: [{ selector: 'lib-tab-group', providers: [
|
|
1851
1851
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
1852
|
-
], template: "<div class=\"tab-group-select-hidden\">\
|
|
1852
|
+
], template: "<div class=\"tab-group-select-hidden\">\n <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</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\" aria-label=\"Tabs\">\n <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n {{ tab.label }}\n </a>\n </nav>\n </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\n</div>" }]
|
|
1853
1853
|
}], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
|
|
1854
1854
|
type: ContentChildren,
|
|
1855
1855
|
args: [LibTabComponent, { descendants: true }]
|
|
@@ -1924,19 +1924,19 @@ class LibStepComponent {
|
|
|
1924
1924
|
}
|
|
1925
1925
|
}
|
|
1926
1926
|
LibStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepComponent, deps: [{ token: LIBSTEPPER_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1927
|
-
LibStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepComponent, 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: `
|
|
1928
|
-
<ng-template>
|
|
1929
|
-
<ng-content></ng-content>
|
|
1930
|
-
</ng-template>
|
|
1927
|
+
LibStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepComponent, 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: `
|
|
1928
|
+
<ng-template>
|
|
1929
|
+
<ng-content></ng-content>
|
|
1930
|
+
</ng-template>
|
|
1931
1931
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1932
1932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepComponent, decorators: [{
|
|
1933
1933
|
type: Component,
|
|
1934
1934
|
args: [{
|
|
1935
1935
|
selector: 'lib-step',
|
|
1936
|
-
template: `
|
|
1937
|
-
<ng-template>
|
|
1938
|
-
<ng-content></ng-content>
|
|
1939
|
-
</ng-template>
|
|
1936
|
+
template: `
|
|
1937
|
+
<ng-template>
|
|
1938
|
+
<ng-content></ng-content>
|
|
1939
|
+
</ng-template>
|
|
1940
1940
|
`,
|
|
1941
1941
|
encapsulation: ViewEncapsulation.None,
|
|
1942
1942
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
@@ -2056,12 +2056,12 @@ class LibStepperComponent {
|
|
|
2056
2056
|
LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2057
2057
|
LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
|
|
2058
2058
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2059
|
-
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- Bullets -->\r\n <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Completed Step -->\r\n <div class=\"stepper-bullets-completed-step\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-active-step-level1\" 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\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n <nav aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Complete Step -->\r\n <div class=\"group\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-completed-step-container\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-and-text-active-step-level1\" 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\" *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\" *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\" 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\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n <ol class=\"flex items-center\" role=\"list\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" 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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\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\" 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\" aria-current=\"step\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" 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\" 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\" 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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n <ol role=\"list\" class=\"overflow-hidden\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" aria-hidden=\"true\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n <span class=\"h-9 flex items-center\" 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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div href=\"#\" class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\" 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\" *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\" *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\" *ngSwitchCase=\"StepperType.Panels\">\r\n <ol role=\"list\" 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\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n <!-- Completed step -->\r\n <div class=\"group flex items-center w-full\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\r\n </svg>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-900\" *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\" *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\" *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\" *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\" *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\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" 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\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"panels-with-border-ol\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n <!-- Completed Step -->\r\n <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\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\" *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\" *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\" *ngIf=\"step.state === StepState.Active\">\r\n <div aria-current=\"step\">\r\n <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" 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\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" 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\" 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\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></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\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Simple -->\r\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" *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\" *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\" aria-current=\"step\" *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\" *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\" *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\" *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\" [ngTemplateOutlet]=\"step.content\"></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"] }] });
|
|
2059
|
+
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <!-- Bullets -->\n <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n <ol role=\"list\" class=\"stepper-bullets-ol\">\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n <!-- Completed Step -->\n <div class=\"stepper-bullets-completed-step\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\n <span class=\"stepper-bullets-active-step-level1\"></span>\n </span>\n <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n <!-- Upcoming Step -->\n <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n <nav aria-label=\"Progress\">\n <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n <!-- Complete Step -->\n <div class=\"group\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\n </svg>\n </span>\n <span class=\"stepper-bullets-and-text-completed-step-container\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-and-text-active-step-level1\" 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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming Step -->\n <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"stepper-bullets-and-text-upcoming-step\">\n <div class=\"stepper-bullets-and-text-upcoming-step-level1\" 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\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n <ol class=\"flex items-center\" role=\"list\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" 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\" 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 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\" 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\" aria-current=\"step\">\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" 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\" 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\" 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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n <ol role=\"list\" class=\"overflow-hidden\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" aria-hidden=\"true\" *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\" 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 </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n <div class=\"relative flex items-start group\" aria-current=\"step\">\n <span class=\"h-9 flex items-center\" 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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n <div href=\"#\" class=\"relative flex items-start group\">\n <span class=\"h-9 flex items-center\" 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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\" *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\" *ngSwitchCase=\"StepperType.Panels\">\n <ol role=\"list\" 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\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n <!-- Completed step -->\n <div class=\"group flex items-center w-full\" *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\" 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 <span class=\"ml-4 text-sm font-medium text-gray-900\" *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\" *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\" *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\" *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\" *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\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </li>\n </ol>\n </nav>\n <!-- Panels With Border -->\n <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\n <ol role=\"list\" class=\"panels-with-border-ol\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\n <!-- Completed Step -->\n <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\n <div class=\"group\">\n <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></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\" 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 </span>\n <span class=\"panels-with-border-completed-step-level22\">\n <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-completed-step-level222\" *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\" *ngIf=\"step.state === StepState.Active\">\n <div aria-current=\"step\">\n <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-active-step-level222\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n </svg>\n </div>\n </div>\n <!-- Upcoming Step -->\n <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"group\">\n <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm font-medium text-gray-500\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" 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\" aria-hidden=\"true\">\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></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\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n <!-- Simple -->\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" *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\" *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\" aria-current=\"step\" *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\" *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\" *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\" *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\" [ngTemplateOutlet]=\"step.content\"></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"] }] });
|
|
2060
2060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, decorators: [{
|
|
2061
2061
|
type: Component,
|
|
2062
2062
|
args: [{ selector: 'lib-stepper', providers: [
|
|
2063
2063
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2064
|
-
], template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- Bullets -->\r\n <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Completed Step -->\r\n <div class=\"stepper-bullets-completed-step\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-active-step-level1\" 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\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n <nav aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Complete Step -->\r\n <div class=\"group\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-completed-step-container\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-and-text-active-step-level1\" 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\" *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\" *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\" 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\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n <ol class=\"flex items-center\" role=\"list\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" 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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\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\" 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\" aria-current=\"step\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" 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\" 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\" 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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n <ol role=\"list\" class=\"overflow-hidden\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" aria-hidden=\"true\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n <span class=\"h-9 flex items-center\" 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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div href=\"#\" class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\" 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\" *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\" *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\" *ngSwitchCase=\"StepperType.Panels\">\r\n <ol role=\"list\" 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\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n <!-- Completed step -->\r\n <div class=\"group flex items-center w-full\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\r\n </svg>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-900\" *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\" *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\" *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\" *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\" *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\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" 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\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"panels-with-border-ol\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n <!-- Completed Step -->\r\n <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\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\" />\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\" *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\" *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\" *ngIf=\"step.state === StepState.Active\">\r\n <div aria-current=\"step\">\r\n <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" 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\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></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\" *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\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" 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\" 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\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></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\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Simple -->\r\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" *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\" *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\" aria-current=\"step\" *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\" *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\" *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\" *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\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>" }]
|
|
2064
|
+
], template: "<ng-container [ngSwitch]=\"type\">\n <!-- Bullets -->\n <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n <ol role=\"list\" class=\"stepper-bullets-ol\">\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n <!-- Completed Step -->\n <div class=\"stepper-bullets-completed-step\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\n <span class=\"stepper-bullets-active-step-level1\"></span>\n </span>\n <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Step {{ step.index }}</span>\n </div>\n <!-- Upcoming Step -->\n <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n <nav aria-label=\"Progress\">\n <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n <!-- Complete Step -->\n <div class=\"group\" *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\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\" />\n </svg>\n </span>\n <span class=\"stepper-bullets-and-text-completed-step-container\" *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\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n <span class=\"stepper-bullets-and-text-active-step-level1\" 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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n </div>\n <!-- Upcoming Step -->\n <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"stepper-bullets-and-text-upcoming-step\">\n <div class=\"stepper-bullets-and-text-upcoming-step-level1\" 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\" *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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n <ol class=\"flex items-center\" role=\"list\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" 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\" 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 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\" 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\" aria-current=\"step\">\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" 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\" 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\" 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\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n <ol role=\"list\" class=\"overflow-hidden\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" aria-hidden=\"true\" *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\" 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 </span>\n <span class=\"ml-4 min-w-0 flex flex-col\">\n <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n <div class=\"relative flex items-start group\" aria-current=\"step\">\n <span class=\"h-9 flex items-center\" 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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\" *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\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n <div href=\"#\" class=\"relative flex items-start group\">\n <span class=\"h-9 flex items-center\" 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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm text-gray-500\" *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\" *ngSwitchCase=\"StepperType.Panels\">\n <ol role=\"list\" 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\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n <!-- Completed step -->\n <div class=\"group flex items-center w-full\" *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\" 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 <span class=\"ml-4 text-sm font-medium text-gray-900\" *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\" *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\" *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\" *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\" *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\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </li>\n </ol>\n </nav>\n <!-- Panels With Border -->\n <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\n <ol role=\"list\" class=\"panels-with-border-ol\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\n <!-- Completed Step -->\n <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\n <div class=\"group\">\n <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></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\" 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 </span>\n <span class=\"panels-with-border-completed-step-level22\">\n <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-completed-step-level222\" *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\" *ngIf=\"step.state === StepState.Active\">\n <div aria-current=\"step\">\n <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"panels-with-border-active-step-level222\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n </svg>\n </div>\n </div>\n <!-- Upcoming Step -->\n <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\n <div class=\"group\">\n <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></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\" *ngIf=\"step.stepLabel\">\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </span>\n <span class=\"text-sm font-medium text-gray-500\" *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\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" 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\" aria-hidden=\"true\">\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></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\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n <!-- Simple -->\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" 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\" *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\" *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\" aria-current=\"step\" *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\" *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\" *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\" *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\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>" }]
|
|
2065
2065
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
|
|
2066
2066
|
type: ContentChildren,
|
|
2067
2067
|
args: [LibStepComponent, { descendants: true }]
|
|
@@ -2335,10 +2335,10 @@ class ShellSidebarComponent {
|
|
|
2335
2335
|
}
|
|
2336
2336
|
}
|
|
2337
2337
|
ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2338
|
-
ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\
|
|
2338
|
+
ShellSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, 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\n [show-icons]=\"true\"\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'sidebar nav-link group'\"\n [link-active-class]=\"'sidebar nav-link-active group'\">\n </lib-nav-links-list>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
|
|
2339
2339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
|
|
2340
2340
|
type: Component,
|
|
2341
|
-
args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\
|
|
2341
|
+
args: [{ selector: 'lib-shell-sidebar', 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\n [show-icons]=\"true\"\n [links]=\"sectionLinks\"\n [active-fragment]=\"activeFragment\"\n [link-class]=\"'sidebar nav-link group'\"\n [link-active-class]=\"'sidebar nav-link-active group'\">\n </lib-nav-links-list>\n </div>\n</div>\n" }]
|
|
2342
2342
|
}], ctorParameters: function () { return [{ type: i1$1.Router, decorators: [{
|
|
2343
2343
|
type: Inject,
|
|
2344
2344
|
args: [Router]
|
|
@@ -2415,10 +2415,10 @@ class NotificationsIndicatorComponent {
|
|
|
2415
2415
|
}
|
|
2416
2416
|
}
|
|
2417
2417
|
NotificationsIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2418
|
-
NotificationsIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\
|
|
2418
|
+
NotificationsIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NotificationsIndicatorComponent, 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 *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-sm\">\n <a [routerLink]=\"allNotificationsLink!.path\">\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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
2419
2419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
|
|
2420
2420
|
type: Component,
|
|
2421
|
-
args: [{ selector: 'lib-notifications-indicator', template: "<div class=\"relative\"\
|
|
2421
|
+
args: [{ selector: 'lib-notifications-indicator', 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 *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-sm\">\n <a [routerLink]=\"allNotificationsLink!.path\">\n <button type=\"button\" class=\"header-notifications-dropdown-view-all-button\">{{allNotificationsLink!.text}}</button>\n </a>\n </div>\n </div>\n</div>\n" }]
|
|
2422
2422
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2423
2423
|
type: Inject,
|
|
2424
2424
|
args: [APP_NOTIFICATIONS]
|
|
@@ -2444,10 +2444,10 @@ class LanguageSelectionComponent {
|
|
|
2444
2444
|
}
|
|
2445
2445
|
}
|
|
2446
2446
|
LanguageSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component });
|
|
2447
|
-
LanguageSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
2447
|
+
LanguageSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LanguageSelectionComponent, selector: "lib-language-selection", ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\n <span>{{langsService?.selected || langsService?.default}}</span>\n </button>\n\n <div\n [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" 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" }] });
|
|
2448
2448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
|
|
2449
2449
|
type: Component,
|
|
2450
|
-
args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
2450
|
+
args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\n <button class=\"text-blue-300 hover:text-blue-400\" (click)=\"menuExpanded = !menuExpanded\">\n <i class=\"text-xs mr-1 ms-Icon ms-Icon--Globe\"></i>\n <span>{{langsService?.selected || langsService?.default}}</span>\n </button>\n\n <div\n [class]=\"menuExpanded ? 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none':'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\" 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" }]
|
|
2451
2451
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2452
2452
|
type: Inject,
|
|
2453
2453
|
args: [APP_LANGUAGES]
|
|
@@ -2496,10 +2496,10 @@ class UserProfileMenuComponent {
|
|
|
2496
2496
|
}
|
|
2497
2497
|
}
|
|
2498
2498
|
UserProfileMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2499
|
-
UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
2499
|
+
UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, 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\"\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 class=\"avatar-text\">{{this.avatarName}}</span>\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-sm 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-sm 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 [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: 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"] }] });
|
|
2500
2500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
2501
2501
|
type: Component,
|
|
2502
|
-
args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
2502
|
+
args: [{ selector: 'lib-user-profile-menu', 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\"\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 class=\"avatar-text\">{{this.avatarName}}</span>\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-sm 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-sm 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 [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" }]
|
|
2503
2503
|
}], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
|
|
2504
2504
|
type: Inject,
|
|
2505
2505
|
args: [AuthService]
|
|
@@ -2591,10 +2591,10 @@ class ShellHeaderComponent {
|
|
|
2591
2591
|
}
|
|
2592
2592
|
}
|
|
2593
2593
|
ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2594
|
-
ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0, template: "<nav>\
|
|
2594
|
+
ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0, template: "<nav>\n <div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\">\n <div class=\"shell-header-logo-container\">\n <div>\n <a href=\"#\" [routerLink]=\"['/']\"><img 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\"></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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { 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"] }, { kind: "component", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
|
|
2595
2595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, decorators: [{
|
|
2596
2596
|
type: Component,
|
|
2597
|
-
args: [{ selector: 'lib-shell-header', template: "<nav>\
|
|
2597
|
+
args: [{ selector: 'lib-shell-header', template: "<nav>\n <div class=\"shell-header-paddings\">\n <div class=\"shell-header-border\">\n <div class=\"shell-header-menu-container\">\n <div class=\"shell-header-logo-container\">\n <div>\n <a href=\"#\" [routerLink]=\"['/']\"><img 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\"></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" }]
|
|
2598
2598
|
}], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
|
|
2599
2599
|
type: Inject,
|
|
2600
2600
|
args: [AuthService]
|
|
@@ -2640,10 +2640,10 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
|
|
|
2640
2640
|
}
|
|
2641
2641
|
}
|
|
2642
2642
|
ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2643
|
-
ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, template: "<div class=\"shell-header-paddings\">\
|
|
2643
|
+
ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarHeaderComponent, 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\"></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: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { kind: "component", type: LanguageSelectionComponent, selector: "lib-language-selection" }, { kind: "component", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }] });
|
|
2644
2644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
|
|
2645
2645
|
type: Component,
|
|
2646
|
-
args: [{ selector: 'lib-shell-sidebar-header', template: "<div class=\"shell-header-paddings\">\
|
|
2646
|
+
args: [{ selector: 'lib-shell-sidebar-header', 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\"></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" }]
|
|
2647
2647
|
}], ctorParameters: function () { return [{ type: i2$1.AuthService, decorators: [{
|
|
2648
2648
|
type: Inject,
|
|
2649
2649
|
args: [AuthService]
|
|
@@ -2672,10 +2672,10 @@ class ShellSidebarLayoutComponent {
|
|
|
2672
2672
|
}
|
|
2673
2673
|
}
|
|
2674
2674
|
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2675
|
-
ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\
|
|
2675
|
+
ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, template: "<div>\n <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n <div class=\"sidebar-off-canvas-menu-backdrop\" \n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n </div>\n \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 <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n <div class=\"sidebar-off-canvas-layout-container\">\n <!--Close button, show/hide based on off-canvas menu state.-->\n <div class=\"sidebar-off-canvas-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Close sidebar</span>\n <!-- Heroicon name: outline/x -->\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 \n <div class=\"sidebar-off-canvas-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n\n <lib-shell-sidebar></lib-shell-sidebar>\n \n </div>\n \n <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n <!-- Dummy element to force sidebar to shrink to fit close icon -->\n </div>\n </div>\n </div>\n \n <!-- Static sidebar for desktop -->\n <div class=\"sidebar-static-menu-outer-container\">\n \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 <!-- Sidebar component, swap this element with another sidebar if you like -->\n <div class=\"sidebar-static-menu-container-inner\">\n <div class=\"sidebar-static-menu-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n <lib-shell-sidebar></lib-shell-sidebar>\n </div>\n </div>\n </div>\n\n <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n <div class=\"sidebar-static-menu-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <!-- Heroicon name: outline/menu-alt-2 -->\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 \n <!-- sidebar-static-menu-header-container -->\n <div class=\"sidebar-static-menu-header-container\">\n <div class=\"sidebar-static-menu-header-near-container\">\n <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n </div>\n <div class=\"sidebar-static-menu-header-far-container\">\n <lib-shell-sidebar-header \n [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" \n [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n </div>\n </div>\n </div>\n \n <div flex-1>\n <main class=\"shell-content-container-fluid\">\n <div class=\"shell-content-container-inner\">\n <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\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$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { kind: "component", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
|
|
2676
2676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
2677
2677
|
type: Component,
|
|
2678
|
-
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\
|
|
2678
|
+
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\n <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\n <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\n <div class=\"sidebar-off-canvas-menu-backdrop\" \n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\n </div>\n \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 <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\n <div class=\"sidebar-off-canvas-layout-container\">\n <!--Close button, show/hide based on off-canvas menu state.-->\n <div class=\"sidebar-off-canvas-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Close sidebar</span>\n <!-- Heroicon name: outline/x -->\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 \n <div class=\"sidebar-off-canvas-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n\n <lib-shell-sidebar></lib-shell-sidebar>\n \n </div>\n \n <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\n <!-- Dummy element to force sidebar to shrink to fit close icon -->\n </div>\n </div>\n </div>\n \n <!-- Static sidebar for desktop -->\n <div class=\"sidebar-static-menu-outer-container\">\n \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 <!-- Sidebar component, swap this element with another sidebar if you like -->\n <div class=\"sidebar-static-menu-container-inner\">\n <div class=\"sidebar-static-menu-app-logo-container\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n <lib-shell-sidebar></lib-shell-sidebar>\n </div>\n </div>\n </div>\n\n <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\n <div class=\"sidebar-static-menu-toggle-button-container\">\n <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\n <span class=\"sr-only\">Toggle sidebar</span>\n <!-- Heroicon name: outline/menu-alt-2 -->\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 \n <!-- sidebar-static-menu-header-container -->\n <div class=\"sidebar-static-menu-header-container\">\n <div class=\"sidebar-static-menu-header-near-container\">\n <div class=\"sidebar-static-menu-header-app-logo-container\" *ngIf=\"!showMobileSidebar\">\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\n </div>\n </div>\n <div class=\"sidebar-static-menu-header-far-container\">\n <lib-shell-sidebar-header \n [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" \n [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\n </div>\n </div>\n </div>\n \n <div flex-1>\n <main class=\"shell-content-container-fluid\">\n <div class=\"shell-content-container-inner\">\n <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\n </div>\n </main>\n </div>\n </div>\n </div>" }]
|
|
2679
2679
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2680
2680
|
type: Input
|
|
2681
2681
|
}] } });
|
|
@@ -2686,10 +2686,10 @@ class ShellFooterComponent {
|
|
|
2686
2686
|
}
|
|
2687
2687
|
}
|
|
2688
2688
|
ShellFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2689
|
-
ShellFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellFooterComponent, selector: "lib-shell-footer", ngImport: i0, template: "<footer class=\"shell-footer-component-container\">\
|
|
2689
|
+
ShellFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellFooterComponent, 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" }] });
|
|
2690
2690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellFooterComponent, decorators: [{
|
|
2691
2691
|
type: Component,
|
|
2692
|
-
args: [{ selector: 'lib-shell-footer', template: "<footer class=\"shell-footer-component-container\">\
|
|
2692
|
+
args: [{ selector: 'lib-shell-footer', 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" }]
|
|
2693
2693
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2694
2694
|
type: Inject,
|
|
2695
2695
|
args: [APP_LINKS]
|
|
@@ -2701,10 +2701,10 @@ class ShellStackedLayoutComponent {
|
|
|
2701
2701
|
}
|
|
2702
2702
|
}
|
|
2703
2703
|
ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2704
|
-
ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\
|
|
2704
|
+
ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"shell-header-container\" *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\" [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n </lib-shell-header>\n </div>\n</div>\n\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\n<div class=\"shell-footer-container\" *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 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", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { kind: "component", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { kind: "component", type: ShellFooterComponent, selector: "lib-shell-footer" }] });
|
|
2705
2705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
|
|
2706
2706
|
type: Component,
|
|
2707
|
-
args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\
|
|
2707
|
+
args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\" *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\" [show-userName]=\"config?.showUserNameOnHeader\"\n [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\n </lib-shell-header>\n </div>\n</div>\n\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\n<div class=\"shell-footer-container\" *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 hostName=\"Footer\"></div>\n </ng-container>\n <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\n </div>\n</div>" }]
|
|
2708
2708
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2709
2709
|
type: Input
|
|
2710
2710
|
}] } });
|
|
@@ -2780,10 +2780,10 @@ class ShellLayoutComponent {
|
|
|
2780
2780
|
}
|
|
2781
2781
|
}
|
|
2782
2782
|
ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
|
|
2783
|
-
ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\
|
|
2783
|
+
ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\n\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\n </div>\n\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\n </div>\n\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n </lib-side-pane>\n\n <lib-toaster-container></lib-toaster-container>\n\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { kind: "component", type: ToasterContainerComponent, selector: "lib-toaster-container" }, { kind: "component", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { kind: "component", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }] });
|
|
2784
2784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
2785
2785
|
type: Component,
|
|
2786
|
-
args: [{ selector: 'lib-shell-layout', template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\
|
|
2786
|
+
args: [{ selector: 'lib-shell-layout', template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\n\n <!-- STACKED LAYOUT -->\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\n <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\n </div>\n\n <!-- SIDEBAR LAYOUT -->\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\n <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\n </div>\n\n <lib-side-pane #rightPane>\n <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\n </lib-side-pane>\n\n <lib-toaster-container></lib-toaster-container>\n\n</div>" }]
|
|
2787
2787
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2788
2788
|
type: Inject,
|
|
2789
2789
|
args: [DOCUMENT]
|
|
@@ -2859,10 +2859,10 @@ class ViewLayoutComponent {
|
|
|
2859
2859
|
}
|
|
2860
2860
|
}
|
|
2861
2861
|
ViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ViewLayoutComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
2862
|
-
ViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ViewLayoutComponent, 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\">\
|
|
2862
|
+
ViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ViewLayoutComponent, 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\n <div class=\"view-layout-title-container\">\n\n <div class=\"view-layout-title-container-inner\">\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 <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 </div>\n\n <div class=\"flex items-center justify-end\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n\n <ng-container *ngSwitchCase=\"'switch-view'\">\n <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\n <span class=\"inline-block relative\">\n <i [class]=\"action.icon\"></i>\n <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\n </span>\n </button>\n </ng-container>\n\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\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\n type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\n </div>\n <button type=\"button\" href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\" href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n\n\n <ng-container *ngSwitchDefault>\n <button type=\"button\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</header>\n\n<!-- component -->\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\n <ng-content></ng-content>\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.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
2863
2863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ViewLayoutComponent, decorators: [{
|
|
2864
2864
|
type: Component,
|
|
2865
|
-
args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\
|
|
2865
|
+
args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\n\n <div class=\"view-layout-title-container\">\n\n <div class=\"view-layout-title-container-inner\">\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 <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 </div>\n\n <div class=\"flex items-center justify-end\">\n <ng-container *ngFor=\"let action of actions\" [ngSwitch]=\"action.type\">\n\n <ng-container *ngSwitchCase=\"'switch-view'\">\n <button [disabled]=\"view === action.param\" type=\"button\" href=\"#\" class=\"ml-1 disabled:opacity-50 btn-view-header\" (click)=\"switchViewActionClick(action)\">\n <span class=\"inline-block relative\">\n <i [class]=\"action.icon\"></i>\n <span *ngIf=\"view === action.param\" class=\"selected-view-indicator\"></span>\n </span>\n </button>\n </ng-container>\n\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\" #search class=\"search-input\" [placeholder]=\"searchPlaceholder\"\n type=\"search\" name=\"search\" (input)=\"searchActionType(search.value)\" (onsearch)=\"handleClear($event)\">\n </div>\n <button type=\"button\" href=\"#\" class=\"btn-view-header rounded-l-none\" [title]=\"action.tooltip\" (click)=\"searchActionClick(action, search.value)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'router-link'\">\n <button type=\"button\" href=\"#\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"routerLinkActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n\n\n <ng-container *ngSwitchDefault>\n <button type=\"button\" class=\"ml-1 btn-view-header\" [title]=\"action.tooltip\" (click)=\"emitActionClick(action)\">\n <i [class]=\"action.icon\"></i>\n </button>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</header>\n\n<!-- component -->\n<div [class]=\"fluid ? 'view-container-fluid' : 'view-container'\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
2866
2866
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
|
|
2867
2867
|
type: ViewChild,
|
|
2868
2868
|
args: ['search']
|
|
@@ -2920,10 +2920,10 @@ class ModelViewLayoutComponent {
|
|
|
2920
2920
|
}
|
|
2921
2921
|
}
|
|
2922
2922
|
ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
|
|
2923
|
-
ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"] }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\
|
|
2923
|
+
ModelViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ModelViewLayoutComponent, selector: "lib-model-view-layout", inputs: { title: "title", primary: ["primary-links", "primary"], secondary: ["secondary-links", "secondary"], metaItems: ["meta-items", "metaItems"] }, ngImport: i0, template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\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></ng-content>\n </div>\n <!-- menu items -->\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 <a href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n class=\"view-nav-link\">\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 <a href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [routerLink]=\"section.link\"\n class=\"view-nav-link\">\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$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
|
|
2924
2924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
|
|
2925
2925
|
type: Component,
|
|
2926
|
-
args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\
|
|
2926
|
+
args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\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></ng-content>\n </div>\n <!-- menu items -->\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 <a href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLink]=\"section.link\"\n class=\"view-nav-link\">\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 <a href=\"#\"\n [routerLinkActive]=\"['view-nav-link-active']\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [routerLink]=\"section.link\"\n class=\"view-nav-link\">\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" }]
|
|
2927
2927
|
}], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { title: [{
|
|
2928
2928
|
type: Input
|
|
2929
2929
|
}], primary: [{
|
|
@@ -2994,10 +2994,10 @@ class SideViewLayoutComponent {
|
|
|
2994
2994
|
}
|
|
2995
2995
|
}
|
|
2996
2996
|
SideViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SideViewLayoutComponent, deps: [{ token: i1.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
2997
|
-
SideViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SideViewLayoutComponent, 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"] }, outputs: { cancel: "cancel", ok: "ok" }, ngImport: i0, template: "<div class=\"side-view-layout-size-box\">\
|
|
2997
|
+
SideViewLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SideViewLayoutComponent, 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"] }, 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"] }] });
|
|
2998
2998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
|
|
2999
2999
|
type: Component,
|
|
3000
|
-
args: [{ selector: 'lib-side-view-layout', template: "<div class=\"side-view-layout-size-box\">\
|
|
3000
|
+
args: [{ selector: 'lib-side-view-layout', 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" }]
|
|
3001
3001
|
}], ctorParameters: function () { return [{ type: i1.Location }, { type: i1$1.Router }]; }, propDecorators: { title: [{
|
|
3002
3002
|
type: Input
|
|
3003
3003
|
}], showActions: [{
|
|
@@ -3079,10 +3079,10 @@ class FormLayoutComponent {
|
|
|
3079
3079
|
}
|
|
3080
3080
|
}
|
|
3081
3081
|
FormLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormLayoutComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3082
|
-
FormLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: FormLayoutComponent, selector: "lib-form-layout", inputs: { title: "title", 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\">\
|
|
3082
|
+
FormLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: FormLayoutComponent, selector: "lib-form-layout", inputs: { title: "title", 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=\"form-header-inner\">\n <h3 class=\"form-title\">\n {{ title }}\n </h3>\n <p class=\"form-subtitle\">\n {{ subTitle }}\n </p>\n </div>\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", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }] });
|
|
3083
3083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormLayoutComponent, decorators: [{
|
|
3084
3084
|
type: Component,
|
|
3085
|
-
args: [{ selector: 'lib-form-layout', template: "<div class=\"form-layout-container\">\
|
|
3085
|
+
args: [{ selector: 'lib-form-layout', template: "<div class=\"form-layout-container\">\n <div class=\"form-header\" *ngIf=\"title || subTitle || actions\">\n <div class=\"form-header-inner\">\n <h3 class=\"form-title\">\n {{ title }}\n </h3>\n <p class=\"form-subtitle\">\n {{ subTitle }}\n </p>\n </div>\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" }]
|
|
3086
3086
|
}], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
|
|
3087
3087
|
type: ViewChild,
|
|
3088
3088
|
args: ['search']
|
|
@@ -3185,10 +3185,10 @@ class ErrorComponent {
|
|
|
3185
3185
|
}
|
|
3186
3186
|
}
|
|
3187
3187
|
ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3188
|
-
ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ErrorComponent, 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!\">\
|
|
3188
|
+
ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ErrorComponent, 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-sm 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"] }] });
|
|
3189
3189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ErrorComponent, decorators: [{
|
|
3190
3190
|
type: Component,
|
|
3191
|
-
args: [{ selector: 'lib-error', 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!\">\
|
|
3191
|
+
args: [{ selector: 'lib-error', 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-sm 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" }]
|
|
3192
3192
|
}] });
|
|
3193
3193
|
|
|
3194
3194
|
class PageNotFoundComponent {
|
|
@@ -3197,10 +3197,10 @@ class PageNotFoundComponent {
|
|
|
3197
3197
|
}
|
|
3198
3198
|
}
|
|
3199
3199
|
PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3200
|
-
PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: PageNotFoundComponent, 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!\">\
|
|
3200
|
+
PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: PageNotFoundComponent, 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-sm 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"] }] });
|
|
3201
3201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PageNotFoundComponent, decorators: [{
|
|
3202
3202
|
type: Component,
|
|
3203
|
-
args: [{ selector: 'lib-page-not-found', template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\
|
|
3203
|
+
args: [{ selector: 'lib-page-not-found', 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-sm 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" }]
|
|
3204
3204
|
}], ctorParameters: function () { return []; } });
|
|
3205
3205
|
|
|
3206
3206
|
class UnauthorizedComponent {
|
|
@@ -3208,10 +3208,10 @@ class UnauthorizedComponent {
|
|
|
3208
3208
|
ngOnInit() { }
|
|
3209
3209
|
}
|
|
3210
3210
|
UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3211
|
-
UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UnauthorizedComponent, 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!\">\
|
|
3211
|
+
UnauthorizedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: UnauthorizedComponent, 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-sm 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"] }] });
|
|
3212
3212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UnauthorizedComponent, decorators: [{
|
|
3213
3213
|
type: Component,
|
|
3214
|
-
args: [{ selector: 'lib-unauthorized', 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!\">\
|
|
3214
|
+
args: [{ selector: 'lib-unauthorized', 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-sm 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" }]
|
|
3215
3215
|
}], ctorParameters: function () { return []; } });
|
|
3216
3216
|
|
|
3217
3217
|
class AddressPipe {
|
|
@@ -3680,23 +3680,23 @@ class ModalContainerComponent {
|
|
|
3680
3680
|
}
|
|
3681
3681
|
}
|
|
3682
3682
|
ModalContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalOptions }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
3683
|
-
ModalContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ModalContainerComponent, 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: `
|
|
3684
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3685
|
-
<div class="modal-content">
|
|
3686
|
-
<ng-content></ng-content>
|
|
3687
|
-
</div>
|
|
3688
|
-
</div>
|
|
3683
|
+
ModalContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ModalContainerComponent, 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: `
|
|
3684
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3685
|
+
<div class="modal-content">
|
|
3686
|
+
<ng-content></ng-content>
|
|
3687
|
+
</div>
|
|
3688
|
+
</div>
|
|
3689
3689
|
`, isInline: true });
|
|
3690
3690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalContainerComponent, decorators: [{
|
|
3691
3691
|
type: Component,
|
|
3692
3692
|
args: [{
|
|
3693
3693
|
selector: 'lib-modal-container',
|
|
3694
|
-
template: `
|
|
3695
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3696
|
-
<div class="modal-content">
|
|
3697
|
-
<ng-content></ng-content>
|
|
3698
|
-
</div>
|
|
3699
|
-
</div>
|
|
3694
|
+
template: `
|
|
3695
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3696
|
+
<div class="modal-content">
|
|
3697
|
+
<ng-content></ng-content>
|
|
3698
|
+
</div>
|
|
3699
|
+
</div>
|
|
3700
3700
|
`,
|
|
3701
3701
|
host: {
|
|
3702
3702
|
class: 'modal',
|