@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
|
@@ -242,10 +242,10 @@ class DropDownMenuComponent {
|
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
244
|
DropDownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DropDownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
245
|
-
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)\">\
|
|
245
|
+
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"] }] });
|
|
246
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DropDownMenuComponent, decorators: [{
|
|
247
247
|
type: Component,
|
|
248
|
-
args: [{ selector: 'lib-drop-down-menu', template: "<div class=\"dropdown-container\" (clickOutside)=\"onClickOutside($event)\">\
|
|
248
|
+
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" }]
|
|
249
249
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
250
250
|
type: Input
|
|
251
251
|
}], selectedValue: [{
|
|
@@ -512,10 +512,10 @@ class PagerComponent {
|
|
|
512
512
|
}
|
|
513
513
|
}
|
|
514
514
|
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 });
|
|
515
|
-
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\">\
|
|
515
|
+
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"] }] });
|
|
516
516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PagerComponent, decorators: [{
|
|
517
517
|
type: Component,
|
|
518
|
-
args: [{ selector: 'lib-pager', template: "<div class=\"pager-container\">\
|
|
518
|
+
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" }]
|
|
519
519
|
}], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { busy: [{
|
|
520
520
|
type: Input
|
|
521
521
|
}], count: [{
|
|
@@ -612,10 +612,10 @@ class ListViewEmptyStateComponent {
|
|
|
612
612
|
}
|
|
613
613
|
}
|
|
614
614
|
ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
615
|
-
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\">\
|
|
615
|
+
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"] }] });
|
|
616
616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
|
|
617
617
|
type: Component,
|
|
618
|
-
args: [{ selector: 'lib-list-view-empty-state', template: "<div class=\"p-20\">\
|
|
618
|
+
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" }]
|
|
619
619
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
620
620
|
type: Input
|
|
621
621
|
}], subTitle: [{
|
|
@@ -638,10 +638,10 @@ class SkeletonLoaderComponent {
|
|
|
638
638
|
}
|
|
639
639
|
}
|
|
640
640
|
SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
641
|
-
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> -->\
|
|
641
|
+
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]" }] });
|
|
642
642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
643
643
|
type: Component,
|
|
644
|
-
args: [{ selector: 'lib-skeleton-loader', template: "<!-- <h1>SKELETON LOADER!</h1> -->\
|
|
644
|
+
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" }]
|
|
645
645
|
}], ctorParameters: function () { return []; }, propDecorators: { count: [{
|
|
646
646
|
type: Input
|
|
647
647
|
}], type: [{
|
|
@@ -992,7 +992,7 @@ DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
992
992
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
993
993
|
multi: true
|
|
994
994
|
}
|
|
995
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex\"\
|
|
995
|
+
], 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" }] });
|
|
996
996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
997
997
|
type: Component,
|
|
998
998
|
args: [{ selector: 'lib-date-picker', providers: [
|
|
@@ -1001,7 +1001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
1001
1001
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1002
1002
|
multi: true
|
|
1003
1003
|
}
|
|
1004
|
-
], template: "<div class=\"flex\"\
|
|
1004
|
+
], 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>" }]
|
|
1005
1005
|
}], ctorParameters: function () {
|
|
1006
1006
|
return [{ type: undefined, decorators: [{
|
|
1007
1007
|
type: Inject,
|
|
@@ -1124,10 +1124,10 @@ class AdvancedSearchComponent {
|
|
|
1124
1124
|
}
|
|
1125
1125
|
}
|
|
1126
1126
|
AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1127
|
-
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\">\
|
|
1127
|
+
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"] }] });
|
|
1128
1128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
|
|
1129
1129
|
type: Component,
|
|
1130
|
-
args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\
|
|
1130
|
+
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>" }]
|
|
1131
1131
|
}], ctorParameters: function () { return []; }, propDecorators: { advancedSearchChanged: [{
|
|
1132
1132
|
type: Output
|
|
1133
1133
|
}], searchOptions: [{
|
|
@@ -1263,10 +1263,10 @@ class ListViewComponent {
|
|
|
1263
1263
|
}
|
|
1264
1264
|
}
|
|
1265
1265
|
ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1266
|
-
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"] }] });
|
|
1266
|
+
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"] }] });
|
|
1267
1267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
1268
1268
|
type: Component,
|
|
1269
|
-
args: [{ selector: 'lib-list-view', template: "<div class=\"px-2\">\
|
|
1269
|
+
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>" }]
|
|
1270
1270
|
}], ctorParameters: function () { return []; }, propDecorators: { searchOptions: [{
|
|
1271
1271
|
type: Input,
|
|
1272
1272
|
args: ['search-options']
|
|
@@ -1340,10 +1340,10 @@ class CollapsiblePanelComponent {
|
|
|
1340
1340
|
}
|
|
1341
1341
|
}
|
|
1342
1342
|
CollapsiblePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1343
|
-
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\">\
|
|
1343
|
+
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"] }] });
|
|
1344
1344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CollapsiblePanelComponent, decorators: [{
|
|
1345
1345
|
type: Component,
|
|
1346
|
-
args: [{ selector: 'lib-collapsible-panel', template: "<div class=\"collapsible-panel-container\">\
|
|
1346
|
+
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" }]
|
|
1347
1347
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
1348
1348
|
type: Input
|
|
1349
1349
|
}] } });
|
|
@@ -1366,10 +1366,10 @@ class KpiTileComponent {
|
|
|
1366
1366
|
}
|
|
1367
1367
|
}
|
|
1368
1368
|
KpiTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1369
|
-
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\"\
|
|
1369
|
+
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"] }] });
|
|
1370
1370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KpiTileComponent, decorators: [{
|
|
1371
1371
|
type: Component,
|
|
1372
|
-
args: [{ selector: 'lib-kpi-tile', template: "<div class=\"card\"\
|
|
1372
|
+
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>" }]
|
|
1373
1373
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
1374
1374
|
type: Input
|
|
1375
1375
|
}], busy: [{
|
|
@@ -1416,10 +1416,10 @@ class ToasterComponent {
|
|
|
1416
1416
|
}
|
|
1417
1417
|
}
|
|
1418
1418
|
ToasterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1419
|
-
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\"\
|
|
1419
|
+
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]" }] });
|
|
1420
1420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
1421
1421
|
type: Component,
|
|
1422
|
-
args: [{ selector: 'lib-toaster', template: "<div aria-live=\"assertive\"\
|
|
1422
|
+
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>" }]
|
|
1423
1423
|
}], ctorParameters: function () { return []; }, propDecorators: { toast: [{
|
|
1424
1424
|
type: Input
|
|
1425
1425
|
}], i: [{
|
|
@@ -1445,10 +1445,10 @@ class ToasterContainerComponent {
|
|
|
1445
1445
|
}
|
|
1446
1446
|
}
|
|
1447
1447
|
ToasterContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterContainerComponent, deps: [{ token: ToasterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1448
|
-
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>\
|
|
1448
|
+
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"] }] });
|
|
1449
1449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToasterContainerComponent, decorators: [{
|
|
1450
1450
|
type: Component,
|
|
1451
|
-
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>\
|
|
1451
|
+
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" }]
|
|
1452
1452
|
}], ctorParameters: function () { return [{ type: ToasterService }]; } });
|
|
1453
1453
|
|
|
1454
1454
|
class AvatarInitialsComponent {
|
|
@@ -1486,10 +1486,10 @@ class AvatarInitialsComponent {
|
|
|
1486
1486
|
}
|
|
1487
1487
|
}
|
|
1488
1488
|
AvatarInitialsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1489
|
-
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'\">\
|
|
1489
|
+
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"] }] });
|
|
1490
1490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
|
|
1491
1491
|
type: Component,
|
|
1492
|
-
args: [{ selector: 'lib-avatar-initials', template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\
|
|
1492
|
+
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" }]
|
|
1493
1493
|
}], ctorParameters: function () { return []; }, propDecorators: { name: [{
|
|
1494
1494
|
type: Input
|
|
1495
1495
|
}], large: [{
|
|
@@ -1538,7 +1538,7 @@ ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
1538
1538
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1539
1539
|
multi: true
|
|
1540
1540
|
}
|
|
1541
|
-
], ngImport: i0, template: "<button type=\"button\"\
|
|
1541
|
+
], 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"] }] });
|
|
1542
1542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1543
1543
|
type: Component,
|
|
1544
1544
|
args: [{ selector: 'lib-toggle', providers: [
|
|
@@ -1547,7 +1547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
1547
1547
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1548
1548
|
multi: true
|
|
1549
1549
|
}
|
|
1550
|
-
], template: "<button type=\"button\"\
|
|
1550
|
+
], 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>" }]
|
|
1551
1551
|
}], ctorParameters: function () { return []; }, propDecorators: { value: [{
|
|
1552
1552
|
type: Input
|
|
1553
1553
|
}], disabled: [{
|
|
@@ -1609,10 +1609,10 @@ class SidePaneComponent {
|
|
|
1609
1609
|
}
|
|
1610
1610
|
}
|
|
1611
1611
|
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 });
|
|
1612
|
-
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\">\
|
|
1612
|
+
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"] }] });
|
|
1613
1613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SidePaneComponent, decorators: [{
|
|
1614
1614
|
type: Component,
|
|
1615
|
-
args: [{ selector: 'lib-side-pane', template: "<div *ngIf=\"showPane\" class=\"side-pane-outer-container\" aria-labelledby=\"slide-over\" role=\"dialog\" aria-modal=\"true\">\
|
|
1615
|
+
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" }]
|
|
1616
1616
|
}], ctorParameters: function () {
|
|
1617
1617
|
return [{ type: i1$1.Router }, { type: undefined, decorators: [{
|
|
1618
1618
|
type: Inject,
|
|
@@ -1646,10 +1646,10 @@ class NavLinksListComponent {
|
|
|
1646
1646
|
}
|
|
1647
1647
|
}
|
|
1648
1648
|
NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1649
|
-
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: "\
|
|
1649
|
+
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" }] });
|
|
1650
1650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, decorators: [{
|
|
1651
1651
|
type: Component,
|
|
1652
|
-
args: [{ selector: 'lib-nav-links-list', template: "\
|
|
1652
|
+
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" }]
|
|
1653
1653
|
}], ctorParameters: function () { return []; }, propDecorators: { links: [{
|
|
1654
1654
|
type: Input
|
|
1655
1655
|
}], activeFragment: [{
|
|
@@ -1734,10 +1734,10 @@ class ComboboxComponent {
|
|
|
1734
1734
|
}
|
|
1735
1735
|
}
|
|
1736
1736
|
ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1737
|
-
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\">\
|
|
1737
|
+
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"] }] });
|
|
1738
1738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
1739
1739
|
type: Component,
|
|
1740
|
-
args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\
|
|
1740
|
+
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>" }]
|
|
1741
1741
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
1742
1742
|
type: Input
|
|
1743
1743
|
}], items: [{
|
|
@@ -1789,19 +1789,19 @@ class LibTabComponent {
|
|
|
1789
1789
|
}
|
|
1790
1790
|
}
|
|
1791
1791
|
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 });
|
|
1792
|
-
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: `
|
|
1793
|
-
<ng-template>
|
|
1794
|
-
<ng-content></ng-content>
|
|
1795
|
-
</ng-template>
|
|
1792
|
+
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: `
|
|
1793
|
+
<ng-template>
|
|
1794
|
+
<ng-content></ng-content>
|
|
1795
|
+
</ng-template>
|
|
1796
1796
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1797
1797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabComponent, decorators: [{
|
|
1798
1798
|
type: Component,
|
|
1799
1799
|
args: [{
|
|
1800
1800
|
selector: 'lib-tab',
|
|
1801
|
-
template: `
|
|
1802
|
-
<ng-template>
|
|
1803
|
-
<ng-content></ng-content>
|
|
1804
|
-
</ng-template>
|
|
1801
|
+
template: `
|
|
1802
|
+
<ng-template>
|
|
1803
|
+
<ng-content></ng-content>
|
|
1804
|
+
</ng-template>
|
|
1805
1805
|
`,
|
|
1806
1806
|
encapsulation: ViewEncapsulation.None,
|
|
1807
1807
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
@@ -1866,12 +1866,12 @@ class LibTabGroupComponent {
|
|
|
1866
1866
|
LibTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1867
1867
|
LibTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
|
|
1868
1868
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
1869
|
-
], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\
|
|
1869
|
+
], 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"] }] });
|
|
1870
1870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, decorators: [{
|
|
1871
1871
|
type: Component,
|
|
1872
1872
|
args: [{ selector: 'lib-tab-group', providers: [
|
|
1873
1873
|
{ provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
|
|
1874
|
-
], template: "<div class=\"tab-group-select-hidden\">\
|
|
1874
|
+
], 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>" }]
|
|
1875
1875
|
}], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
|
|
1876
1876
|
type: ContentChildren,
|
|
1877
1877
|
args: [LibTabComponent, { descendants: true }]
|
|
@@ -1947,19 +1947,19 @@ class LibStepComponent {
|
|
|
1947
1947
|
}
|
|
1948
1948
|
}
|
|
1949
1949
|
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 });
|
|
1950
|
-
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: `
|
|
1951
|
-
<ng-template>
|
|
1952
|
-
<ng-content></ng-content>
|
|
1953
|
-
</ng-template>
|
|
1950
|
+
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: `
|
|
1951
|
+
<ng-template>
|
|
1952
|
+
<ng-content></ng-content>
|
|
1953
|
+
</ng-template>
|
|
1954
1954
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1955
1955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepComponent, decorators: [{
|
|
1956
1956
|
type: Component,
|
|
1957
1957
|
args: [{
|
|
1958
1958
|
selector: 'lib-step',
|
|
1959
|
-
template: `
|
|
1960
|
-
<ng-template>
|
|
1961
|
-
<ng-content></ng-content>
|
|
1962
|
-
</ng-template>
|
|
1959
|
+
template: `
|
|
1960
|
+
<ng-template>
|
|
1961
|
+
<ng-content></ng-content>
|
|
1962
|
+
</ng-template>
|
|
1963
1963
|
`,
|
|
1964
1964
|
encapsulation: ViewEncapsulation.None,
|
|
1965
1965
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
@@ -2084,12 +2084,12 @@ class LibStepperComponent {
|
|
|
2084
2084
|
LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2085
2085
|
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: [
|
|
2086
2086
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2087
|
-
], 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"] }] });
|
|
2087
|
+
], 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"] }] });
|
|
2088
2088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, decorators: [{
|
|
2089
2089
|
type: Component,
|
|
2090
2090
|
args: [{ selector: 'lib-stepper', providers: [
|
|
2091
2091
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
2092
|
-
], 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>" }]
|
|
2092
|
+
], 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>" }]
|
|
2093
2093
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
|
|
2094
2094
|
type: ContentChildren,
|
|
2095
2095
|
args: [LibStepComponent, { descendants: true }]
|
|
@@ -2367,10 +2367,10 @@ class ShellSidebarComponent {
|
|
|
2367
2367
|
}
|
|
2368
2368
|
}
|
|
2369
2369
|
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 });
|
|
2370
|
-
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 -->\
|
|
2370
|
+
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"] }] });
|
|
2371
2371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarComponent, decorators: [{
|
|
2372
2372
|
type: Component,
|
|
2373
|
-
args: [{ selector: 'lib-shell-sidebar', template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\
|
|
2373
|
+
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" }]
|
|
2374
2374
|
}], ctorParameters: function () {
|
|
2375
2375
|
return [{ type: i1$1.Router, decorators: [{
|
|
2376
2376
|
type: Inject,
|
|
@@ -2451,10 +2451,10 @@ class NotificationsIndicatorComponent {
|
|
|
2451
2451
|
}
|
|
2452
2452
|
}
|
|
2453
2453
|
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 });
|
|
2454
|
-
NotificationsIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", ngImport: i0, template: "<div class=\"relative\"\
|
|
2454
|
+
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" }] });
|
|
2455
2455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NotificationsIndicatorComponent, decorators: [{
|
|
2456
2456
|
type: Component,
|
|
2457
|
-
args: [{ selector: 'lib-notifications-indicator', template: "<div class=\"relative\"\
|
|
2457
|
+
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" }]
|
|
2458
2458
|
}], ctorParameters: function () {
|
|
2459
2459
|
return [{ type: undefined, decorators: [{
|
|
2460
2460
|
type: Inject,
|
|
@@ -2483,10 +2483,10 @@ class LanguageSelectionComponent {
|
|
|
2483
2483
|
}
|
|
2484
2484
|
}
|
|
2485
2485
|
LanguageSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, deps: [{ token: APP_LANGUAGES }], target: i0.ɵɵFactoryTarget.Component });
|
|
2486
|
-
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)\">\
|
|
2486
|
+
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" }] });
|
|
2487
2487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LanguageSelectionComponent, decorators: [{
|
|
2488
2488
|
type: Component,
|
|
2489
|
-
args: [{ selector: 'lib-language-selection', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
2489
|
+
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" }]
|
|
2490
2490
|
}], ctorParameters: function () {
|
|
2491
2491
|
return [{ type: undefined, decorators: [{
|
|
2492
2492
|
type: Inject,
|
|
@@ -2538,10 +2538,10 @@ class UserProfileMenuComponent {
|
|
|
2538
2538
|
}
|
|
2539
2539
|
}
|
|
2540
2540
|
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 });
|
|
2541
|
-
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)\">\
|
|
2541
|
+
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"] }] });
|
|
2542
2542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
2543
2543
|
type: Component,
|
|
2544
|
-
args: [{ selector: 'lib-user-profile-menu', template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\
|
|
2544
|
+
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" }]
|
|
2545
2545
|
}], ctorParameters: function () {
|
|
2546
2546
|
return [{ type: i2$1.AuthService, decorators: [{
|
|
2547
2547
|
type: Inject,
|
|
@@ -2636,10 +2636,10 @@ class ShellHeaderComponent {
|
|
|
2636
2636
|
}
|
|
2637
2637
|
}
|
|
2638
2638
|
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 });
|
|
2639
|
-
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>\
|
|
2639
|
+
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"] }] });
|
|
2640
2640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellHeaderComponent, decorators: [{
|
|
2641
2641
|
type: Component,
|
|
2642
|
-
args: [{ selector: 'lib-shell-header', template: "<nav>\
|
|
2642
|
+
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" }]
|
|
2643
2643
|
}], ctorParameters: function () {
|
|
2644
2644
|
return [{ type: i2$1.AuthService, decorators: [{
|
|
2645
2645
|
type: Inject,
|
|
@@ -2687,10 +2687,10 @@ class ShellSidebarHeaderComponent extends ShellHeaderComponent {
|
|
|
2687
2687
|
}
|
|
2688
2688
|
}
|
|
2689
2689
|
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 });
|
|
2690
|
-
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\">\
|
|
2690
|
+
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"] }] });
|
|
2691
2691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
|
|
2692
2692
|
type: Component,
|
|
2693
|
-
args: [{ selector: 'lib-shell-sidebar-header', template: "<div class=\"shell-header-paddings\">\
|
|
2693
|
+
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" }]
|
|
2694
2694
|
}], ctorParameters: function () {
|
|
2695
2695
|
return [{ type: i2$1.AuthService, decorators: [{
|
|
2696
2696
|
type: Inject,
|
|
@@ -2721,10 +2721,10 @@ class ShellSidebarLayoutComponent {
|
|
|
2721
2721
|
}
|
|
2722
2722
|
}
|
|
2723
2723
|
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2724
|
-
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>\
|
|
2724
|
+
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" }] });
|
|
2725
2725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
2726
2726
|
type: Component,
|
|
2727
|
-
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\
|
|
2727
|
+
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>" }]
|
|
2728
2728
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2729
2729
|
type: Input
|
|
2730
2730
|
}] } });
|
|
@@ -2735,10 +2735,10 @@ class ShellFooterComponent {
|
|
|
2735
2735
|
}
|
|
2736
2736
|
}
|
|
2737
2737
|
ShellFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellFooterComponent, deps: [{ token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2738
|
-
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\">\
|
|
2738
|
+
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" }] });
|
|
2739
2739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellFooterComponent, decorators: [{
|
|
2740
2740
|
type: Component,
|
|
2741
|
-
args: [{ selector: 'lib-shell-footer', template: "<footer class=\"shell-footer-component-container\">\
|
|
2741
|
+
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" }]
|
|
2742
2742
|
}], ctorParameters: function () {
|
|
2743
2743
|
return [{ type: undefined, decorators: [{
|
|
2744
2744
|
type: Inject,
|
|
@@ -2752,10 +2752,10 @@ class ShellStackedLayoutComponent {
|
|
|
2752
2752
|
}
|
|
2753
2753
|
}
|
|
2754
2754
|
ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2755
|
-
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\">\
|
|
2755
|
+
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" }] });
|
|
2756
2756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
|
|
2757
2757
|
type: Component,
|
|
2758
|
-
args: [{ selector: 'lib-shell-stacked-layout', template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\
|
|
2758
|
+
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>" }]
|
|
2759
2759
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2760
2760
|
type: Input
|
|
2761
2761
|
}] } });
|
|
@@ -2832,10 +2832,10 @@ class ShellLayoutComponent {
|
|
|
2832
2832
|
}
|
|
2833
2833
|
}
|
|
2834
2834
|
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 });
|
|
2835
|
-
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\">\
|
|
2835
|
+
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"] }] });
|
|
2836
2836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
2837
2837
|
type: Component,
|
|
2838
|
-
args: [{ selector: 'lib-shell-layout', template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\
|
|
2838
|
+
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>" }]
|
|
2839
2839
|
}], ctorParameters: function () {
|
|
2840
2840
|
return [{ type: undefined, decorators: [{
|
|
2841
2841
|
type: Inject,
|
|
@@ -2916,10 +2916,10 @@ class ViewLayoutComponent {
|
|
|
2916
2916
|
}
|
|
2917
2917
|
}
|
|
2918
2918
|
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 });
|
|
2919
|
-
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\">\
|
|
2919
|
+
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]" }] });
|
|
2920
2920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ViewLayoutComponent, decorators: [{
|
|
2921
2921
|
type: Component,
|
|
2922
|
-
args: [{ selector: 'lib-view-layout', template: "<header *ngIf=\"header\" class=\"view-layout-paddings\">\
|
|
2922
|
+
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" }]
|
|
2923
2923
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
|
|
2924
2924
|
type: ViewChild,
|
|
2925
2925
|
args: ['search']
|
|
@@ -2977,10 +2977,10 @@ class ModelViewLayoutComponent {
|
|
|
2977
2977
|
}
|
|
2978
2978
|
}
|
|
2979
2979
|
ModelViewLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModelViewLayoutComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
|
|
2980
|
-
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\">\
|
|
2980
|
+
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"] }] });
|
|
2981
2981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModelViewLayoutComponent, decorators: [{
|
|
2982
2982
|
type: Component,
|
|
2983
|
-
args: [{ selector: 'lib-model-view-layout', template: "<lib-view-layout [title]=\"title\" [meta-items]=\"metaItems\">\
|
|
2983
|
+
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" }]
|
|
2984
2984
|
}], ctorParameters: function () { return [{ type: i1.Location }]; }, propDecorators: { title: [{
|
|
2985
2985
|
type: Input
|
|
2986
2986
|
}], primary: [{
|
|
@@ -3051,10 +3051,10 @@ class SideViewLayoutComponent {
|
|
|
3051
3051
|
}
|
|
3052
3052
|
}
|
|
3053
3053
|
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 });
|
|
3054
|
-
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\">\
|
|
3054
|
+
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"] }] });
|
|
3055
3055
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SideViewLayoutComponent, decorators: [{
|
|
3056
3056
|
type: Component,
|
|
3057
|
-
args: [{ selector: 'lib-side-view-layout', template: "<div class=\"side-view-layout-size-box\">\
|
|
3057
|
+
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" }]
|
|
3058
3058
|
}], ctorParameters: function () { return [{ type: i1.Location }, { type: i1$1.Router }]; }, propDecorators: { title: [{
|
|
3059
3059
|
type: Input
|
|
3060
3060
|
}], showActions: [{
|
|
@@ -3138,10 +3138,10 @@ class FormLayoutComponent {
|
|
|
3138
3138
|
}
|
|
3139
3139
|
}
|
|
3140
3140
|
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 });
|
|
3141
|
-
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\">\
|
|
3141
|
+
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"] }] });
|
|
3142
3142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormLayoutComponent, decorators: [{
|
|
3143
3143
|
type: Component,
|
|
3144
|
-
args: [{ selector: 'lib-form-layout', template: "<div class=\"form-layout-container\">\
|
|
3144
|
+
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" }]
|
|
3145
3145
|
}], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { searchInput$: [{
|
|
3146
3146
|
type: ViewChild,
|
|
3147
3147
|
args: ['search']
|
|
@@ -3251,10 +3251,10 @@ class ErrorComponent {
|
|
|
3251
3251
|
}
|
|
3252
3252
|
}
|
|
3253
3253
|
ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3254
|
-
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!\">\
|
|
3254
|
+
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"] }] });
|
|
3255
3255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ErrorComponent, decorators: [{
|
|
3256
3256
|
type: Component,
|
|
3257
|
-
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!\">\
|
|
3257
|
+
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" }]
|
|
3258
3258
|
}] });
|
|
3259
3259
|
|
|
3260
3260
|
class PageNotFoundComponent {
|
|
@@ -3263,10 +3263,10 @@ class PageNotFoundComponent {
|
|
|
3263
3263
|
}
|
|
3264
3264
|
}
|
|
3265
3265
|
PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3266
|
-
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!\">\
|
|
3266
|
+
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"] }] });
|
|
3267
3267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PageNotFoundComponent, decorators: [{
|
|
3268
3268
|
type: Component,
|
|
3269
|
-
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!\">\
|
|
3269
|
+
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" }]
|
|
3270
3270
|
}], ctorParameters: function () { return []; } });
|
|
3271
3271
|
|
|
3272
3272
|
class UnauthorizedComponent {
|
|
@@ -3274,10 +3274,10 @@ class UnauthorizedComponent {
|
|
|
3274
3274
|
ngOnInit() { }
|
|
3275
3275
|
}
|
|
3276
3276
|
UnauthorizedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3277
|
-
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!\">\
|
|
3277
|
+
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"] }] });
|
|
3278
3278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UnauthorizedComponent, decorators: [{
|
|
3279
3279
|
type: Component,
|
|
3280
|
-
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!\">\
|
|
3280
|
+
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" }]
|
|
3281
3281
|
}], ctorParameters: function () { return []; } });
|
|
3282
3282
|
|
|
3283
3283
|
class AddressPipe {
|
|
@@ -3749,23 +3749,23 @@ class ModalContainerComponent {
|
|
|
3749
3749
|
}
|
|
3750
3750
|
}
|
|
3751
3751
|
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 });
|
|
3752
|
-
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: `
|
|
3753
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3754
|
-
<div class="modal-content">
|
|
3755
|
-
<ng-content></ng-content>
|
|
3756
|
-
</div>
|
|
3757
|
-
</div>
|
|
3752
|
+
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: `
|
|
3753
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3754
|
+
<div class="modal-content">
|
|
3755
|
+
<ng-content></ng-content>
|
|
3756
|
+
</div>
|
|
3757
|
+
</div>
|
|
3758
3758
|
`, isInline: true });
|
|
3759
3759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ModalContainerComponent, decorators: [{
|
|
3760
3760
|
type: Component,
|
|
3761
3761
|
args: [{
|
|
3762
3762
|
selector: 'lib-modal-container',
|
|
3763
|
-
template: `
|
|
3764
|
-
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3765
|
-
<div class="modal-content">
|
|
3766
|
-
<ng-content></ng-content>
|
|
3767
|
-
</div>
|
|
3768
|
-
</div>
|
|
3763
|
+
template: `
|
|
3764
|
+
<div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
|
|
3765
|
+
<div class="modal-content">
|
|
3766
|
+
<ng-content></ng-content>
|
|
3767
|
+
</div>
|
|
3768
|
+
</div>
|
|
3769
3769
|
`,
|
|
3770
3770
|
host: {
|
|
3771
3771
|
class: 'modal',
|