@tekus/design-system 5.34.0 → 5.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tekus-design-system-components-action-group.mjs +1 -1
- package/fesm2022/tekus-design-system-components-action-group.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-button.mjs +24 -3
- package/fesm2022/tekus-design-system-components-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-card.mjs +1 -1
- package/fesm2022/tekus-design-system-components-card.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-carousel.mjs +234 -0
- package/fesm2022/tekus-design-system-components-carousel.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-color-picker.mjs +1 -1
- package/fesm2022/tekus-design-system-components-color-picker.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-drawer.mjs +1 -1
- package/fesm2022/tekus-design-system-components-drawer.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-dropdown.mjs +1 -1
- package/fesm2022/tekus-design-system-components-dropdown.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-header.mjs +29 -0
- package/fesm2022/tekus-design-system-components-header.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-icon.mjs +2 -2
- package/fesm2022/tekus-design-system-components-icon.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-modal.mjs +51 -31
- package/fesm2022/tekus-design-system-components-modal.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-process-steps.mjs +132 -0
- package/fesm2022/tekus-design-system-components-process-steps.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs +20 -6
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-stepper.mjs +1 -1
- package/fesm2022/tekus-design-system-components-stepper.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-table.mjs +1 -1
- package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toast.mjs +1 -1
- package/fesm2022/tekus-design-system-components-toast.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toolbar.mjs +1 -1
- package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-topbar.mjs +1 -1
- package/fesm2022/tekus-design-system-components-topbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-uploader.mjs +1256 -0
- package/fesm2022/tekus-design-system-components-uploader.mjs.map +1 -0
- package/package.json +17 -1
- package/types/tekus-design-system-components-button.d.ts +20 -1
- package/types/tekus-design-system-components-carousel.d.ts +200 -0
- package/types/tekus-design-system-components-header.d.ts +33 -0
- package/types/tekus-design-system-components-modal.d.ts +31 -13
- package/types/tekus-design-system-components-process-steps.d.ts +72 -0
- package/types/tekus-design-system-components-sidebar-layout.d.ts +11 -1
- package/types/tekus-design-system-components-uploader.d.ts +524 -0
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, inject, ChangeDetectorRef, input, output, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
4
3
|
import { BehaviorSubject, Subscription } from 'rxjs';
|
|
5
4
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
6
5
|
import { ButtonComponent } from '@tekus/design-system/components/button';
|
|
6
|
+
import { HeaderComponent } from '@tekus/design-system/components/header';
|
|
7
7
|
|
|
8
8
|
class SidebarService {
|
|
9
9
|
constructor() {
|
|
@@ -58,6 +58,10 @@ class SidebarLayoutComponent {
|
|
|
58
58
|
* If provided, it overrides the service state.
|
|
59
59
|
*/
|
|
60
60
|
this.isCollapsed = input(undefined, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
61
|
+
/**
|
|
62
|
+
* Actions rendered in the right zone of the header via tk-header.
|
|
63
|
+
*/
|
|
64
|
+
this.headerActions = input([], ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
|
|
61
65
|
/**
|
|
62
66
|
* Emitted when the collapsed state changes.
|
|
63
67
|
*/
|
|
@@ -108,6 +112,16 @@ class SidebarLayoutComponent {
|
|
|
108
112
|
get displayCollapsed() {
|
|
109
113
|
return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed();
|
|
110
114
|
}
|
|
115
|
+
/**
|
|
116
|
+
* Returns the left actions for tk-header: includes the toggle button
|
|
117
|
+
* only when the sidebar is collapsed or in tablet/mobile mode.
|
|
118
|
+
*/
|
|
119
|
+
get headerLeftActions() {
|
|
120
|
+
if (this.displayCollapsed || this.isTablet) {
|
|
121
|
+
return [{ icon: 'bars', label: 'Toggle sidebar', action: () => this.toggleSidebar() }];
|
|
122
|
+
}
|
|
123
|
+
return [];
|
|
124
|
+
}
|
|
111
125
|
/**
|
|
112
126
|
* Toggles the sidebar state.
|
|
113
127
|
*/
|
|
@@ -158,15 +172,15 @@ class SidebarLayoutComponent {
|
|
|
158
172
|
this.closeSidebar();
|
|
159
173
|
}
|
|
160
174
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarLayoutComponent, isStandalone: true, selector: "tk-sidebar-layout", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "handleSidebarContentClick($event)" } }, ngImport: i0, template: "<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <
|
|
175
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarLayoutComponent, isStandalone: true, selector: "tk-sidebar-layout", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "click": "handleSidebarContentClick($event)" } }, ngImport: i0, template: "<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <tk-header\n [logoSrc]=\"(displayCollapsed || isTablet) ? 'assets/img/tk-logo-normal-dark.svg' : undefined\"\n logoAlt=\"Tekus Logo\"\n [leftActions]=\"headerLeftActions\"\n [rightActions]=\"headerActions()\">\n </tk-header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\n </div>\n</div>\n", styles: [":host{display:block;height:100vh;width:100%}.tk-sidebar-layout{display:flex;height:100%;width:100%;overflow:hidden;position:relative}.tk-sidebar-layout .tk-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;cursor:pointer;animation:fadeIn .3s ease-in-out;display:block}.tk-sidebar-layout .tk-sidebar-backdrop::ng-deep .p-button{width:100%!important;height:100%!important;background-color:#00000080!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tk-sidebar-layout .tk-sidebar{background-color:var(--tk-color-background-inverse, #191a1b);color:var(--tk-color-text-inverse, #ffffff);width:var(--tk-sidebar-width, 17.5rem);height:100%;display:flex;flex-direction:column;transition:width .3s ease-in-out,transform .3s ease-in-out;flex-shrink:0;overflow-y:auto;overflow-x:hidden}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar{width:.25rem}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar-thumb{background:var(--tk-color-base-surface-700, #424243);border-radius:.125rem}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header{padding:0 var(--tk-spacing-padding-m, 1rem);display:flex;align-items:center;justify-content:space-between;height:3.5rem;flex-shrink:0}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-expanded{height:1.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-collapsed{height:2.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-menu{flex:1;padding:var(--tk-spacing-padding-m, 1rem)}.tk-sidebar-layout .tk-main-container{flex:1;display:flex;flex-direction:column;min-width:0;background-color:var(--tk-color-background-default, #ffffff)}.tk-sidebar-layout .tk-main-container tk-header{border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-sidebar-toggle{appearance:none;background:none;border:none;box-shadow:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--tk-color-text-default, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);transition:all .2s;min-width:unset}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button{background:none!important;border:none!important;padding:var(--tk-spacing-padding-xs, .25rem)!important;min-width:unset!important;height:auto!important;color:inherit!important;box-shadow:none!important}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button:hover{background-color:var(--tk-color-background-soft, #f2f1f1)!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar{color:#fff!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button{color:#fff!important;background:transparent!important;padding:0!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button:hover{background-color:transparent!important;opacity:.7}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep svg,.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep path{fill:currentColor!important;stroke:currentColor!important}.tk-sidebar-layout .tk-content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-l, 1.25rem)}.tk-sidebar-layout.collapsed:not(.is-tablet) .tk-sidebar{width:0;border-right:none}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-chevron,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-icon{display:none!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-link,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header{justify-content:center;padding-left:0!important;padding-right:0!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-content{justify-content:center}.tk-sidebar-layout.is-tablet .tk-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;width:var(--tk-sidebar-width, 17.5rem)!important;transform:translate(0);box-shadow:4px 0 10px #0000001a}.tk-sidebar-layout.is-tablet.collapsed .tk-sidebar{transform:translate(-100%)}.tk-sidebar-layout.is-tablet .tk-main-container{width:100%;flex:1}.tk-sidebar-layout.is-mobile .tk-sidebar{width:100%!important;max-width:none!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: HeaderComponent, selector: "tk-header", inputs: ["logoSrc", "logoAlt", "leftActions", "rightActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
162
176
|
}
|
|
163
177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
|
|
164
178
|
type: Component,
|
|
165
179
|
args: [{ selector: 'tk-sidebar-layout', imports: [
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <
|
|
169
|
-
}], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], handleSidebarContentClick: [{
|
|
180
|
+
ButtonComponent,
|
|
181
|
+
HeaderComponent,
|
|
182
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <tk-header\n [logoSrc]=\"(displayCollapsed || isTablet) ? 'assets/img/tk-logo-normal-dark.svg' : undefined\"\n logoAlt=\"Tekus Logo\"\n [leftActions]=\"headerLeftActions\"\n [rightActions]=\"headerActions()\">\n </tk-header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\n </div>\n</div>\n", styles: [":host{display:block;height:100vh;width:100%}.tk-sidebar-layout{display:flex;height:100%;width:100%;overflow:hidden;position:relative}.tk-sidebar-layout .tk-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;cursor:pointer;animation:fadeIn .3s ease-in-out;display:block}.tk-sidebar-layout .tk-sidebar-backdrop::ng-deep .p-button{width:100%!important;height:100%!important;background-color:#00000080!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tk-sidebar-layout .tk-sidebar{background-color:var(--tk-color-background-inverse, #191a1b);color:var(--tk-color-text-inverse, #ffffff);width:var(--tk-sidebar-width, 17.5rem);height:100%;display:flex;flex-direction:column;transition:width .3s ease-in-out,transform .3s ease-in-out;flex-shrink:0;overflow-y:auto;overflow-x:hidden}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar{width:.25rem}.tk-sidebar-layout .tk-sidebar::-webkit-scrollbar-thumb{background:var(--tk-color-base-surface-700, #424243);border-radius:.125rem}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header{padding:0 var(--tk-spacing-padding-m, 1rem);display:flex;align-items:center;justify-content:space-between;height:3.5rem;flex-shrink:0}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-expanded{height:1.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-header .tk-logo-collapsed{height:2.5rem;width:auto}.tk-sidebar-layout .tk-sidebar .tk-sidebar-menu{flex:1;padding:var(--tk-spacing-padding-m, 1rem)}.tk-sidebar-layout .tk-main-container{flex:1;display:flex;flex-direction:column;min-width:0;background-color:var(--tk-color-background-default, #ffffff)}.tk-sidebar-layout .tk-main-container tk-header{border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-sidebar-toggle{appearance:none;background:none;border:none;box-shadow:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--tk-color-text-default, #191a1b);border-radius:var(--tk-borderRadius-s, .5rem);transition:all .2s;min-width:unset}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button{background:none!important;border:none!important;padding:var(--tk-spacing-padding-xs, .25rem)!important;min-width:unset!important;height:auto!important;color:inherit!important;box-shadow:none!important}.tk-sidebar-layout .tk-sidebar-toggle::ng-deep .p-button:hover{background-color:var(--tk-color-background-soft, #f2f1f1)!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar{color:#fff!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button{color:#fff!important;background:transparent!important;padding:0!important}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button:hover{background-color:transparent!important;opacity:.7}.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep svg,.tk-sidebar-layout .tk-sidebar-toggle.is-sidebar::ng-deep .p-button ::ng-deep path{fill:currentColor!important;stroke:currentColor!important}.tk-sidebar-layout .tk-content{flex:1;overflow-y:auto;padding:var(--tk-spacing-padding-l, 1.25rem)}.tk-sidebar-layout.collapsed:not(.is-tablet) .tk-sidebar{width:0;border-right:none}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header-label,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-chevron,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-icon{display:none!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-link,.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .p-panelmenu-header{justify-content:center;padding-left:0!important;padding-right:0!important}.tk-sidebar-layout.collapsed:not(.is-tablet) ::ng-deep .tk-sidebar .tk-panel-menu .tk-pm-item-content{justify-content:center}.tk-sidebar-layout.is-tablet .tk-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;width:var(--tk-sidebar-width, 17.5rem)!important;transform:translate(0);box-shadow:4px 0 10px #0000001a}.tk-sidebar-layout.is-tablet.collapsed .tk-sidebar{transform:translate(-100%)}.tk-sidebar-layout.is-tablet .tk-main-container{width:100%;flex:1}.tk-sidebar-layout.is-mobile .tk-sidebar{width:100%!important;max-width:none!important}\n"] }]
|
|
183
|
+
}], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], handleSidebarContentClick: [{
|
|
170
184
|
type: HostListener,
|
|
171
185
|
args: ['click', ['$event']]
|
|
172
186
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-sidebar-layout.mjs","sources":["../../../projects/design-system/components/sidebar-layout/src/sidebar.service.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.html","../../../projects/design-system/components/sidebar-layout/tekus-design-system-components-sidebar-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SidebarService {\n private readonly collapsedSubject = new BehaviorSubject<boolean>(false);\n \n /**\n * Observable to track the collapsed state of the sidebar.\n */\n isCollapsed$ = this.collapsedSubject.asObservable();\n\n /**\n * Toggles the collapsed state of the sidebar.\n */\n toggle(): void {\n this.collapsedSubject.next(!this.collapsedSubject.value);\n }\n\n /**\n * Explicitly sets the collapsed state of the sidebar.\n * @param value True to collapse, false to expand.\n */\n setCollapsed(value: boolean): void {\n this.collapsedSubject.next(value);\n }\n\n /**\n * Gets the current collapsed state.\n */\n get isCollapsed(): boolean {\n return this.collapsedSubject.value;\n }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, output, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { SidebarService } from './sidebar.service';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\n\n@Component({\n selector: 'tk-sidebar-layout',\n imports: [\n CommonModule,\n ButtonComponent\n ],\n templateUrl: './sidebar-layout.component.html',\n styleUrl: './sidebar-layout.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SidebarLayoutComponent implements OnInit, OnDestroy {\n private readonly sidebarService = inject(SidebarService);\n private readonly breakpointObserver = inject(BreakpointObserver);\n private readonly cdr = inject(ChangeDetectorRef);\n private readonly subscription = new Subscription();\n\n /**\n * Breakpoint constants\n */\n private readonly TABLET_BREAKPOINT = '(max-width: 1023px)';\n private readonly MOBILE_BREAKPOINT = '(max-width: 479px)';\n\n /**\n * Optional manual control of the collapsed state.\n * If provided, it overrides the service state.\n */\n isCollapsed = input<boolean | undefined>(undefined);\n\n\n /**\n * Emitted when the collapsed state changes.\n */\n collapsedChange = output<boolean>();\n\n /**\n * Internal state of the sidebar.\n */\n collapsed = false;\n\n /**\n * Responsive states\n */\n isTablet = false;\n isMobile = false;\n\n ngOnInit(): void {\n // Sync with service\n this.subscription.add(\n this.sidebarService.isCollapsed$.subscribe((state) => {\n if (this.isCollapsed() === undefined) {\n this.collapsed = state;\n this.collapsedChange.emit(state);\n this.cdr.markForCheck();\n }\n })\n );\n\n // Responsive breakpoints\n this.subscription.add(\n this.breakpointObserver\n .observe([this.TABLET_BREAKPOINT, this.MOBILE_BREAKPOINT])\n .subscribe((result) => {\n const wasTablet = this.isTablet;\n this.isTablet = result.breakpoints[this.TABLET_BREAKPOINT];\n this.isMobile = result.breakpoints[this.MOBILE_BREAKPOINT];\n\n // Auto-collapse when entering tablet/mobile mode (< 1024px)\n if (this.isTablet && !wasTablet) {\n this.sidebarService.setCollapsed(true);\n }\n\n // Auto-expand when returning to desktop mode (> 1024px)\n if (!this.isTablet && wasTablet) {\n this.sidebarService.setCollapsed(false);\n }\n\n this.cdr.markForCheck();\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /**\n * Determines if the sidebar is currently collapsed.\n */\n get displayCollapsed(): boolean {\n return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed()!;\n }\n\n /**\n * Toggles the sidebar state.\n */\n toggleSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.toggle();\n } else {\n this.collapsedChange.emit(!this.isCollapsed());\n }\n }\n\n /**\n * Closes the sidebar explicitly.\n */\n closeSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.setCollapsed(true);\n } else {\n this.collapsedChange.emit(true);\n }\n }\n\n /**\n * Handles clicks in the sidebar content to auto-close on mobile.\n * Using HostListener to avoid template accessibility linting on non-interactive aside.\n */\n @HostListener('click', ['$event'])\n handleSidebarContentClick(event: MouseEvent): void {\n if (!this.isMobile) return;\n\n // Check if the click is inside the sidebar\n const sidebar = (event.target as HTMLElement).closest('.tk-sidebar');\n if (!sidebar) return;\n\n const target = event.target as HTMLElement;\n const navItem = target.closest('.tk-menu-item-link, .tk-pm-item-link, a, button');\n\n if (navItem) {\n // Check if it's a toggle for a sub-menu (has children)\n const hasChildren = navItem.querySelector('.tk-menu-item-chevron, .tk-pm-item-chevron');\n if (!hasChildren) {\n this.closeSidebar();\n }\n }\n }\n\n /**\n * Handles backdrop clicks to close the drawer.\n */\n handleBackdropClick(): void {\n this.closeSidebar();\n }\n}\n","<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <header class=\"tk-nav-header\">\n <div class=\"tk-nav-left\">\n @if (displayCollapsed || isTablet) {\n <tk-button\n class=\"tk-sidebar-toggle\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"bars\"\n ></tk-button>\n <img\n src=\"assets/img/tk-logo-normal-dark.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-header\"\n />\n }\n </div>\n\n <div class=\"tk-nav-right\">\n <div class=\"tk-header-actions\">\n <ng-content select=\"[header-actions]\"></ng-content>\n </div>\n </div>\n </header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-sidebar-layout.mjs","sources":["../../../projects/design-system/components/sidebar-layout/src/sidebar.service.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.ts","../../../projects/design-system/components/sidebar-layout/src/sidebar-layout.component.html","../../../projects/design-system/components/sidebar-layout/tekus-design-system-components-sidebar-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SidebarService {\n private readonly collapsedSubject = new BehaviorSubject<boolean>(false);\n \n /**\n * Observable to track the collapsed state of the sidebar.\n */\n isCollapsed$ = this.collapsedSubject.asObservable();\n\n /**\n * Toggles the collapsed state of the sidebar.\n */\n toggle(): void {\n this.collapsedSubject.next(!this.collapsedSubject.value);\n }\n\n /**\n * Explicitly sets the collapsed state of the sidebar.\n * @param value True to collapse, false to expand.\n */\n setCollapsed(value: boolean): void {\n this.collapsedSubject.next(value);\n }\n\n /**\n * Gets the current collapsed state.\n */\n get isCollapsed(): boolean {\n return this.collapsedSubject.value;\n }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, output, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { BreakpointObserver } from '@angular/cdk/layout';\nimport { SidebarService } from './sidebar.service';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { HeaderComponent, TkHeaderAction } from '@tekus/design-system/components/header';\n\n@Component({\n selector: 'tk-sidebar-layout',\n imports: [\n ButtonComponent,\n HeaderComponent,\n ],\n templateUrl: './sidebar-layout.component.html',\n styleUrl: './sidebar-layout.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SidebarLayoutComponent implements OnInit, OnDestroy {\n private readonly sidebarService = inject(SidebarService);\n private readonly breakpointObserver = inject(BreakpointObserver);\n private readonly cdr = inject(ChangeDetectorRef);\n private readonly subscription = new Subscription();\n\n /**\n * Breakpoint constants\n */\n private readonly TABLET_BREAKPOINT = '(max-width: 1023px)';\n private readonly MOBILE_BREAKPOINT = '(max-width: 479px)';\n\n /**\n * Optional manual control of the collapsed state.\n * If provided, it overrides the service state.\n */\n isCollapsed = input<boolean | undefined>(undefined);\n\n /**\n * Actions rendered in the right zone of the header via tk-header.\n */\n headerActions = input<TkHeaderAction[]>([]);\n\n /**\n * Emitted when the collapsed state changes.\n */\n collapsedChange = output<boolean>();\n\n /**\n * Internal state of the sidebar.\n */\n collapsed = false;\n\n /**\n * Responsive states\n */\n isTablet = false;\n isMobile = false;\n\n ngOnInit(): void {\n // Sync with service\n this.subscription.add(\n this.sidebarService.isCollapsed$.subscribe((state) => {\n if (this.isCollapsed() === undefined) {\n this.collapsed = state;\n this.collapsedChange.emit(state);\n this.cdr.markForCheck();\n }\n })\n );\n\n // Responsive breakpoints\n this.subscription.add(\n this.breakpointObserver\n .observe([this.TABLET_BREAKPOINT, this.MOBILE_BREAKPOINT])\n .subscribe((result) => {\n const wasTablet = this.isTablet;\n this.isTablet = result.breakpoints[this.TABLET_BREAKPOINT];\n this.isMobile = result.breakpoints[this.MOBILE_BREAKPOINT];\n\n // Auto-collapse when entering tablet/mobile mode (< 1024px)\n if (this.isTablet && !wasTablet) {\n this.sidebarService.setCollapsed(true);\n }\n\n // Auto-expand when returning to desktop mode (> 1024px)\n if (!this.isTablet && wasTablet) {\n this.sidebarService.setCollapsed(false);\n }\n\n this.cdr.markForCheck();\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /**\n * Determines if the sidebar is currently collapsed.\n */\n get displayCollapsed(): boolean {\n return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed()!;\n }\n\n /**\n * Returns the left actions for tk-header: includes the toggle button\n * only when the sidebar is collapsed or in tablet/mobile mode.\n */\n get headerLeftActions(): TkHeaderAction[] {\n if (this.displayCollapsed || this.isTablet) {\n return [{ icon: 'bars', label: 'Toggle sidebar', action: () => this.toggleSidebar() }];\n }\n return [];\n }\n\n /**\n * Toggles the sidebar state.\n */\n toggleSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.toggle();\n } else {\n this.collapsedChange.emit(!this.isCollapsed());\n }\n }\n\n /**\n * Closes the sidebar explicitly.\n */\n closeSidebar(): void {\n if (this.isCollapsed() === undefined) {\n this.sidebarService.setCollapsed(true);\n } else {\n this.collapsedChange.emit(true);\n }\n }\n\n /**\n * Handles clicks in the sidebar content to auto-close on mobile.\n * Using HostListener to avoid template accessibility linting on non-interactive aside.\n */\n @HostListener('click', ['$event'])\n handleSidebarContentClick(event: MouseEvent): void {\n if (!this.isMobile) return;\n\n // Check if the click is inside the sidebar\n const sidebar = (event.target as HTMLElement).closest('.tk-sidebar');\n if (!sidebar) return;\n\n const target = event.target as HTMLElement;\n const navItem = target.closest('.tk-menu-item-link, .tk-pm-item-link, a, button');\n\n if (navItem) {\n // Check if it's a toggle for a sub-menu (has children)\n const hasChildren = navItem.querySelector('.tk-menu-item-chevron, .tk-pm-item-chevron');\n if (!hasChildren) {\n this.closeSidebar();\n }\n }\n }\n\n /**\n * Handles backdrop clicks to close the drawer.\n */\n handleBackdropClick(): void {\n this.closeSidebar();\n }\n}\n","<div\n class=\"tk-sidebar-layout\"\n [class.collapsed]=\"displayCollapsed\"\n [class.is-tablet]=\"isTablet\"\n [class.is-mobile]=\"isMobile\"\n>\n <!-- Backdrop for overlay mode -->\n @if (!displayCollapsed && isTablet) {\n <tk-button\n class=\"tk-sidebar-backdrop\"\n (clicked)=\"handleBackdropClick()\"\n aria-label=\"Close sidebar\"\n ></tk-button>\n }\n\n <!-- Sidebar -->\n <aside class=\"tk-sidebar\">\n @if (!displayCollapsed) {\n <div class=\"tk-sidebar-header\">\n <img\n src=\"assets/img/tk-logo-normal-light.svg\"\n alt=\"Tekus Logo\"\n class=\"tk-logo-expanded\"\n />\n <tk-button\n class=\"tk-sidebar-toggle is-sidebar\"\n (clicked)=\"toggleSidebar()\"\n severity=\"secondary\"\n variant=\"text\"\n icon=\"arrow-left\"\n ></tk-button>\n </div>\n }\n\n <ng-content select=\"[sidebar-content]\"></ng-content>\n </aside>\n\n <!-- Main Content -->\n <div class=\"tk-main-container\">\n <tk-header\n [logoSrc]=\"(displayCollapsed || isTablet) ? 'assets/img/tk-logo-normal-dark.svg' : undefined\"\n logoAlt=\"Tekus Logo\"\n [leftActions]=\"headerLeftActions\"\n [rightActions]=\"headerActions()\">\n </tk-header>\n\n <main class=\"tk-content\">\n <ng-content></ng-content>\n </main>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -100,7 +100,7 @@ class StepperComponent {
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StepperComponent, isStandalone: true, selector: "tk-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-stepper-container{display:block;width:100%;box-sizing:border-box}.tk-stepper-container.tk-stepper-vertical{padding-right:1rem;padding-bottom:.5rem}:host ::ng-deep .p-stepper{display:flex;flex-direction:column;width:100%;background:transparent}:host ::ng-deep .p-steplist{display:flex;align-items:center;width:100%;background:transparent;padding:0;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}:host ::ng-deep .p-step{padding:0;background:transparent;border:none;outline:none!important;box-shadow:none!important;cursor:pointer;display:flex}:host ::ng-deep .p-step:focus,:host ::ng-deep .p-step:focus-visible,:host ::ng-deep .p-step:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step{align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .p-step-header{outline:none!important;box-shadow:none!important;border:none!important;background:transparent!important}:host ::ng-deep .p-step .p-step-header:focus,:host ::ng-deep .p-step .p-step-header:focus-visible,:host ::ng-deep .p-step .p-step-header:focus-within{outline:none!important;box-shadow:none!important}:host ::ng-deep .p-step .p-step-number{display:none!important}:host ::ng-deep .p-step .tk-step-header-content{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .p-step .tk-step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-full, 50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);background-color:var(--tk-color-background-default, #ffffff);transition:all .2s ease-in-out}:host ::ng-deep .p-step .tk-step-title{color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);transition:all .2s ease-in-out}:host ::ng-deep .p-step.p-step-active .tk-step-number,:host ::ng-deep .p-step[data-p-active=true] .tk-step-number{border-color:var(--tk-color-border-default, #cecdcd);color:var(--tk-color-primary-default, #16006f);background-color:var(--tk-color-background-default, #ffffff)}:host ::ng-deep .p-step.p-step-active .tk-step-title,:host ::ng-deep .p-step[data-p-active=true] .tk-step-title{color:var(--tk-color-primary-default, #16006f);font-weight:var(--tk-font-weight-600, 600)}:host ::ng-deep .p-step.p-disabled,:host ::ng-deep .p-step[disabled],:host ::ng-deep .p-step[data-p-disabled=true]{opacity:.6;cursor:not-allowed}:host ::ng-deep .p-stepper-separator{flex:1 1 0;height:1px!important;background-color:var(--tk-color-primary-default, #16006f)!important;margin:0 var(--tk-spacing-base-100, 1rem)!important;border:none!important;transition:background-color .2s ease-in-out}:host ::ng-deep .p-steppanels{width:100%;background:transparent;padding:0}:host ::ng-deep .p-steppanel{width:100%;outline:none}:host ::ng-deep .tk-stepper-vertical .p-stepper{flex-direction:column;gap:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem{display:flex;flex-direction:column;width:calc(100% - .95rem);margin-left:.95rem;padding-left:var(--tk-spacing-base-100, 1rem);padding-bottom:var(--tk-spacing-base-150, 1.5rem);position:relative;box-sizing:border-box}:host ::ng-deep .tk-stepper-vertical .p-stepitem:before{content:\"\";position:absolute;left:0;top:2.6rem;bottom:1rem;width:1px;background-color:transparent;transition:background-color .2s ease-in-out}:host ::ng-deep .tk-stepper-vertical .p-stepitem[data-p-active=true]:before{background-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child{padding-bottom:0}:host ::ng-deep .tk-stepper-vertical .p-stepitem:last-child:before{display:none!important}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-step{margin-left:-2rem;background:transparent;position:relative;z-index:2;margin-bottom:var(--tk-spacing-base-75, .75rem)}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel{padding:0;width:100%}:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content-wrapper,:host ::ng-deep .tk-stepper-vertical .p-stepitem .p-steppanel .p-steppanel-content{margin:0!important;padding:0!important;margin-inline-start:0!important}.tk-step-panel-content{width:100%;min-height:100px}.tk-step-actions-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--tk-spacing-base-150, 1.5rem);width:100%}.tk-step-actions-footer .tk-step-actions-secondary{display:flex;gap:var(--tk-spacing-base-50, .5rem)}.tk-step-actions-footer .tk-step-actions-primary{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-left:auto}.tk-step-actions-footer.vertical{justify-content:flex-start;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: StepperModule }, { kind: "component", type: i1.Stepper, selector: "p-stepper", inputs: ["value", "linear", "transitionOptions", "motionOptions"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepList, selector: "p-step-list" }, { kind: "component", type: i1.StepPanels, selector: "p-step-panels" }, { kind: "component", type: i1.StepPanel, selector: "p-step-panel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.StepItem, selector: "p-step-item", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i1.Step, selector: "p-step", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
104
104
|
}
|
|
105
105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StepperComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n * [steps]=\"steps\"\n * [(activeStep)]=\"currentStep\"\n * [linear]=\"true\"\n * orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n selector: 'tk-stepper',\n imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n templateUrl: './stepper.component.html',\n styleUrl: './stepper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n /**\n * @property {InputSignal<StepData[]>} steps\n * @description Array of step configurations to display.\n */\n steps = input<StepData[]>([]);\n\n /**\n * @property {ModelSignal<number>} activeStep\n * @description The 0-based index of the currently active step. Supports two-way binding.\n * @default 0\n */\n activeStep = model<number>(0);\n\n /**\n * @property {InputSignal<boolean>} linear\n * @description If true, blocks navigation to steps ahead of the active step.\n * @default true\n */\n linear = input<boolean>(true);\n\n /**\n * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n * @description Defines the layout orientation of the stepper.\n * @default 'horizontal'\n */\n orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n /**\n * @property {InputSignal<boolean>} showFooter\n * @description Whether to render the default footer action buttons for each step.\n * @default true\n */\n showFooter = input<boolean>(true);\n\n /**\n * @event stepChange\n * @description Emitted when the active step changes.\n */\n stepChange = output<{\n index: number;\n step: StepData;\n }>();\n\n /**\n * Checks if a step header should be disabled.\n * Steps ahead of the active index are disabled in linear mode.\n */\n isStepDisabled(index: number): boolean {\n const step = this.steps()[index];\n if (!step) return true;\n if (step.disabled) return true;\n if (this.linear() && index > this.activeStep()) return true;\n return false;\n }\n\n /**\n * Helper to evaluate button disabled states dynamically.\n */\n evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n if (disabled === undefined) return false;\n if (typeof disabled === 'function') return disabled();\n return disabled;\n }\n\n /**\n * Handles step transition events.\n */\n onStepChange(index: number) {\n if (this.activeStep() === index) return;\n this.activeStep.set(index);\n if (this.steps()[index]) {\n this.stepChange.emit({\n index,\n step: this.steps()[index],\n });\n }\n }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-stepper.mjs","sources":["../../../projects/design-system/components/stepper/src/stepper.component.ts","../../../projects/design-system/components/stepper/src/stepper.component.html","../../../projects/design-system/components/stepper/tekus-design-system-components-stepper.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { StepperModule } from 'primeng/stepper';\nimport { SharedModule } from 'primeng/api';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { StepData } from './stepper.types';\n\n/**\n * @component StepperComponent\n * @description\n * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.\n * Supports horizontal and vertical orientations, linear step completion rules,\n * and automated footer action buttons.\n *\n * @usage\n * ```html\n * <tk-stepper\n * [steps]=\"steps\"\n * [(activeStep)]=\"currentStep\"\n * [linear]=\"true\"\n * orientation=\"horizontal\">\n * </tk-stepper>\n * ```\n */\n@Component({\n selector: 'tk-stepper',\n imports: [StepperModule, NgTemplateOutlet, ButtonComponent, SharedModule],\n templateUrl: './stepper.component.html',\n styleUrl: './stepper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n /**\n * @property {InputSignal<StepData[]>} steps\n * @description Array of step configurations to display.\n */\n steps = input<StepData[]>([]);\n\n /**\n * @property {ModelSignal<number>} activeStep\n * @description The 0-based index of the currently active step. Supports two-way binding.\n * @default 0\n */\n activeStep = model<number>(0);\n\n /**\n * @property {InputSignal<boolean>} linear\n * @description If true, blocks navigation to steps ahead of the active step.\n * @default true\n */\n linear = input<boolean>(true);\n\n /**\n * @property {InputSignal<'horizontal' | 'vertical'>} orientation\n * @description Defines the layout orientation of the stepper.\n * @default 'horizontal'\n */\n orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n /**\n * @property {InputSignal<boolean>} showFooter\n * @description Whether to render the default footer action buttons for each step.\n * @default true\n */\n showFooter = input<boolean>(true);\n\n /**\n * @event stepChange\n * @description Emitted when the active step changes.\n */\n stepChange = output<{\n index: number;\n step: StepData;\n }>();\n\n /**\n * Checks if a step header should be disabled.\n * Steps ahead of the active index are disabled in linear mode.\n */\n isStepDisabled(index: number): boolean {\n const step = this.steps()[index];\n if (!step) return true;\n if (step.disabled) return true;\n if (this.linear() && index > this.activeStep()) return true;\n return false;\n }\n\n /**\n * Helper to evaluate button disabled states dynamically.\n */\n evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean {\n if (disabled === undefined) return false;\n if (typeof disabled === 'function') return disabled();\n return disabled;\n }\n\n /**\n * Handles step transition events.\n */\n onStepChange(index: number) {\n if (this.activeStep() === index) return;\n this.activeStep.set(index);\n if (this.steps()[index]) {\n this.stepChange.emit({\n index,\n step: this.steps()[index],\n });\n }\n }\n}\n\n","<div class=\"tk-stepper-container\" [class.tk-stepper-vertical]=\"orientation() === 'vertical'\" [class.tk-stepper-horizontal]=\"orientation() === 'horizontal'\">\n @if (steps().length > 0) {\n @if (orientation() === 'horizontal') {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n <p-step-list class=\"tk-step-list-horizontal\">\n @for (step of steps(); track $index) {\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n }\n </p-step-list>\n\n <p-step-panels class=\"tk-step-panels-horizontal\">\n @for (step of steps(); track $index) {\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n \n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer\">\n <div class=\"tk-step-actions-secondary\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n <div class=\"tk-step-actions-primary\">\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n </div>\n }\n </ng-template>\n </p-step-panel>\n }\n </p-step-panels>\n </p-stepper>\n } @else {\n <p-stepper [value]=\"activeStep()\" [linear]=\"linear()\" (valueChange)=\"onStepChange($event !== undefined ? +$event : activeStep())\">\n @for (step of steps(); track $index) {\n <p-step-item [value]=\"$index\">\n <p-step [value]=\"$index\" [disabled]=\"isStepDisabled($index)\">\n <div class=\"tk-step-header-content\">\n <span class=\"tk-step-number\">{{ $index + 1 }}</span>\n <span class=\"tk-step-title\">{{ step.label }}</span>\n </div>\n </p-step>\n <p-step-panel [value]=\"$index\">\n <ng-template pTemplate=\"content\">\n <div class=\"tk-step-panel-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n\n @if (showFooter() && (step.actionsPrimary?.length || step.actionsSecondary?.length)) {\n <div class=\"tk-step-actions-footer vertical\">\n @for (action of step.actionsSecondary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'secondary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n @for (action of step.actionsPrimary; track $index) {\n <tk-button\n [label]=\"action.label\"\n [icon]=\"action.icon\"\n [severity]=\"action.severity || 'primary'\"\n [variant]=\"action.variant\"\n [disabled]=\"evalDisabled(action.disabled)\"\n (clicked)=\"action.action()\">\n </tk-button>\n }\n </div>\n }\n </ng-template>\n </p-step-panel>\n </p-step-item>\n }\n </p-stepper>\n }\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -451,7 +451,7 @@ class TableComponent {
|
|
|
451
451
|
}
|
|
452
452
|
}
|
|
453
453
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
454
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", columnFilters: "columnFiltersChange", sortField: "sortFieldChange", sortOrder: "sortOrderChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group\n [actions]=\"getActionGroup(col.actionGroup!, row)\"\n [maxVisible]=\"col.actionGroupMaxVisible ?? 2\"\n [disabled]=\"col.actionGroupDisabled ?? false\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n ></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__cell-img{display:block;object-fit:cover}.tk-table__cell-img--clickable{cursor:pointer}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__header-content{display:flex;align-items:center;gap:.25rem;width:100%}.tk-table__header-label{white-space:nowrap}.tk-table__header--active{background-color:var(--tk-primary-100, #b7b0d2)!important}.tk-table__filter-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;border-radius:var(--tk-border-radius-xs, 4px);cursor:pointer;color:var(--tk-surface-500, #8a8a8b);transition:background-color .2s,color .2s;padding:0;margin-left:auto}.tk-table__filter-trigger:hover{background-color:var(--tk-surface-200, #e4e4e4);color:var(--tk-surface-700, #424243)}.tk-table__filter-trigger--active{color:var(--tk-primary-700, #10004f);background-color:var(--tk-primary-50, #e8e6f1)}.tk-table__filter-trigger--active:hover{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}.tk-table__filter-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:transparent}.tk-table__filter-overlay{position:fixed;z-index:1000;min-width:10rem;max-height:15rem;background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-200, #e4e4e4);border-radius:var(--tk-border-radius-s, 8px);box-shadow:0 4px 16px #0000001f;overflow:hidden;display:flex;flex-direction:column;animation:tk-filter-fade-in .15s ease-out}.tk-table__filter-list{margin:0;padding:.25rem 0;overflow-y:auto;max-height:12rem;display:flex;flex-direction:column}.tk-table__filter-option{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;color:var(--tk-surface-950, #191a1b);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background:transparent;text-align:left}.tk-table__filter-option:hover{background-color:var(--tk-surface-100, #f2f1f1)}.tk-table__filter-option--selected{background-color:var(--tk-primary-50, #e8e6f1);color:var(--tk-primary-700, #10004f);font-weight:600}.tk-table__filter-option--selected:hover{background-color:var(--tk-primary-100, #b7b0d2)}.tk-table__filter-clear{border-top:1px solid var(--tk-surface-200, #e4e4e4);padding:.375rem .75rem;display:flex;justify-content:center}.tk-table__filter-clear-btn{background:transparent;border:none;color:var(--tk-primary-500, #16006f);font-size:.8125rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:var(--tk-border-radius-xs, 4px);transition:background-color .15s}.tk-table__filter-clear-btn:hover{background-color:var(--tk-primary-50, #e8e6f1)}:host ::ng-deep .p-datatable-thead>tr>th{position:relative}@keyframes tk-filter-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: TimeAgoComponent, selector: "tk-time-ago", inputs: ["dateTime", "severity", "tooltipText", "tooltipFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", columnFilters: "columnFiltersChange", sortField: "sortFieldChange", sortOrder: "sortOrderChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-table #tableRef [selection]=\"selection()\" (selectionChange)=\"updateSelection($any($event))\"\n [selectionMode]=\"selectionMode()\" [dataKey]=\"dataKey()\" [value]=\"internalData()\" [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\" [tableStyle]=\"{ 'min-width': '60rem' }\" responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th [id]=\"col.field\" [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\"\n [class.tk-table__header--active]=\"activeFilterColumn() === col.field || isColumnFiltered(col.field!)\">\n <div class=\"tk-table__header-content\">\n @if (col.type === 'selection' && selectionMode() === 'multiple') {\n <div class=\"tk-table__actions hide-validation-messages\">\n <tk-checkbox [binary]=\"true\" [model]=\"isAllSelected()\" [indeterminate]=\"isPartiallySelected()\"\n (click)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\"\n (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n </div>\n } @else if (col.type !== 'selection') {\n <span class=\"tk-table__header-label\">{{ col.header }}</span>\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n @if (col.filterable && col.field) {\n <button\n class=\"tk-table__filter-trigger\"\n [class.tk-table__filter-trigger--active]=\"isColumnFiltered(col.field)\"\n (click)=\"toggleFilterOverlay(col.field, $event)\"\n type=\"button\"\n [attr.aria-label]=\"'Filter ' + col.header\">\n <tk-icon icon=\"filter\" size=\"sm\"></tk-icon>\n </button>\n }\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr [pSelectableRow]=\"row\">\n @for (col of columns(); track col.header) {\n <!-- SELECTION -->\n @if (col.type === 'selection') {\n <td>\n @if (selectionMode() === 'multiple') {\n <tk-checkbox [model]=\"selection()\" [value]=\"row\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n }\n </td>\n }\n\n <!-- CHECKBOX (Boolean field) -->\n @if (col.type === 'checkbox') {\n <td>\n <tk-checkbox [binary]=\"true\" [(model)]=\"row[col.field!]\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n </td>\n }\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button [icon]=\"action.icon\" severity=\"secondary\" (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\" (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n }\n\n <!-- ACTION GROUP -->\n @if (col.type === 'action-group') {\n <td>\n <div class=\"tk-table__actions\">\n <tk-action-group\n [actions]=\"getActionGroup(col.actionGroup!, row)\"\n [maxVisible]=\"col.actionGroupMaxVisible ?? 2\"\n [disabled]=\"col.actionGroupDisabled ?? false\"\n (click)=\"$event.stopPropagation()\"\n (keypress)=\"$event.stopPropagation()\"\n ></tk-action-group>\n </div>\n </td>\n }\n\n <!-- CONNECTION STATUS -->\n @if (col.type === 'connection-status') {\n <td>\n <tk-time-ago\n [dateTime]=\"row[col.field!]\"\n [severity]=\"col.connectionStatusSeverity ? col.connectionStatusSeverity(row) : 'success'\"\n [tooltipText]=\"col.connectionStatusTooltipText ? col.connectionStatusTooltipText(row) : undefined\" />\n </td>\n }\n\n <!-- IMAGE -->\n @if (col.type === 'image') {\n <td>\n <img\n class=\"tk-table__cell-img\"\n [class.tk-table__cell-img--clickable]=\"!!col.imageAction\"\n [src]=\"row[col.field!]\"\n [alt]=\"col.imageAlt ? col.imageAlt(row) : ''\"\n [style.width]=\"col.imageWidth ?? '40px'\"\n [style.height]=\"col.imageHeight ?? '40px'\"\n [attr.tabindex]=\"col.imageAction ? 0 : null\"\n [attr.role]=\"col.imageAction ? 'button' : null\"\n (click)=\"handleImageClick($event, col, row)\"\n (keydown.enter)=\"col.imageAction && col.imageAction(row)\"\n (error)=\"onImageError($event, col.imageFallback)\"\n />\n </td>\n }\n }\n </tr>\n </ng-template>\n</p-table>\n\n<!-- Filter Overlay rendered outside the table to avoid overflow clipping -->\n@if (activeFilterColumn()) {\n<div class=\"tk-table__filter-backdrop\"\n tabindex=\"-1\"\n (click)=\"closeFilterOverlay()\"\n (keydown.escape)=\"closeFilterOverlay()\"></div>\n<div\n class=\"tk-table__filter-overlay\"\n tabindex=\"-1\"\n [style.top.px]=\"filterOverlayPosition().top\"\n [style.left.px]=\"filterOverlayPosition().left\"\n (click)=\"$event.stopPropagation()\"\n (keydown.escape)=\"closeFilterOverlay()\">\n <div class=\"tk-table__filter-list\">\n @for (option of getUniqueColumnValues(activeFilterColumn()!); track option) {\n <button\n class=\"tk-table__filter-option\"\n [class.tk-table__filter-option--selected]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n type=\"button\"\n [attr.aria-pressed]=\"getActiveFilterValue(activeFilterColumn()!) === option\"\n (click)=\"selectFilterValue(activeFilterColumn()!, option)\">\n {{ option }}\n </button>\n }\n </div>\n @if (isColumnFiltered(activeFilterColumn()!)) {\n <div class=\"tk-table__filter-clear\">\n <button\n class=\"tk-table__filter-clear-btn\"\n type=\"button\"\n (click)=\"clearFilter(activeFilterColumn()!)\">\n Clear filter\n </button>\n </div>\n }\n</div>\n}\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__cell-img{display:block;object-fit:cover}.tk-table__cell-img--clickable{cursor:pointer}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-table__header-content{display:flex;align-items:center;gap:.25rem;width:100%}.tk-table__header-label{white-space:nowrap}.tk-table__header--active{background-color:var(--tk-primary-100, #b7b0d2)!important}.tk-table__filter-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;border-radius:var(--tk-border-radius-xs, 4px);cursor:pointer;color:var(--tk-surface-500, #8a8a8b);transition:background-color .2s,color .2s;padding:0;margin-left:auto}.tk-table__filter-trigger:hover{background-color:var(--tk-surface-200, #e4e4e4);color:var(--tk-surface-700, #424243)}.tk-table__filter-trigger--active{color:var(--tk-primary-700, #10004f);background-color:var(--tk-primary-50, #e8e6f1)}.tk-table__filter-trigger--active:hover{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}.tk-table__filter-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:transparent}.tk-table__filter-overlay{position:fixed;z-index:1000;min-width:10rem;max-height:15rem;background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-200, #e4e4e4);border-radius:var(--tk-border-radius-s, 8px);box-shadow:0 4px 16px #0000001f;overflow:hidden;display:flex;flex-direction:column;animation:tk-filter-fade-in .15s ease-out}.tk-table__filter-list{margin:0;padding:.25rem 0;overflow-y:auto;max-height:12rem;display:flex;flex-direction:column}.tk-table__filter-option{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;color:var(--tk-surface-950, #191a1b);cursor:pointer;transition:background-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;background:transparent;text-align:left}.tk-table__filter-option:hover{background-color:var(--tk-surface-100, #f2f1f1)}.tk-table__filter-option--selected{background-color:var(--tk-primary-50, #e8e6f1);color:var(--tk-primary-700, #10004f);font-weight:600}.tk-table__filter-option--selected:hover{background-color:var(--tk-primary-100, #b7b0d2)}.tk-table__filter-clear{border-top:1px solid var(--tk-surface-200, #e4e4e4);padding:.375rem .75rem;display:flex;justify-content:center}.tk-table__filter-clear-btn{background:transparent;border:none;color:var(--tk-primary-500, #16006f);font-size:.8125rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:var(--tk-border-radius-xs, 4px);transition:background-color .15s}.tk-table__filter-clear-btn:hover{background-color:var(--tk-primary-50, #e8e6f1)}:host ::ng-deep .p-datatable-thead>tr>th{position:relative}@keyframes tk-filter-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: TimeAgoComponent, selector: "tk-time-ago", inputs: ["dateTime", "severity", "tooltipText", "tooltipFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
455
455
|
}
|
|
456
456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
|
|
457
457
|
type: Component,
|