@tekus/design-system 5.26.0 → 5.28.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/assets/tokens/tk-foundations.json +167 -80
- package/fesm2022/tekus-design-system-components-badge.mjs +3 -1
- package/fesm2022/tekus-design-system-components-badge.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-bread-crumps.mjs +65 -0
- package/fesm2022/tekus-design-system-components-bread-crumps.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-button.mjs +2 -2
- package/fesm2022/tekus-design-system-components-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-card.mjs +9 -8
- package/fesm2022/tekus-design-system-components-card.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-date-picker.mjs +2 -2
- package/fesm2022/tekus-design-system-components-date-picker.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-drawer.mjs +2 -2
- package/fesm2022/tekus-design-system-components-drawer.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-dropdown.mjs +79 -0
- package/fesm2022/tekus-design-system-components-dropdown.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +2 -2
- package/fesm2022/tekus-design-system-components-fallback-view.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-input-number.mjs +2 -2
- package/fesm2022/tekus-design-system-components-input-number.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-input-text.mjs +2 -2
- package/fesm2022/tekus-design-system-components-input-text.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-menu.mjs +151 -0
- package/fesm2022/tekus-design-system-components-menu.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-message.mjs +82 -0
- package/fesm2022/tekus-design-system-components-message.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-modal.mjs +2 -2
- package/fesm2022/tekus-design-system-components-modal.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-multiselect.mjs +2 -2
- package/fesm2022/tekus-design-system-components-multiselect.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-pagination.mjs +2 -2
- package/fesm2022/tekus-design-system-components-pagination.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-panel-menu.mjs +54 -0
- package/fesm2022/tekus-design-system-components-panel-menu.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-panel.mjs +38 -5
- package/fesm2022/tekus-design-system-components-panel.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-select.mjs +2 -2
- package/fesm2022/tekus-design-system-components-select.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs +179 -0
- package/fesm2022/tekus-design-system-components-sidebar-layout.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-table.mjs +2 -2
- package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-textarea.mjs +2 -2
- package/fesm2022/tekus-design-system-components-textarea.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toggle.mjs +95 -0
- package/fesm2022/tekus-design-system-components-toggle.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-topbar.mjs +10 -3
- package/fesm2022/tekus-design-system-components-topbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core-types.mjs +105 -13
- package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core.mjs +105 -13
- package/fesm2022/tekus-design-system-core.mjs.map +1 -1
- package/package.json +29 -1
- package/styles/variables.css +38 -25
- package/types/tekus-design-system-components-badge.d.ts +4 -3
- package/types/tekus-design-system-components-bread-crumps.d.ts +26 -0
- package/types/tekus-design-system-components-dropdown.d.ts +59 -0
- package/types/tekus-design-system-components-menu.d.ts +71 -0
- package/types/tekus-design-system-components-message.d.ts +50 -0
- package/types/tekus-design-system-components-panel-menu.d.ts +20 -0
- package/types/tekus-design-system-components-panel.d.ts +35 -2
- package/types/tekus-design-system-components-sidebar-layout.d.ts +96 -0
- package/types/tekus-design-system-components-toggle.d.ts +30 -0
- package/types/tekus-design-system-components-topbar.d.ts +8 -1
|
@@ -3,6 +3,8 @@ import { input, model, output, ChangeDetectionStrategy, Component } from '@angul
|
|
|
3
3
|
import * as i1 from 'primeng/panel';
|
|
4
4
|
import { PanelModule } from 'primeng/panel';
|
|
5
5
|
import { IconComponent } from '@tekus/design-system/components/icon';
|
|
6
|
+
import { BadgeComponent } from '@tekus/design-system/components/badge';
|
|
7
|
+
import { TooltipComponent } from '@tekus/design-system/components/tooltip';
|
|
6
8
|
import * as i2 from 'primeng/api';
|
|
7
9
|
|
|
8
10
|
/**
|
|
@@ -34,6 +36,38 @@ class PanelComponent {
|
|
|
34
36
|
* @default undefined
|
|
35
37
|
*/
|
|
36
38
|
this.header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
|
|
39
|
+
/**
|
|
40
|
+
* @property {string | number} badge
|
|
41
|
+
* @description
|
|
42
|
+
* Optional badge value to display in the header.
|
|
43
|
+
*
|
|
44
|
+
* @default undefined
|
|
45
|
+
*/
|
|
46
|
+
this.badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
47
|
+
/**
|
|
48
|
+
* @property {BadgeSeverity} badgeSeverity
|
|
49
|
+
* @description
|
|
50
|
+
* Severity of the badge.
|
|
51
|
+
*
|
|
52
|
+
* @default 'danger'
|
|
53
|
+
*/
|
|
54
|
+
this.badgeSeverity = input('danger', ...(ngDevMode ? [{ debugName: "badgeSeverity" }] : /* istanbul ignore next */ []));
|
|
55
|
+
/**
|
|
56
|
+
* @property {string} helpIcon
|
|
57
|
+
* @description
|
|
58
|
+
* The name of the icon to display for information/help.
|
|
59
|
+
*
|
|
60
|
+
* @default 'circle-question'
|
|
61
|
+
*/
|
|
62
|
+
this.helpIcon = input('circle-question', ...(ngDevMode ? [{ debugName: "helpIcon" }] : /* istanbul ignore next */ []));
|
|
63
|
+
/**
|
|
64
|
+
* @property {string} helpText
|
|
65
|
+
* @description
|
|
66
|
+
* Optional help text to display as a tooltip on a help icon in the header.
|
|
67
|
+
*
|
|
68
|
+
* @default undefined
|
|
69
|
+
*/
|
|
70
|
+
this.helpText = input(...(ngDevMode ? [undefined, { debugName: "helpText" }] : /* istanbul ignore next */ []));
|
|
37
71
|
/**
|
|
38
72
|
* @property {boolean} toggleable
|
|
39
73
|
* @description
|
|
@@ -73,17 +107,16 @@ class PanelComponent {
|
|
|
73
107
|
* @param event - The toggle event from PrimeNG panel
|
|
74
108
|
*/
|
|
75
109
|
handleToggle(event) {
|
|
76
|
-
const newState = event.collapsed ??
|
|
77
|
-
this.collapsed.set(newState);
|
|
110
|
+
const newState = event.collapsed ?? this.collapsed();
|
|
78
111
|
this.toggled.emit({ collapsed: newState });
|
|
79
112
|
}
|
|
80
113
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n class=\"tk-panel\"\n [
|
|
114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n class=\"tk-panel\"\n [toggleable]=\"toggleable()\"\n [(collapsed)]=\"collapsed\"\n (onAfterToggle)=\"handleToggle($event)\">\n\n <ng-template pTemplate=\"header\">\n <div class=\"tk-panel-header-container\">\n @if (header()) {\n <span class=\"p-panel-title\">{{ header() }}</span>\n }\n\n @if (helpText(); as text) {\n <tk-tooltip [content]=\"text\">\n <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n </tk-tooltip>\n }\n\n @if (badge() !== undefined) {\n <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n }\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"headericons\">\n @if (toggleable()) {\n <div class=\"tk-panel-toggle-icon\">\n @if (collapsed()) {\n <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n } @else {\n <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n }\n </div>\n }\n </ng-template>\n\n <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
82
115
|
}
|
|
83
116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelComponent, decorators: [{
|
|
84
117
|
type: Component,
|
|
85
|
-
args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n class=\"tk-panel\"\n [
|
|
86
|
-
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
|
|
118
|
+
args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n class=\"tk-panel\"\n [toggleable]=\"toggleable()\"\n [(collapsed)]=\"collapsed\"\n (onAfterToggle)=\"handleToggle($event)\">\n\n <ng-template pTemplate=\"header\">\n <div class=\"tk-panel-header-container\">\n @if (header()) {\n <span class=\"p-panel-title\">{{ header() }}</span>\n }\n\n @if (helpText(); as text) {\n <tk-tooltip [content]=\"text\">\n <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n </tk-tooltip>\n }\n\n @if (badge() !== undefined) {\n <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n }\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"headericons\">\n @if (toggleable()) {\n <div class=\"tk-panel-toggle-icon\">\n @if (collapsed()) {\n <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n } @else {\n <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n }\n </div>\n }\n </ng-template>\n\n <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header{background:var(--tk-color-background-soft, #f2f1f1);border:none;padding:var(--tk-spacing-paddingY-m, 1rem) var(--tk-spacing-paddingX-m, 1rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .p-panel-title{color:var(--tk-color-text-default, #000000);font-weight:var(--tk-font-weight-600, 600);margin-right:var(--tk-spacing-gap-s, .25rem)}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tk-color-text-default, #000000);width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container .tk-panel-help-icon ::ng-deep svg{width:16px;height:16px}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge{display:flex;align-items:center;justify-content:center}:host ::ng-deep .tk-panel .p-panel-header .tk-panel-header-container tk-badge ::ng-deep .p-badge{width:16px;min-width:16px;height:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-padding-s, .5rem);margin-top:var(--tk-spacing-padding-none, 0rem);border:none!important}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem);color:var(--tk-color-base-surface-500, #8a8a8b)}\n"] }]
|
|
119
|
+
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], helpIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpIcon", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
|
|
87
120
|
|
|
88
121
|
/**
|
|
89
122
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n *\n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel\n * header=\"Panel Title\"\n * [toggleable]=\"true\"\n * [(collapsed)]=\"isCollapsed\">\n * <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n selector: 'tk-panel',\n imports: [PanelModule, IconComponent],\n templateUrl: './panel.component.html',\n styleUrl: './panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n /**\n * @property {string} header\n * @description\n * Header text displayed at the top of the panel.\n *\n * @default undefined\n */\n header = input<string>();\n\n /**\n * @property {boolean} toggleable\n * @description\n * When enabled, the panel content can be expanded and collapsed.\n *\n * @default false\n */\n toggleable = input<boolean>(false);\n\n /**\n * @property {ModelSignal<boolean>} collapsed\n * @description\n * Defines whether the panel is collapsed or expanded.\n * Supports two-way binding via [(collapsed)].\n *\n * @default false\n */\n collapsed = model<boolean>(false);\n\n /**\n * @event toggled\n * @description\n * Callback to invoke when the panel is toggled.\n * Emits an object with the collapsed state.\n *\n * @example\n * ```html\n * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n * ```\n */\n toggled = output<{ collapsed: boolean }>();\n\n /**\n * @method handleToggle\n * @description\n * Handles the toggle event from the PrimeNG panel.\n * Updates the collapsed state and emits the appropriate events.\n *\n * @param event - The toggle event from PrimeNG panel\n */\n handleToggle(event: { collapsed
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { BadgeComponent, BadgeSeverity } from '@tekus/design-system/components/badge';\nimport { TooltipComponent } from '@tekus/design-system/components/tooltip';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n *\n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel\n * header=\"Panel Title\"\n * [toggleable]=\"true\"\n * [(collapsed)]=\"isCollapsed\">\n * <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n selector: 'tk-panel',\n imports: [PanelModule, IconComponent, BadgeComponent, TooltipComponent],\n templateUrl: './panel.component.html',\n styleUrl: './panel.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n /**\n * @property {string} header\n * @description\n * Header text displayed at the top of the panel.\n *\n * @default undefined\n */\n header = input<string>();\n\n /**\n * @property {string | number} badge\n * @description\n * Optional badge value to display in the header.\n *\n * @default undefined\n */\n badge = input<string | number>();\n\n /**\n * @property {BadgeSeverity} badgeSeverity\n * @description\n * Severity of the badge.\n *\n * @default 'danger'\n */\n badgeSeverity = input<BadgeSeverity>('danger');\n\n /**\n * @property {string} helpIcon\n * @description\n * The name of the icon to display for information/help.\n *\n * @default 'circle-question'\n */\n helpIcon = input<string>('circle-question');\n\n /**\n * @property {string} helpText\n * @description\n * Optional help text to display as a tooltip on a help icon in the header.\n *\n * @default undefined\n */\n helpText = input<string>();\n\n /**\n * @property {boolean} toggleable\n * @description\n * When enabled, the panel content can be expanded and collapsed.\n *\n * @default false\n */\n toggleable = input<boolean>(false);\n\n /**\n * @property {ModelSignal<boolean>} collapsed\n * @description\n * Defines whether the panel is collapsed or expanded.\n * Supports two-way binding via [(collapsed)].\n *\n * @default false\n */\n collapsed = model<boolean>(false);\n\n /**\n * @event toggled\n * @description\n * Callback to invoke when the panel is toggled.\n * Emits an object with the collapsed state.\n *\n * @example\n * ```html\n * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n * ```\n */\n toggled = output<{ collapsed: boolean }>();\n\n /**\n * @method handleToggle\n * @description\n * Handles the toggle event from the PrimeNG panel.\n * Updates the collapsed state and emits the appropriate events.\n *\n * @param event - The toggle event from PrimeNG panel\n */\n handleToggle(event: { collapsed?: boolean }): void {\n const newState = event.collapsed ?? this.collapsed();\n this.toggled.emit({ collapsed: newState });\n }\n}\n","<p-panel\n class=\"tk-panel\"\n [toggleable]=\"toggleable()\"\n [(collapsed)]=\"collapsed\"\n (onAfterToggle)=\"handleToggle($event)\">\n\n <ng-template pTemplate=\"header\">\n <div class=\"tk-panel-header-container\">\n @if (header()) {\n <span class=\"p-panel-title\">{{ header() }}</span>\n }\n\n @if (helpText(); as text) {\n <tk-tooltip [content]=\"text\">\n <tk-icon class=\"tk-panel-help-icon\" [icon]=\"helpIcon()\" styleIcon=\"solid\"></tk-icon>\n </tk-tooltip>\n }\n\n @if (badge() !== undefined) {\n <tk-badge [value]=\"badge()!.toString()\" [severity]=\"badgeSeverity()\"></tk-badge>\n }\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"headericons\">\n @if (toggleable()) {\n <div class=\"tk-panel-toggle-icon\">\n @if (collapsed()) {\n <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n } @else {\n <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n }\n </div>\n }\n </ng-template>\n\n <ng-content></ng-content>\n</p-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -197,11 +197,11 @@ class SelectComponent {
|
|
|
197
197
|
return this.ngControl?.control || null;
|
|
198
198
|
}
|
|
199
199
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched) &&\n errorMessage()\n ) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n hint()\n }}</p-message>\n }\n </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-
|
|
200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched) &&\n errorMessage()\n ) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n hint()\n }}</p-message>\n }\n </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
201
201
|
}
|
|
202
202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SelectComponent, decorators: [{
|
|
203
203
|
type: Component,
|
|
204
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched) &&\n errorMessage()\n ) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n hint()\n }}</p-message>\n }\n </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-
|
|
204
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched) &&\n errorMessage()\n ) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n hint()\n }}</p-message>\n }\n </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"] }]
|
|
205
205
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
|
|
206
206
|
|
|
207
207
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n effect,\n model,\n\n input,\n output,\n signal,\n inject\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormsModule,\n NgControl,\n FormControl,\n ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n /**\n * @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n *\n * @default 'select'\n */\n id = input<string>('select');\n\n /**\n * @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the input value.\n * If not provided, an internal FormControl is created.\n */\n control = input<FormControl>();\n\n /**\n * @property {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n */\n options = input<T[]>([]);\n\n /**\n * @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n *\n * @default 'label'\n */\n optionLabel = input<string>('label');\n\n /**\n * @property {string} label\n * @description\n * Floating label displayed above the select input.\n */\n label = input<string>('');\n\n /**\n * @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n *\n * @default true\n */\n showClear = input<boolean>(true);\n\n /**\n * @property {T | null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n *\n * @internal\n */\n value: T | null = null;\n\n /**\n * @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n *\n * @default false\n */\n disabled = input<boolean>(false);\n internalDisabled = signal(false);\n\n /**\n * @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n */\n errorMessage = input<string>('');\n\n /**\n * @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n */\n hint = input<string>('');\n\n /**\n * @property {Signal<T | null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n */\n model = model<T | null>();\n\n /**\n * @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n *\n * @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n */\n modelChange = output<T | null>();\n\n // CVA callbacks\n private onChangeFn: (value: T | null) => void = () => {};\n private onTouchedFn = () => {};\n\n private readonly init = (() => {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n })();\n\n /**\n * @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n */\n private readonly syncDisabled = effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /**\n * @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n */\n private readonly syncModel = effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /**\n * @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n *\n * @param {T | null} value - New value from the forms API.\n */\n writeValue(value: T | null): void {\n this.model.set(value);\n }\n\n /**\n * @method registerOnChange\n * @description\n * Registers a callback that is invoked when the component's value changes.\n */\n registerOnChange(fn: (value: T | null) => void): void {\n this.onChangeFn = fn;\n }\n\n /**\n * @method registerOnTouched\n * @description\n * Registers a callback invoked when the component is touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /**\n * @method setDisabledState\n * @description\n * Updates the disabled state of the select control.\n *\n * @param {boolean} isDisabled - Whether the component should be disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n // -----------------------------------\n // UI EVENTS\n // -----------------------------------\n\n /**\n * @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n *\n * @param event - Event containing the `value` of the selected option.\n */\n handleChange(event: { value: T | null }) {\n const value = event.value ?? null;\n\n this.value = value;\n\n this.onChangeFn(value);\n this.onTouchedFn();\n\n this.model.set(value);\n\n this.modelChange.emit(value);\n\n if (this.effectiveControl) {\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.effectiveControl.markAsTouched();\n }\n }\n get effectiveControl(): FormControl | null {\n return (this.ngControl?.control as FormControl) || null;\n }\n}\n\n","<p-floatlabel class=\"w-full\">\n <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched) &&\n errorMessage()\n ) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n hint()\n }}</p-message>\n }\n </div>\n</div>","/**\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-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n effect,\n model,\n\n input,\n output,\n signal,\n inject\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormsModule,\n NgControl,\n FormControl,\n ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n /**\n * @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n *\n * @default 'select'\n */\n id = input<string>('select');\n\n /**\n * @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the input value.\n * If not provided, an internal FormControl is created.\n */\n control = input<FormControl>();\n\n /**\n * @property {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n */\n options = input<T[]>([]);\n\n /**\n * @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n *\n * @default 'label'\n */\n optionLabel = input<string>('label');\n\n /**\n * @property {string} label\n * @description\n * Floating label displayed above the select input.\n */\n label = input<string>('');\n\n /**\n * @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n *\n * @default true\n */\n showClear = input<boolean>(true);\n\n /**\n * @property {T | null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n *\n * @internal\n */\n value: T | null = null;\n\n /**\n * @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n *\n * @default false\n */\n disabled = input<boolean>(false);\n internalDisabled = signal(false);\n\n /**\n * @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n */\n errorMessage = input<string>('');\n\n /**\n * @property {InputSignal<string>} hint\n * @description\n * Hint text to display below the input.\n */\n hint = input<string>('');\n\n /**\n * @property {Signal<T | null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n */\n model = model<T | null>();\n\n /**\n * @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n *\n * @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n */\n modelChange = output<T | null>();\n\n // CVA callbacks\n private onChangeFn: (value: T | null) => void = () => {};\n private onTouchedFn = () => {};\n\n private readonly init = (() => {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n })();\n\n /**\n * @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n */\n private readonly syncDisabled = effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /**\n * @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n */\n private readonly syncModel = effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /**\n * @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n *\n * @param {T | null} value - New value from the forms API.\n */\n writeValue(value: T | null): void {\n this.model.set(value);\n }\n\n /**\n * @method registerOnChange\n * @description\n * Registers a callback that is invoked when the component's value changes.\n */\n registerOnChange(fn: (value: T | null) => void): void {\n this.onChangeFn = fn;\n }\n\n /**\n * @method registerOnTouched\n * @description\n * Registers a callback invoked when the component is touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /**\n * @method setDisabledState\n * @description\n * Updates the disabled state of the select control.\n *\n * @param {boolean} isDisabled - Whether the component should be disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n // -----------------------------------\n // UI EVENTS\n // -----------------------------------\n\n /**\n * @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n *\n * @param event - Event containing the `value` of the selected option.\n */\n handleChange(event: { value: T | null }) {\n const value = event.value ?? null;\n\n this.value = value;\n\n this.onChangeFn(value);\n this.onTouchedFn();\n\n this.model.set(value);\n\n this.modelChange.emit(value);\n\n if (this.effectiveControl) {\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.effectiveControl.markAsTouched();\n }\n }\n get effectiveControl(): FormControl | null {\n return (this.ngControl?.control as FormControl) || null;\n }\n}\n\n","<p-floatlabel class=\"w-full\">\n <p-select [id]=\"id()\" class=\"w-full\" [options]=\"options()\" [optionLabel]=\"optionLabel()\" [showClear]=\"showClear()\"\n [disabled]=\"disabled()\" [ngModel]=\"value\" [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched)\n \" [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty || effectiveControl?.touched) &&\n errorMessage()\n ) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n hint()\n }}</p-message>\n }\n </div>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Injectable, inject, ChangeDetectorRef, input, output, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { BehaviorSubject, Subscription } from 'rxjs';
|
|
5
|
+
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
6
|
+
import { ButtonComponent } from '@tekus/design-system/components/button';
|
|
7
|
+
|
|
8
|
+
class SidebarService {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.collapsedSubject = new BehaviorSubject(false);
|
|
11
|
+
/**
|
|
12
|
+
* Observable to track the collapsed state of the sidebar.
|
|
13
|
+
*/
|
|
14
|
+
this.isCollapsed$ = this.collapsedSubject.asObservable();
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Toggles the collapsed state of the sidebar.
|
|
18
|
+
*/
|
|
19
|
+
toggle() {
|
|
20
|
+
this.collapsedSubject.next(!this.collapsedSubject.value);
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Explicitly sets the collapsed state of the sidebar.
|
|
24
|
+
* @param value True to collapse, false to expand.
|
|
25
|
+
*/
|
|
26
|
+
setCollapsed(value) {
|
|
27
|
+
this.collapsedSubject.next(value);
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Gets the current collapsed state.
|
|
31
|
+
*/
|
|
32
|
+
get isCollapsed() {
|
|
33
|
+
return this.collapsedSubject.value;
|
|
34
|
+
}
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
36
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
|
|
37
|
+
}
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarService, decorators: [{
|
|
39
|
+
type: Injectable,
|
|
40
|
+
args: [{
|
|
41
|
+
providedIn: 'root',
|
|
42
|
+
}]
|
|
43
|
+
}] });
|
|
44
|
+
|
|
45
|
+
class SidebarLayoutComponent {
|
|
46
|
+
constructor() {
|
|
47
|
+
this.sidebarService = inject(SidebarService);
|
|
48
|
+
this.breakpointObserver = inject(BreakpointObserver);
|
|
49
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
50
|
+
this.subscription = new Subscription();
|
|
51
|
+
/**
|
|
52
|
+
* Breakpoint constants
|
|
53
|
+
*/
|
|
54
|
+
this.TABLET_BREAKPOINT = '(max-width: 1023px)';
|
|
55
|
+
this.MOBILE_BREAKPOINT = '(max-width: 479px)';
|
|
56
|
+
/**
|
|
57
|
+
* Optional manual control of the collapsed state.
|
|
58
|
+
* If provided, it overrides the service state.
|
|
59
|
+
*/
|
|
60
|
+
this.isCollapsed = input(undefined, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
61
|
+
/**
|
|
62
|
+
* Emitted when the collapsed state changes.
|
|
63
|
+
*/
|
|
64
|
+
this.collapsedChange = output();
|
|
65
|
+
/**
|
|
66
|
+
* Internal state of the sidebar.
|
|
67
|
+
*/
|
|
68
|
+
this.collapsed = false;
|
|
69
|
+
/**
|
|
70
|
+
* Responsive states
|
|
71
|
+
*/
|
|
72
|
+
this.isTablet = false;
|
|
73
|
+
this.isMobile = false;
|
|
74
|
+
}
|
|
75
|
+
ngOnInit() {
|
|
76
|
+
// Sync with service
|
|
77
|
+
this.subscription.add(this.sidebarService.isCollapsed$.subscribe((state) => {
|
|
78
|
+
if (this.isCollapsed() === undefined) {
|
|
79
|
+
this.collapsed = state;
|
|
80
|
+
this.collapsedChange.emit(state);
|
|
81
|
+
this.cdr.markForCheck();
|
|
82
|
+
}
|
|
83
|
+
}));
|
|
84
|
+
// Responsive breakpoints
|
|
85
|
+
this.subscription.add(this.breakpointObserver
|
|
86
|
+
.observe([this.TABLET_BREAKPOINT, this.MOBILE_BREAKPOINT])
|
|
87
|
+
.subscribe((result) => {
|
|
88
|
+
const wasTablet = this.isTablet;
|
|
89
|
+
this.isTablet = result.breakpoints[this.TABLET_BREAKPOINT];
|
|
90
|
+
this.isMobile = result.breakpoints[this.MOBILE_BREAKPOINT];
|
|
91
|
+
// Auto-collapse when entering tablet/mobile mode (< 1024px)
|
|
92
|
+
if (this.isTablet && !wasTablet) {
|
|
93
|
+
this.sidebarService.setCollapsed(true);
|
|
94
|
+
}
|
|
95
|
+
// Auto-expand when returning to desktop mode (> 1024px)
|
|
96
|
+
if (!this.isTablet && wasTablet) {
|
|
97
|
+
this.sidebarService.setCollapsed(false);
|
|
98
|
+
}
|
|
99
|
+
this.cdr.markForCheck();
|
|
100
|
+
}));
|
|
101
|
+
}
|
|
102
|
+
ngOnDestroy() {
|
|
103
|
+
this.subscription.unsubscribe();
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Determines if the sidebar is currently collapsed.
|
|
107
|
+
*/
|
|
108
|
+
get displayCollapsed() {
|
|
109
|
+
return this.isCollapsed() === undefined ? this.collapsed : this.isCollapsed();
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Toggles the sidebar state.
|
|
113
|
+
*/
|
|
114
|
+
toggleSidebar() {
|
|
115
|
+
if (this.isCollapsed() === undefined) {
|
|
116
|
+
this.sidebarService.toggle();
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
this.collapsedChange.emit(!this.isCollapsed());
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Closes the sidebar explicitly.
|
|
124
|
+
*/
|
|
125
|
+
closeSidebar() {
|
|
126
|
+
if (this.isCollapsed() === undefined) {
|
|
127
|
+
this.sidebarService.setCollapsed(true);
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
this.collapsedChange.emit(true);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Handles clicks in the sidebar content to auto-close on mobile.
|
|
135
|
+
* Using HostListener to avoid template accessibility linting on non-interactive aside.
|
|
136
|
+
*/
|
|
137
|
+
handleSidebarContentClick(event) {
|
|
138
|
+
if (!this.isMobile)
|
|
139
|
+
return;
|
|
140
|
+
// Check if the click is inside the sidebar
|
|
141
|
+
const sidebar = event.target.closest('.tk-sidebar');
|
|
142
|
+
if (!sidebar)
|
|
143
|
+
return;
|
|
144
|
+
const target = event.target;
|
|
145
|
+
const navItem = target.closest('.tk-menu-item-link, .tk-pm-item-link, a, button');
|
|
146
|
+
if (navItem) {
|
|
147
|
+
// Check if it's a toggle for a sub-menu (has children)
|
|
148
|
+
const hasChildren = navItem.querySelector('.tk-menu-item-chevron, .tk-pm-item-chevron');
|
|
149
|
+
if (!hasChildren) {
|
|
150
|
+
this.closeSidebar();
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Handles backdrop clicks to close the drawer.
|
|
156
|
+
*/
|
|
157
|
+
handleBackdropClick() {
|
|
158
|
+
this.closeSidebar();
|
|
159
|
+
}
|
|
160
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
161
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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 <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", 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-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-nav-header{height:3.5rem;background-color:var(--tk-color-background-default, #ffffff);display:flex;align-items:center;justify-content:space-between;padding:0 var(--tk-spacing-padding-m, 1rem);border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-nav-header .tk-nav-left{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem)}.tk-sidebar-layout .tk-nav-header .tk-logo-header{height:1.75rem;width:auto;margin-left:var(--tk-spacing-padding-s, .5rem)}.tk-sidebar-layout .tk-nav-header .tk-nav-right{display:flex;align-items:center}.tk-sidebar-layout .tk-nav-header .tk-header-actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--tk-spacing-padding-s, .5rem);color:var(--tk-color-primary-default, #16006f);border-radius:50%;transition:background-color .2s}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn:hover{background-color:var(--tk-color-background-soft, #f2f1f1)}.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: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
162
|
+
}
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
|
|
164
|
+
type: Component,
|
|
165
|
+
args: [{ selector: 'tk-sidebar-layout', imports: [
|
|
166
|
+
CommonModule,
|
|
167
|
+
ButtonComponent
|
|
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 <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", 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-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-nav-header{height:3.5rem;background-color:var(--tk-color-background-default, #ffffff);display:flex;align-items:center;justify-content:space-between;padding:0 var(--tk-spacing-padding-m, 1rem);border-bottom:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-sidebar-layout .tk-nav-header .tk-nav-left{display:flex;align-items:center;gap:var(--tk-spacing-gap-m, 1rem)}.tk-sidebar-layout .tk-nav-header .tk-logo-header{height:1.75rem;width:auto;margin-left:var(--tk-spacing-padding-s, .5rem)}.tk-sidebar-layout .tk-nav-header .tk-nav-right{display:flex;align-items:center}.tk-sidebar-layout .tk-nav-header .tk-header-actions{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--tk-spacing-padding-s, .5rem);color:var(--tk-color-primary-default, #16006f);border-radius:50%;transition:background-color .2s}.tk-sidebar-layout .tk-nav-header ::ng-deep .tk-header-action-btn:hover{background-color:var(--tk-color-background-soft, #f2f1f1)}.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"] }]
|
|
169
|
+
}], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], handleSidebarContentClick: [{
|
|
170
|
+
type: HostListener,
|
|
171
|
+
args: ['click', ['$event']]
|
|
172
|
+
}] } });
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Generated bundle index. Do not edit.
|
|
176
|
+
*/
|
|
177
|
+
|
|
178
|
+
export { SidebarLayoutComponent, SidebarService };
|
|
179
|
+
//# sourceMappingURL=tekus-design-system-components-sidebar-layout.mjs.map
|
|
@@ -0,0 +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":";;;;;;;MAMa,cAAc,CAAA;AAH3B,IAAA,WAAA,GAAA;AAImB,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC;AAEvE;;AAEG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE;AAuBpD,IAAA;AArBC;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAC1D;AAEA;;;AAGG;AACH,IAAA,YAAY,CAAC,KAAc,EAAA;AACzB,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;IACnC;AAEA;;AAEG;AACH,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,KAAK;IACpC;8GA5BW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cAFb,MAAM,EAAA,CAAA,CAAA;;2FAEP,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCYY,sBAAsB,CAAA;AAVnC,IAAA,WAAA,GAAA;AAWmB,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AACvC,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAC/C,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE;AAElD;;AAEG;QACc,IAAA,CAAA,iBAAiB,GAAG,qBAAqB;QACzC,IAAA,CAAA,iBAAiB,GAAG,oBAAoB;AAEzD;;;AAGG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAsB,SAAS,kFAAC;AAGnD;;AAEG;QACH,IAAA,CAAA,eAAe,GAAG,MAAM,EAAW;AAEnC;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK;AAEjB;;AAEG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK;QAChB,IAAA,CAAA,QAAQ,GAAG,KAAK;AAqGjB,IAAA;IAnGC,QAAQ,GAAA;;AAEN,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;AACnD,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE;AACpC,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,gBAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;YACzB;QACF,CAAC,CAAC,CACH;;AAGD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,IAAI,CAAC;aACF,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC;AACxD,aAAA,SAAS,CAAC,CAAC,MAAM,KAAI;AACpB,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;YAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC1D,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAG1D,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,EAAE;AAC/B,gBAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC;YACxC;;AAGA,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE;AAC/B,gBAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC;YACzC;AAEA,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QACzB,CAAC,CAAC,CACL;IACH;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;IACjC;AAEA;;AAEG;AACH,IAAA,IAAI,gBAAgB,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,EAAG;IAChF;AAEA;;AAEG;IACH,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE;AACpC,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QAC9B;aAAO;YACL,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QAChD;IACF;AAEA;;AAEG;IACH,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE;AACpC,YAAA,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC;QACxC;aAAO;AACL,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;QACjC;IACF;AAEA;;;AAGG;AAEH,IAAA,yBAAyB,CAAC,KAAiB,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;;QAGpB,MAAM,OAAO,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,aAAa,CAAC;AACpE,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;QAC1C,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,iDAAiD,CAAC;QAEjF,IAAI,OAAO,EAAE;;YAEX,MAAM,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,4CAA4C,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;gBAChB,IAAI,CAAC,YAAY,EAAE;YACrB;QACF;IACF;AAEA;;AAEG;IACH,mBAAmB,GAAA;QACjB,IAAI,CAAC,YAAY,EAAE;IACrB;8GArIW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,mCAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBnC,s0DAqEA,EAAA,MAAA,EAAA,CAAA,g9KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED3DI,YAAY,+BACZ,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAVlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EACpB;wBACP,YAAY;wBACZ;qBACD,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,s0DAAA,EAAA,MAAA,EAAA,CAAA,g9KAAA,CAAA,EAAA;;sBA8G9C,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;;AE7HnC;;AAEG;;;;"}
|