@indice/ng-components 0.2.160-beta.3 → 0.2.160-beta.6
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/_styles.css +5 -1
- package/esm2020/lib/controls/nav-links-list/nav-links-list.component.mjs +7 -3
- package/esm2020/lib/controls/stepper/lib-step.component.mjs +3 -3
- package/esm2020/lib/controls/stepper/lib-stepper.component.mjs +32 -9
- package/esm2020/lib/layouts/shell/shell-sidebar-layout/shell-sidebar-layout.component.mjs +3 -3
- package/esm2020/lib/pages/auth/auth-callback/auth-callback.component.mjs +1 -2
- package/fesm2015/indice-ng-components.mjs +45 -17
- package/fesm2015/indice-ng-components.mjs.map +1 -1
- package/fesm2020/indice-ng-components.mjs +41 -15
- package/fesm2020/indice-ng-components.mjs.map +1 -1
- package/lib/controls/nav-links-list/nav-links-list.component.d.ts +5 -2
- package/lib/controls/stepper/lib-stepper.component.d.ts +15 -4
- package/package.json +1 -1
|
@@ -15,11 +15,11 @@ export class ShellSidebarLayoutComponent {
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
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
|
|
18
|
+
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: i2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i3.ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { kind: "component", type: i4.ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }] });
|
|
19
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
|
-
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\n <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n
|
|
21
|
+
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>" }]
|
|
22
22
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
23
23
|
type: Input
|
|
24
24
|
}] } });
|
|
25
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hlbGwtc2lkZWJhci1sYXlvdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29tcG9uZW50cy9zcmMvbGliL2xheW91dHMvc2hlbGwvc2hlbGwtc2lkZWJhci1sYXlvdXQvc2hlbGwtc2lkZWJhci1sYXlvdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29tcG9uZW50cy9zcmMvbGliL2xheW91dHMvc2hlbGwvc2hlbGwtc2lkZWJhci1sYXlvdXQvc2hlbGwtc2lkZWJhci1sYXlvdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7OztBQU96RCxNQUFNLE9BQU8sMkJBQTJCO0lBSXRDO1FBRE8sc0JBQWlCLEdBQUcsSUFBSSxDQUFDO0lBQ2hCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFTSxtQkFBbUI7UUFDeEIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDO0lBQ25ELENBQUM7O3dIQVhVLDJCQUEyQjs0R0FBM0IsMkJBQTJCLDhGQ1B4Qyx1bEpBeUZROzJGRGxGSywyQkFBMkI7a0JBSnZDLFNBQVM7K0JBQ0UsMEJBQTBCOzBFQUszQixNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElTaGVsbENvbmZpZyB9IGZyb20gJy4uLy4uLy4uL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLXNoZWxsLXNpZGViYXItbGF5b3V0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NoZWxsLXNpZGViYXItbGF5b3V0LmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBTaGVsbFNpZGViYXJMYXlvdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBcbiAgQElucHV0KCkgY29uZmlnOiBJU2hlbGxDb25maWcgfCB1bmRlZmluZWQ7XG4gIHB1YmxpYyBzaG93TW9iaWxlU2lkZWJhciA9IHRydWU7XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICBwdWJsaWMgdG9nZ2xlTW9iaWxlU2lkZWJhcigpOiB2b2lkIHtcbiAgICB0aGlzLnNob3dNb2JpbGVTaWRlYmFyID0gIXRoaXMuc2hvd01vYmlsZVNpZGViYXI7XG4gIH1cblxufVxuIiwiPGRpdj5cbiAgICA8IS0tIE9mZi1jYW52YXMgbWVudSBmb3IgbW9iaWxlLCBzaG93L2hpZGUgYmFzZWQgb24gb2ZmLWNhbnZhcyBtZW51IHN0YXRlLiAtLT5cbiAgICA8ZGl2IGNsYXNzPVwic2lkZWJhci1vZmYtY2FudmFzLW1lbnUtY29udGFpbmVyXCIgcm9sZT1cImRpYWxvZ1wiIGFyaWEtbW9kYWw9XCJ0cnVlXCI+XG4gICAgICA8IS0tIE9mZi1jYW52YXMgbWVudSBiYWNrZHJvcCwgc2hvdy9oaWRlIGJhc2VkIG9uIG9mZi1jYW52YXMgbWVudSBzdGF0ZS4tLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJzaWRlYmFyLW9mZi1jYW52YXMtbWVudS1iYWNrZHJvcFwiIFxuICAgICAgICAgIFtjbGFzcy5zaWRlYmFyLW9mZi1jYW52YXMtbWVudS1iYWNrZHJvcC1vcGFjaXR5LTEwMF09XCJzaG93TW9iaWxlU2lkZWJhclwiPlxuICAgICAgPC9kaXY+XG4gIFxuICAgICAgPGRpdiBjbGFzcz1cInNpZGViYXItb2ZmLWNhbnZhcy1tZW51LWNvbnRhaW5lci1pbm5lclwiIFxuICAgICAgW2NsYXNzLnNpZGViYXItb2ZmLWNhbnZhcy1tZW51LWNvbnRhaW5lci1pbm5lci1hY3RpdmVdPVwic2hvd01vYmlsZVNpZGViYXJcIiBcbiAgICAgIFtjbGFzcy5zaWRlYmFyLW9mZi1jYW52YXMtbWVudS1jb250YWluZXItaW5uZXItbm90LWFjdGl2ZV09XCIhc2hvd01vYmlsZVNpZGViYXJcIj5cbiAgICAgICAgPCEtLSBPZmYtY2FudmFzIG1lbnUsIHNob3cvaGlkZSBiYXNlZCBvbiBvZmYtY2FudmFzIG1lbnUgc3RhdGUuLS0+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzaWRlYmFyLW9mZi1jYW52YXMtbGF5b3V0LWNvbnRhaW5lclwiPlxuICAgICAgICAgIDwhLS1DbG9zZSBidXR0b24sIHNob3cvaGlkZSBiYXNlZCBvbiBvZmYtY2FudmFzIG1lbnUgc3RhdGUuLS0+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInNpZGViYXItb2ZmLWNhbnZhcy10b2dnbGUtYnV0dG9uLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJzaWRlYmFyLW9mZi1jYW52YXMtdG9nZ2xlLWJ1dHRvblwiIChjbGljayk9XCJzaG93TW9iaWxlU2lkZWJhciA9ICFzaG93TW9iaWxlU2lkZWJhclwiPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInNyLW9ubHlcIj5DbG9zZSBzaWRlYmFyPC9zcGFuPlxuICAgICAgICAgICAgICA8IS0tIEhlcm9pY29uIG5hbWU6IG91dGxpbmUveCAtLT5cbiAgICAgICAgICAgICAgPHN2ZyBjbGFzcz1cImgtNiB3LTYgdGV4dC13aGl0ZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBmaWxsPVwibm9uZVwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIiBzdHJva2Utd2lkdGg9XCIyXCIgc3Ryb2tlPVwiY3VycmVudENvbG9yXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICAgICAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgZD1cIk02IDE4TDE4IDZNNiA2bDEyIDEyXCIgLz5cbiAgICAgICAgICAgICAgPC9zdmc+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgXG4gICAgICAgICAgPGRpdiBjbGFzcz1cInNpZGViYXItb2ZmLWNhbnZhcy1hcHAtbG9nby1jb250YWluZXJcIj5cbiAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJoLTggdy1hdXRvXCIgW3NyY109XCJjb25maWc/LmFwcExvZ29cIiBbYWx0XT1cImNvbmZpZz8uYXBwTG9nb0FsdFwiPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGxpYi1zaGVsbC1zaWRlYmFyPjwvbGliLXNoZWxsLXNpZGViYXI+XG4gICAgICAgICBcbiAgICAgICAgPC9kaXY+XG4gIFxuICAgICAgICA8ZGl2IGNsYXNzPVwic2lkZWJhci1kdW1teS1lbGVtZW50XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICAgICAgPCEtLSBEdW1teSBlbGVtZW50IHRvIGZvcmNlIHNpZGViYXIgdG8gc2hyaW5rIHRvIGZpdCBjbG9zZSBpY29uIC0tPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICBcbiAgICA8IS0tIFN0YXRpYyBzaWRlYmFyIGZvciBkZXNrdG9wIC0tPlxuICAgIDxkaXYgY2xhc3M9XCJzaWRlYmFyLXN0YXRpYy1tZW51LW91dGVyLWNvbnRhaW5lclwiPlxuICAgIFxuICAgIDxkaXYgY2xhc3M9XCJzaWRlYmFyLXN0YXRpYy1tZW51LWNvbnRhaW5lclwiIFxuICAgICAgW2NsYXNzLnNpZGViYXItc3RhdGljLW1lbnUtY29udGFpbmVyLWFjdGl2ZV09XCJzaG93TW9iaWxlU2lkZWJhclwiIFxuICAgICAgW2NsYXNzLnNpZGViYXItc3RhdGljLW1lbnUtY29udGFpbmVyLW5vdC1hY3RpdmVdPVwiIXNob3dNb2JpbGVTaWRlYmFyXCI+XG4gICAgICA8IS0tIFNpZGViYXIgY29tcG9uZW50LCBzd2FwIHRoaXMgZWxlbWVudCB3aXRoIGFub3RoZXIgc2lkZWJhciBpZiB5b3UgbGlrZSAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJzaWRlYmFyLXN0YXRpYy1tZW51LWNvbnRhaW5lci1pbm5lclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2lkZWJhci1zdGF0aWMtbWVudS1hcHAtbG9nby1jb250YWluZXJcIj5cbiAgICAgICAgICA8aW1nIGNsYXNzPVwiaC04IHctYXV0b1wiIFtzcmNdPVwiY29uZmlnPy5hcHBMb2dvXCIgW2FsdF09XCJjb25maWc/LmFwcExvZ29BbHRcIj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxsaWItc2hlbGwtc2lkZWJhcj48L2xpYi1zaGVsbC1zaWRlYmFyPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwic2lkZWJhci1zdGF0aWMtbWVudS13cmFwcGVyXCIgW2NsYXNzLnNpZGViYXItc3RhdGljLW1lbnUtd3JhcHBlci1hY3RpdmVdPVwic2hvd01vYmlsZVNpZGViYXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzaWRlYmFyLXN0YXRpYy1tZW51LXRvZ2dsZS1idXR0b24tY29udGFpbmVyXCI+XG4gICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwic2lkZWJhci1zdGF0aWMtbWVudS10b2dnbGUtYnV0dG9uXCIgKGNsaWNrKT1cInNob3dNb2JpbGVTaWRlYmFyID0gIXNob3dNb2JpbGVTaWRlYmFyXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzci1vbmx5XCI+VG9nZ2xlIHNpZGViYXI8L3NwYW4+XG4gICAgICAgICAgPCEtLSBIZXJvaWNvbiBuYW1lOiBvdXRsaW5lL21lbnUtYWx0LTIgLS0+XG4gICAgICAgICAgPHN2ZyBjbGFzcz1cImgtNiB3LTZcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgZmlsbD1cIm5vbmVcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgc3Ryb2tlLXdpZHRoPVwiMlwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgZD1cIk00IDZoMTZNNCAxMmgxNk00IDE4aDdcIiAvPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgXG4gICAgICAgIDwhLS0gc2lkZWJhci1zdGF0aWMtbWVudS1oZWFkZXItY29udGFpbmVyIC0tPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2lkZWJhci1zdGF0aWMtbWVudS1oZWFkZXItY29udGFpbmVyXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInNpZGViYXItc3RhdGljLW1lbnUtaGVhZGVyLW5lYXItY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2lkZWJhci1zdGF0aWMtbWVudS1oZWFkZXItYXBwLWxvZ28tY29udGFpbmVyXCIgKm5nSWY9XCIhc2hvd01vYmlsZVNpZGViYXJcIj5cbiAgICAgICAgICAgICAgPGltZyBjbGFzcz1cImgtOCB3LWF1dG9cIiBbc3JjXT1cImNvbmZpZz8uYXBwTG9nb1wiIFthbHRdPVwiY29uZmlnPy5hcHBMb2dvQWx0XCI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwic2lkZWJhci1zdGF0aWMtbWVudS1oZWFkZXItZmFyLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGxpYi1zaGVsbC1zaWRlYmFyLWhlYWRlciBcbiAgICAgICAgICAgIFtzaG93LXVzZXJOYW1lXT1cImNvbmZpZz8uc2hvd1VzZXJOYW1lT25IZWFkZXJcIlxuICAgICAgICAgICAgW3Nob3ctYWxlcnRzXT1cImNvbmZpZz8uc2hvd0FsZXJ0c09uSGVhZGVyXCIgXG4gICAgICAgICAgICBbc2hvdy1sYW5nc109XCJjb25maWc/LnNob3dMYW5nc09uSGVhZGVyXCI+PC9saWItc2hlbGwtc2lkZWJhci1oZWFkZXI+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gIFxuICAgICAgPGRpdiBmbGV4LTE+XG4gICAgICAgIDxtYWluIGNsYXNzPVwic2hlbGwtY29udGVudC1jb250YWluZXItZmx1aWRcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzaGVsbC1jb250ZW50LWNvbnRhaW5lci1pbm5lclwiPlxuICAgICAgICAgICAgICA8IS0tIFlPVSBORUVEIFRPIEFERC9SRU1PVkUgVEhJUyBGUk9NIERPTSBERVBFTkRJTkcgT04gVEhFIFNFTEVDVEVEIExBWU9VVCBFU1BFQ0lBTExZIElOIFRIRSBDQVNFIE9GIExBWU9VVCBTV0lUQ0hJTkchISEgLS0+XG4gICAgICAgICAgICAgIDxyb3V0ZXItb3V0bGV0ICpuZ0lmPVwiKGNvbmZpZyAmJiBjb25maWcubGF5b3V0ID09PSAnU2lkZWJhcicpXCI+PC9yb3V0ZXItb3V0bGV0PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9tYWluPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PiJdfQ==
|
|
@@ -13,7 +13,6 @@ export class AuthCallbackComponent {
|
|
|
13
13
|
ngOnInit() {
|
|
14
14
|
this.authService.signinRedirectCallback().subscribe((user) => {
|
|
15
15
|
if (user) {
|
|
16
|
-
debugger;
|
|
17
16
|
this.router.navigateByUrl(user.state?.url || '/');
|
|
18
17
|
}
|
|
19
18
|
});
|
|
@@ -28,4 +27,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
28
27
|
type: Inject,
|
|
29
28
|
args: [AuthService]
|
|
30
29
|
}] }, { type: i1.Router }]; } });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0aC1jYWxsYmFjay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1jb21wb25lbnRzL3NyYy9saWIvcGFnZXMvYXV0aC9hdXRoLWNhbGxiYWNrL2F1dGgtY2FsbGJhY2suY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29tcG9uZW50cy9zcmMvbGliL3BhZ2VzL2F1dGgvYXV0aC1jYWxsYmFjay9hdXRoLWNhbGxiYWNrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBRzFELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7Ozs7QUFNOUMsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQyxZQUF5QyxXQUF3QixFQUFVLE1BQWM7UUFBaEQsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFBVSxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBRWxGLFdBQU0sR0FBRyx3QkFBd0IsQ0FBQztJQUZvRCxDQUFDO0lBSXZGLFFBQVE7UUFDYixJQUFJLENBQUMsV0FBVyxDQUFDLHNCQUFzQixFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDM0QsSUFBSSxJQUFJLEVBQUU7Z0JBQ1IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxHQUFHLElBQUksR0FBRyxDQUFDLENBQUM7YUFDbkQ7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7O2tIQVhVLHFCQUFxQixrQkFDWixXQUFXO3NHQURwQixxQkFBcUIseURDVGxDLHdFQUFrRTsyRkRTckQscUJBQXFCO2tCQUpqQyxTQUFTOytCQUNFLG1CQUFtQjs7MEJBSWhCLE1BQU07MkJBQUMsV0FBVyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5qZWN0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcclxuXHJcbmltcG9ydCB7IEF1dGhTZXJ2aWNlIH0gZnJvbSAnQGluZGljZS9uZy1hdXRoJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLWF1dGgtY2FsbGJhY2snLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9hdXRoLWNhbGxiYWNrLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQXV0aENhbGxiYWNrQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBjb25zdHJ1Y3RvcihASW5qZWN0KEF1dGhTZXJ2aWNlKSBwcml2YXRlIGF1dGhTZXJ2aWNlOiBBdXRoU2VydmljZSwgcHJpdmF0ZSByb3V0ZXI6IFJvdXRlcikgeyB9XHJcblxyXG4gIHB1YmxpYyBzdGF0dXMgPSAnz4DOsc+BzrHOus6xzrvPjiDPgM61z4HOuc68zq3Ovc61z4TOtS4uLic7XHJcblxyXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuYXV0aFNlcnZpY2Uuc2lnbmluUmVkaXJlY3RDYWxsYmFjaygpLnN1YnNjcmliZSgodXNlcikgPT4ge1xyXG4gICAgICBpZiAodXNlcikge1xyXG4gICAgICAgIHRoaXMucm91dGVyLm5hdmlnYXRlQnlVcmwodXNlci5zdGF0ZT8udXJsIHx8ICcvJyk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG4gIH1cclxufVxyXG4iLCI8bGliLXZpZXctbGF5b3V0IFt0aXRsZV09XCJzdGF0dXNcIiBbYnVzeV09XCJ0cnVlXCI+PC9saWItdmlldy1sYXlvdXQ+Il19
|
|
@@ -1426,14 +1426,20 @@ class NavLinksListComponent {
|
|
|
1426
1426
|
// tslint:disable-next-line:no-input-rename
|
|
1427
1427
|
this.showIcons = false;
|
|
1428
1428
|
}
|
|
1429
|
+
ngOnDestroy() {
|
|
1430
|
+
var _a;
|
|
1431
|
+
(_a = this.fragmentSub$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
1432
|
+
}
|
|
1429
1433
|
ngOnInit() {
|
|
1434
|
+
var _a;
|
|
1435
|
+
this.fragmentSub$ = (_a = this.activeFragment) === null || _a === void 0 ? void 0 : _a.subscribe(fragment => this.fragmentValue = fragment);
|
|
1430
1436
|
}
|
|
1431
1437
|
}
|
|
1432
1438
|
NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1433
|
-
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: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n <div class=\"nav-link-list-container-inner\">\r\n <ng-container *ngFor=\"let link of links | async\">\r\n <ng-container [ngSwitch]=\"link.type\">\r\n <a *ngSwitchCase=\"'router'\"\r\n href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [routerLinkActive]=\"navLinkActiveClass\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'external'\"\r\n [href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'fragment'\"\r\n routerLink=\".\"\r\n [fragment]=\"link.path\"\r\n [class
|
|
1439
|
+
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: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n <div class=\"nav-link-list-container-inner\">\r\n <ng-container *ngFor=\"let link of links | async\">\r\n <ng-container [ngSwitch]=\"link.type\">\r\n <a *ngSwitchCase=\"'router'\"\r\n href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [routerLinkActive]=\"navLinkActiveClass\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'external'\"\r\n [href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'fragment'\"\r\n routerLink=\".\"\r\n [fragment]=\"link.path\"\r\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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" }] });
|
|
1434
1440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavLinksListComponent, decorators: [{
|
|
1435
1441
|
type: Component,
|
|
1436
|
-
args: [{ selector: 'lib-nav-links-list', template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n <div class=\"nav-link-list-container-inner\">\r\n <ng-container *ngFor=\"let link of links | async\">\r\n <ng-container [ngSwitch]=\"link.type\">\r\n <a *ngSwitchCase=\"'router'\"\r\n href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [routerLinkActive]=\"navLinkActiveClass\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'external'\"\r\n [href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'fragment'\"\r\n routerLink=\".\"\r\n [fragment]=\"link.path\"\r\n [class
|
|
1442
|
+
args: [{ selector: 'lib-nav-links-list', template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n <div class=\"nav-link-list-container-inner\">\r\n <ng-container *ngFor=\"let link of links | async\">\r\n <ng-container [ngSwitch]=\"link.type\">\r\n <a *ngSwitchCase=\"'router'\"\r\n href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [routerLinkActive]=\"navLinkActiveClass\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon + ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'external'\"\r\n [href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [class]=\"navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n <a *ngSwitchCase=\"'fragment'\"\r\n routerLink=\".\"\r\n [fragment]=\"link.path\"\r\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon+ ' mr-3'\"></i>{{ link.text }}\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n" }]
|
|
1437
1443
|
}], ctorParameters: function () { return []; }, propDecorators: { links: [{
|
|
1438
1444
|
type: Input
|
|
1439
1445
|
}], activeFragment: [{
|
|
@@ -1704,13 +1710,11 @@ class LibStepComponent {
|
|
|
1704
1710
|
}
|
|
1705
1711
|
/** Indicates the index of the step. */
|
|
1706
1712
|
get index() {
|
|
1707
|
-
|
|
1708
|
-
return (_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.toArray().indexOf(this);
|
|
1713
|
+
return this._stepper ? this._stepper.steps.toArray().indexOf(this) : -1;
|
|
1709
1714
|
}
|
|
1710
1715
|
/** Indicates whether this step is the last step. */
|
|
1711
1716
|
get isLast() {
|
|
1712
|
-
|
|
1713
|
-
return ((_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.length) - 1 === this.index;
|
|
1717
|
+
return this._stepper ? this._stepper.steps.length - 1 === this.index : false;
|
|
1714
1718
|
}
|
|
1715
1719
|
/** Indicates whether you can navigate to the step or not. */
|
|
1716
1720
|
get isValid() {
|
|
@@ -1785,11 +1789,15 @@ var StepperType;
|
|
|
1785
1789
|
})(StepperType || (StepperType = {}));
|
|
1786
1790
|
|
|
1787
1791
|
class LibStepperComponent {
|
|
1788
|
-
constructor() {
|
|
1792
|
+
constructor(_changeDetectorRef) {
|
|
1793
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
1789
1794
|
// Private properties.
|
|
1790
1795
|
this._currentStepIndex = 0;
|
|
1796
|
+
this._isCompleted = false;
|
|
1791
1797
|
/** Emmited when a step change occurs. */
|
|
1792
1798
|
this.stepChanged = new EventEmitter();
|
|
1799
|
+
/** Emmited when the stepper navigates away from the final step. Only emits once. */
|
|
1800
|
+
this.completed = new EventEmitter();
|
|
1793
1801
|
/** Indicates whether each step has to be validated before proceeding to the next. */
|
|
1794
1802
|
this.linear = false;
|
|
1795
1803
|
/** The type of the stepper. */
|
|
@@ -1806,19 +1814,38 @@ class LibStepperComponent {
|
|
|
1806
1814
|
get currentStepIndex() {
|
|
1807
1815
|
return this._currentStepIndex;
|
|
1808
1816
|
}
|
|
1817
|
+
/** Indicates whether stepper can go a step back. */
|
|
1818
|
+
get canGoBack() {
|
|
1819
|
+
return this._currentStepIndex > 0;
|
|
1820
|
+
}
|
|
1821
|
+
/** Indicates whether stepper can go a step forward. */
|
|
1822
|
+
get canGoForward() {
|
|
1823
|
+
var _a;
|
|
1824
|
+
return this._currentStepIndex < ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) - 1;
|
|
1825
|
+
}
|
|
1826
|
+
/** Indicates whether */
|
|
1827
|
+
get isCompleted() {
|
|
1828
|
+
return this._isCompleted;
|
|
1829
|
+
}
|
|
1809
1830
|
ngOnInit() { }
|
|
1831
|
+
ngAfterViewChecked() {
|
|
1832
|
+
this._changeDetectorRef.detectChanges();
|
|
1833
|
+
}
|
|
1810
1834
|
/** Proceeds to the next step, if any. */
|
|
1811
1835
|
goToNextStep() {
|
|
1812
|
-
|
|
1813
|
-
if (this.
|
|
1836
|
+
var _a;
|
|
1837
|
+
if (((_a = this.currentStep) === null || _a === void 0 ? void 0 : _a.isLast) && !this._isCompleted) {
|
|
1838
|
+
this._isCompleted = true;
|
|
1839
|
+
this.completed.emit();
|
|
1840
|
+
}
|
|
1841
|
+
if (!this.canGoForward) {
|
|
1814
1842
|
return;
|
|
1815
1843
|
}
|
|
1816
1844
|
this.updateCurrentStepIndex(this._currentStepIndex + 1);
|
|
1817
1845
|
}
|
|
1818
1846
|
/** Proceeds to the previous step, if any. */
|
|
1819
1847
|
goToPreviousStep() {
|
|
1820
|
-
|
|
1821
|
-
if (this._currentStepIndex === 0) {
|
|
1848
|
+
if (!this.canGoBack) {
|
|
1822
1849
|
return;
|
|
1823
1850
|
}
|
|
1824
1851
|
this.updateCurrentStepIndex(this._currentStepIndex - 1);
|
|
@@ -1844,8 +1871,8 @@ class LibStepperComponent {
|
|
|
1844
1871
|
this._currentStepIndex = newIndex;
|
|
1845
1872
|
}
|
|
1846
1873
|
}
|
|
1847
|
-
LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1848
|
-
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" }, providers: [
|
|
1874
|
+
LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1875
|
+
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: [
|
|
1849
1876
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
1850
1877
|
], 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"] }] });
|
|
1851
1878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, decorators: [{
|
|
@@ -1853,11 +1880,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
1853
1880
|
args: [{ selector: 'lib-stepper', providers: [
|
|
1854
1881
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
1855
1882
|
], 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>" }]
|
|
1856
|
-
}], ctorParameters: function () { return []; }, propDecorators: { steps: [{
|
|
1883
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
|
|
1857
1884
|
type: ContentChildren,
|
|
1858
1885
|
args: [LibStepComponent, { descendants: true }]
|
|
1859
1886
|
}], stepChanged: [{
|
|
1860
1887
|
type: Output
|
|
1888
|
+
}], completed: [{
|
|
1889
|
+
type: Output
|
|
1861
1890
|
}], linear: [{
|
|
1862
1891
|
type: Input
|
|
1863
1892
|
}], type: [{
|
|
@@ -2482,10 +2511,10 @@ class ShellSidebarLayoutComponent {
|
|
|
2482
2511
|
}
|
|
2483
2512
|
}
|
|
2484
2513
|
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2485
|
-
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
|
|
2514
|
+
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" }] });
|
|
2486
2515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
2487
2516
|
type: Component,
|
|
2488
|
-
args: [{ selector: 'lib-shell-sidebar-layout', template: "<div>\n <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\n
|
|
2517
|
+
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>" }]
|
|
2489
2518
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2490
2519
|
type: Input
|
|
2491
2520
|
}] } });
|
|
@@ -2934,7 +2963,6 @@ class AuthCallbackComponent {
|
|
|
2934
2963
|
this.authService.signinRedirectCallback().subscribe((user) => {
|
|
2935
2964
|
var _a;
|
|
2936
2965
|
if (user) {
|
|
2937
|
-
debugger;
|
|
2938
2966
|
this.router.navigateByUrl(((_a = user.state) === null || _a === void 0 ? void 0 : _a.url) || '/');
|
|
2939
2967
|
}
|
|
2940
2968
|
});
|