@masterteam/components 0.0.100 → 0.0.102

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.
Files changed (36) hide show
  1. package/assets/common.css +1 -1
  2. package/fesm2022/masterteam-components-client-page-menu.mjs +5 -3
  3. package/fesm2022/masterteam-components-client-page-menu.mjs.map +1 -1
  4. package/fesm2022/masterteam-components-client-page.mjs +116 -12
  5. package/fesm2022/masterteam-components-client-page.mjs.map +1 -1
  6. package/fesm2022/masterteam-components-dialog.mjs +4 -1
  7. package/fesm2022/masterteam-components-dialog.mjs.map +1 -1
  8. package/fesm2022/masterteam-components-dynamic-drawer.mjs.map +1 -1
  9. package/fesm2022/masterteam-components-entities.mjs +2 -2
  10. package/fesm2022/masterteam-components-entities.mjs.map +1 -1
  11. package/fesm2022/masterteam-components-formula.mjs +1 -1
  12. package/fesm2022/masterteam-components-formula.mjs.map +1 -1
  13. package/fesm2022/masterteam-components-modal.mjs +42 -4
  14. package/fesm2022/masterteam-components-modal.mjs.map +1 -1
  15. package/fesm2022/masterteam-components-page-header.mjs +2 -2
  16. package/fesm2022/masterteam-components-page-header.mjs.map +1 -1
  17. package/fesm2022/masterteam-components-sidebar.mjs +63 -4
  18. package/fesm2022/masterteam-components-sidebar.mjs.map +1 -1
  19. package/fesm2022/masterteam-components-table.mjs +2 -2
  20. package/fesm2022/masterteam-components-table.mjs.map +1 -1
  21. package/fesm2022/masterteam-components-tabs.mjs +3 -3
  22. package/fesm2022/masterteam-components-tabs.mjs.map +1 -1
  23. package/fesm2022/masterteam-components-topbar.mjs +50 -4
  24. package/fesm2022/masterteam-components-topbar.mjs.map +1 -1
  25. package/fesm2022/masterteam-components-upload-field.mjs +2 -2
  26. package/fesm2022/masterteam-components-upload-field.mjs.map +1 -1
  27. package/fesm2022/masterteam-components.mjs +6 -0
  28. package/fesm2022/masterteam-components.mjs.map +1 -1
  29. package/package.json +1 -1
  30. package/types/masterteam-components-client-page-menu.d.ts +3 -1
  31. package/types/masterteam-components-client-page.d.ts +39 -5
  32. package/types/masterteam-components-dynamic-drawer.d.ts +4 -1
  33. package/types/masterteam-components-modal.d.ts +10 -2
  34. package/types/masterteam-components-sidebar.d.ts +18 -1
  35. package/types/masterteam-components-topbar.d.ts +17 -1
  36. package/types/masterteam-components.d.ts +6 -0
package/fesm2022/masterteam-components-client-page.mjs CHANGED
@@ -1,12 +1,14 @@
1
+ import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
1
2
  import * as i0 from '@angular/core';
2
- import { input, model, contentChild, output, linkedSignal, computed, effect, signal, Component } from '@angular/core';
3
- import { NgTemplateOutlet } from '@angular/common';
3
+ import { inject, DestroyRef, input, booleanAttribute, model, contentChild, output, linkedSignal, computed, signal, effect, HostListener, Component } from '@angular/core';
4
4
  import { Avatar } from '@masterteam/components/avatar';
5
5
  import { Card } from '@masterteam/components/card';
6
6
  import { ClientPageMenu } from '@masterteam/components/client-page-menu';
7
7
  import { Icon } from '@masterteam/icons';
8
8
 
9
9
  class ClientPage {
10
+ document = inject(DOCUMENT);
11
+ destroyRef = inject(DestroyRef);
10
12
  /** Icon for the left sidebar header */
11
13
  menuIcon = input(...(ngDevMode ? [undefined, { debugName: "menuIcon" }] : []));
12
14
  /** Title for the left sidebar header */
@@ -15,11 +17,19 @@ class ClientPage {
15
17
  menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
16
18
  /** Whether menu items are loading */
17
19
  menuItemsLoading = input(false, ...(ngDevMode ? [{ debugName: "menuItemsLoading" }] : []));
20
+ /** Enables responsive mobile stacking behavior */
21
+ responsive = input(true, { ...(ngDevMode ? { debugName: "responsive" } : {}), transform: booleanAttribute });
22
+ /** On mobile, choose between a drawer or inline stacked layout */
23
+ mobileBehavior = input('drawer', ...(ngDevMode ? [{ debugName: "mobileBehavior" }] : []));
24
+ /** On mobile, choose whether main content or sidebar is shown first */
25
+ mobileStackOrder = input('main-first', ...(ngDevMode ? [{ debugName: "mobileStackOrder" }] : []));
26
+ /** Breakpoint where mobile stacked mode starts */
27
+ mobileBreakpoint = input(1024, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
18
28
  /** Key of the active menu item (defaults to first item) */
19
29
  activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : []));
20
30
  /** Whether the sidebar menu is collapsed (two-way bindable) */
21
31
  collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
22
- /** Template projected into the left sidebar header end */
32
+ /** Template projected into the content header actions area */
23
33
  headerEnd = contentChild('headerClientPageEnd', ...(ngDevMode ? [{ debugName: "headerEnd" }] : []));
24
34
  /** Emitted when a menu item is clicked */
25
35
  menuItemClick = output();
@@ -36,6 +46,29 @@ class ClientPage {
36
46
  }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
37
47
  /** Whether the initial default selection has been emitted */
38
48
  initialEmitted = false;
49
+ /** Whether the mobile drawer menu is open */
50
+ mobileMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileMenuOpen" }] : []));
51
+ /** Whether the page is currently in RTL mode */
52
+ rtl = signal(this.getDirection() === 'rtl', ...(ngDevMode ? [{ debugName: "rtl" }] : []));
53
+ /** Whether the divider/toggle area is being hovered */
54
+ dividerHovered = signal(false, ...(ngDevMode ? [{ debugName: "dividerHovered" }] : []));
55
+ viewportWidth = signal(this.getViewportWidth(), ...(ngDevMode ? [{ debugName: "viewportWidth" }] : []));
56
+ /** Whether page is in a responsive mobile state */
57
+ isMobile = computed(() => this.responsive() && this.viewportWidth() < this.mobileBreakpoint(), ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
58
+ /** Whether the mobile menu should behave as a drawer */
59
+ isMobileDrawer = computed(() => this.isMobile() && this.mobileBehavior() === 'drawer', ...(ngDevMode ? [{ debugName: "isMobileDrawer" }] : []));
60
+ /** Whether the mobile menu should stack with the content */
61
+ isMobileStack = computed(() => this.isMobile() && this.mobileBehavior() === 'stack', ...(ngDevMode ? [{ debugName: "isMobileStack" }] : []));
62
+ /** Whether the sidebar should remain inline in the layout flow */
63
+ showInlineSidebar = computed(() => !this.isMobileDrawer(), ...(ngDevMode ? [{ debugName: "showInlineSidebar" }] : []));
64
+ /** Whether the desktop sidebar should use a compact rail */
65
+ showCompactSidebar = computed(() => this.collapsed() && !this.isMobile(), ...(ngDevMode ? [{ debugName: "showCompactSidebar" }] : []));
66
+ mobileDrawerTransform = computed(() => {
67
+ if (this.mobileMenuOpen()) {
68
+ return 'translateX(0)';
69
+ }
70
+ return this.rtl() ? 'translateX(100%)' : 'translateX(-100%)';
71
+ }, ...(ngDevMode ? [{ debugName: "mobileDrawerTransform" }] : []));
39
72
  constructor() {
40
73
  effect(() => {
41
74
  const item = this.selectedItem();
@@ -44,24 +77,73 @@ class ClientPage {
44
77
  this.menuItemClick.emit(item);
45
78
  }
46
79
  });
80
+ effect(() => {
81
+ if (!this.isMobileDrawer()) {
82
+ this.mobileMenuOpen.set(false);
83
+ }
84
+ });
85
+ const root = this.document?.documentElement;
86
+ if (root && typeof MutationObserver !== 'undefined') {
87
+ const observer = new MutationObserver(() => {
88
+ this.rtl.set(this.getDirection() === 'rtl');
89
+ });
90
+ observer.observe(root, {
91
+ attributes: true,
92
+ attributeFilter: ['dir'],
93
+ });
94
+ this.destroyRef.onDestroy(() => observer.disconnect());
95
+ }
47
96
  }
48
- /** Whether the divider/toggle area is being hovered */
49
- dividerHovered = signal(false, ...(ngDevMode ? [{ debugName: "dividerHovered" }] : []));
50
97
  /** Sidebar width reacts to collapsed + hover */
51
98
  sidebarWidth = computed(() => {
52
- if (this.collapsed()) {
53
- return this.dividerHovered() ? '12px' : '9px';
99
+ if (this.isMobileStack()) {
100
+ return '100%';
54
101
  }
55
- return this.dividerHovered() ? '15.8%' : '16%';
102
+ if (this.showCompactSidebar()) {
103
+ return this.dividerHovered() ? '4.75rem' : '4.25rem';
104
+ }
105
+ return this.dividerHovered() ? '16.5%' : '16%';
56
106
  }, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
107
+ sidebarOrder = computed(() => {
108
+ if (!this.isMobileStack()) {
109
+ return 1;
110
+ }
111
+ return this.mobileStackOrder() === 'main-first' ? 2 : 1;
112
+ }, ...(ngDevMode ? [{ debugName: "sidebarOrder" }] : []));
113
+ contentOrder = computed(() => {
114
+ if (!this.isMobileStack()) {
115
+ return 2;
116
+ }
117
+ return this.mobileStackOrder() === 'main-first' ? 1 : 2;
118
+ }, ...(ngDevMode ? [{ debugName: "contentOrder" }] : []));
57
119
  /** Icon for the collapse toggle button */
58
- toggleIcon = computed(() => this.collapsed() ? 'arrow.chevron-right' : 'arrow.chevron-left', ...(ngDevMode ? [{ debugName: "toggleIcon" }] : []));
120
+ toggleIcon = computed(() => {
121
+ if (this.collapsed()) {
122
+ return this.rtl() ? 'arrow.chevron-left' : 'arrow.chevron-right';
123
+ }
124
+ return this.rtl() ? 'arrow.chevron-right' : 'arrow.chevron-left';
125
+ }, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : []));
59
126
  toggleCollapsed() {
127
+ if (this.isMobile()) {
128
+ return;
129
+ }
60
130
  this.collapsed.update((v) => !v);
61
131
  }
132
+ toggleMobileMenu() {
133
+ if (!this.isMobileDrawer()) {
134
+ return;
135
+ }
136
+ this.mobileMenuOpen.update((v) => !v);
137
+ }
138
+ closeMobileMenu() {
139
+ this.mobileMenuOpen.set(false);
140
+ }
62
141
  selectItem(item) {
63
142
  this.selectedKey.set(item.key);
64
143
  this.menuItemClick.emit(item);
144
+ if (this.isMobileDrawer()) {
145
+ this.closeMobileMenu();
146
+ }
65
147
  }
66
148
  getAvatarStyle(color) {
67
149
  if (color.startsWith('#')) {
@@ -75,15 +157,37 @@ class ClientPage {
75
157
  '--p-avatar-color': `var(--p-${color}-700)`,
76
158
  };
77
159
  }
160
+ onWindowResize() {
161
+ this.viewportWidth.set(this.getViewportWidth());
162
+ }
163
+ onEscapeKey() {
164
+ this.closeMobileMenu();
165
+ }
166
+ getViewportWidth() {
167
+ if (typeof window === 'undefined') {
168
+ return Number.MAX_SAFE_INTEGER;
169
+ }
170
+ return window.innerWidth;
171
+ }
172
+ getDirection() {
173
+ const dir = this.document?.documentElement?.dir?.toLowerCase();
174
+ return dir === 'rtl' ? 'rtl' : 'ltr';
175
+ }
78
176
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
79
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientPage, isStandalone: true, selector: "mt-client-page", inputs: { menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, menuTitle: { classPropertyName: "menuTitle", publicName: "menuTitle", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, menuItemsLoading: { classPropertyName: "menuItemsLoading", publicName: "menuItemsLoading", isSignal: true, isRequired: false, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", menuItemClick: "menuItemClick" }, host: { classAttribute: "block h-full" }, queries: [{ propertyName: "headerEnd", first: true, predicate: ["headerClientPageEnd"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-card class=\"bg-gray-200 w-full h-full\">\r\n <ng-template #headless>\r\n <div class=\"flex h-full min-h-0\">\r\n <!-- Left Sidebar -->\r\n <div\r\n class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n [style.width]=\"sidebarWidth()\"\r\n >\r\n <!-- Sidebar Header -->\r\n <div\r\n class=\"flex shrink-0 items-center justify-between overflow-hidden border-b border-gray-300 px-5 py-4 whitespace-nowrap\"\r\n >\r\n <div class=\"flex gap-2 items-center\">\r\n @if (menuIcon()) {\r\n <div class=\"text-lg shrink-0\">\r\n <mt-icon [icon]=\"menuIcon()!\" />\r\n </div>\r\n }\r\n @if (menuTitle()) {\r\n <div class=\"font-semibold\">{{ menuTitle() }}</div>\r\n }\r\n </div>\r\n </div>\r\n @if (!collapsed()) {\r\n <!-- Menu Items -->\r\n <mt-client-page-menu\r\n [menuItems]=\"menuItems()\"\r\n [selectedItem]=\"selectedItem()\"\r\n [loading]=\"menuItemsLoading()\"\r\n (menuItemClick)=\"selectItem($event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <!-- Vertical Divider with Toggle Button -->\r\n <div\r\n class=\"relative flex-shrink-0 w-px\"\r\n (mouseenter)=\"dividerHovered.set(true)\"\r\n (mouseleave)=\"dividerHovered.set(false)\"\r\n >\r\n <!-- Toggle Button at bottom of divider -->\r\n <button\r\n type=\"button\"\r\n (click)=\"toggleCollapsed()\"\r\n class=\"absolute bottom-6 -translate-x-1/2 left-1/2 z-10 flex items-center justify-center w-6 h-6 rounded-full bg-white border border-gray-300 shadow-sm hover:shadow-md hover:scale-125 hover:bg-gray-50 active:scale-95 active:bg-gray-100 transition-all duration-200 ease-in-out cursor-pointer group\"\r\n [attr.aria-label]=\"\r\n collapsed() ? 'Expand sidebar' : 'Collapse sidebar'\r\n \"\r\n >\r\n <mt-icon\r\n [icon]=\"toggleIcon()\"\r\n class=\"text-gray-500 group-hover:text-primary-600 text-xs transition-all duration-200 group-hover:animate-pulse\"\r\n />\r\n </button>\r\n </div>\r\n\r\n <!-- Right Content Panel -->\r\n <div class=\"flex min-h-0 min-w-0 flex-1 flex-col\">\r\n <mt-card class=\"h-full min-h-0\">\r\n <ng-template #headless>\r\n <!-- Content Header -->\r\n <div\r\n class=\"flex shrink-0 items-center justify-between border-b border-surface px-5 py-4\"\r\n >\r\n <div class=\"flex gap-2 items-center\">\r\n @if (selectedItem(); as selected) {\r\n <mt-avatar\r\n [style]=\"getAvatarStyle(selected.color)\"\r\n [icon]=\"selected.icon\"\r\n shape=\"square\"\r\n size=\"large\"\r\n />\r\n <div>\r\n <div class=\"text-md font-semibold\">\r\n {{ selected.title }}\r\n </div>\r\n @if (selected.subtitle) {\r\n <div class=\"text-sm text-gray-500 font-semibold\">\r\n {{ selected.subtitle }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if (headerEnd(); as template) {\r\n <div class=\"flex gap-2\">\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Content Body -->\r\n <div class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\">\n <ng-content />\n </div>\n </ng-template>\r\n </mt-card>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</mt-card>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: ClientPageMenu, selector: "mt-client-page-menu", inputs: ["menuItems", "loading", "selectedItem"], outputs: ["menuItemClick"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
177
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientPage, isStandalone: true, selector: "mt-client-page", inputs: { menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, menuTitle: { classPropertyName: "menuTitle", publicName: "menuTitle", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, menuItemsLoading: { classPropertyName: "menuItemsLoading", publicName: "menuItemsLoading", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, mobileBehavior: { classPropertyName: "mobileBehavior", publicName: "mobileBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobileStackOrder: { classPropertyName: "mobileStackOrder", publicName: "mobileStackOrder", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", menuItemClick: "menuItemClick" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown.escape": "onEscapeKey()" }, classAttribute: "block h-full" }, queries: [{ propertyName: "headerEnd", first: true, predicate: ["headerClientPageEnd"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-card class=\"bg-gray-200 w-full h-full\">\r\n <ng-template #headless>\r\n <ng-template\r\n #sidebarContent\r\n let-compact=\"compact\"\r\n let-mobileDrawer=\"mobileDrawer\"\r\n >\r\n <div class=\"flex h-full min-h-0 flex-col overflow-hidden\">\r\n <div\r\n class=\"flex shrink-0 items-center border-b border-gray-300 px-5 py-4\"\r\n [class.justify-center]=\"compact && !mobileDrawer\"\r\n [class.justify-between]=\"!compact || mobileDrawer\"\r\n >\r\n <div\r\n class=\"flex min-w-0 items-center gap-2\"\r\n [class.flex-1]=\"mobileDrawer\"\r\n >\r\n @if (menuIcon()) {\r\n <div class=\"text-lg shrink-0\">\r\n <mt-icon [icon]=\"menuIcon()!\" />\r\n </div>\r\n }\r\n @if (menuTitle()) {\r\n <div\r\n class=\"min-w-0 overflow-hidden transition-all duration-300 ease-in-out\"\r\n [class.max-w-0]=\"compact && !mobileDrawer\"\r\n [class.opacity-0]=\"compact && !mobileDrawer\"\r\n [class.max-w-xs]=\"!compact || mobileDrawer\"\r\n [class.opacity-100]=\"!compact || mobileDrawer\"\r\n >\r\n <div class=\"truncate font-semibold\">{{ menuTitle() }}</div>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (mobileDrawer) {\r\n <button\r\n type=\"button\"\r\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-surface-100 cursor-pointer\"\r\n aria-label=\"Close navigation\"\r\n (click)=\"closeMobileMenu()\"\r\n >\r\n <mt-icon icon=\"general.x-close\" class=\"text-lg\" />\r\n </button>\r\n }\r\n </div>\r\n\r\n <mt-client-page-menu\r\n [menuItems]=\"menuItems()\"\r\n [selectedItem]=\"selectedItem()\"\r\n [loading]=\"menuItemsLoading()\"\r\n [compact]=\"compact && !mobileDrawer\"\r\n (menuItemClick)=\"selectItem($event)\"\r\n />\r\n </div>\r\n </ng-template>\r\n\r\n <div\r\n class=\"relative flex h-full min-h-0\"\r\n [class.flex-col]=\"isMobileStack()\"\r\n [class.flex-row]=\"!isMobileStack()\"\r\n >\r\n @if (showInlineSidebar()) {\r\n <div\r\n class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n [class.w-full]=\"isMobileStack()\"\r\n [style.width]=\"isMobileStack() ? null : sidebarWidth()\"\r\n [style.order]=\"sidebarOrder()\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"sidebarContent\"\r\n [ngTemplateOutletContext]=\"{\r\n compact: showCompactSidebar(),\r\n mobileDrawer: false,\r\n }\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (!isMobile()) {\r\n <div\r\n class=\"relative flex-shrink-0 w-px\"\r\n [style.order]=\"sidebarOrder()\"\r\n (mouseenter)=\"dividerHovered.set(true)\"\r\n (mouseleave)=\"dividerHovered.set(false)\"\r\n >\r\n <button\r\n type=\"button\"\r\n (click)=\"toggleCollapsed()\"\r\n class=\"absolute bottom-6 -translate-x-1/2 left-1/2 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 cursor-pointer group\"\r\n [attr.aria-label]=\"\r\n collapsed() ? 'Expand sidebar' : 'Collapse sidebar'\r\n \"\r\n >\r\n <mt-icon\r\n [icon]=\"toggleIcon()\"\r\n class=\"text-xs text-gray-500 transition-all duration-200 group-hover:text-primary-600 group-hover:animate-pulse\"\r\n />\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex min-h-0 min-w-0 flex-1 flex-col\"\r\n [style.order]=\"contentOrder()\"\r\n >\r\n <mt-card class=\"h-full min-h-0\">\r\n <ng-template #headless>\r\n <div\r\n class=\"flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface px-5 py-4\"\r\n >\r\n <div class=\"flex min-w-0 items-center gap-2\">\r\n @if (isMobileDrawer()) {\r\n <button\r\n type=\"button\"\r\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-surface-100 cursor-pointer\"\r\n aria-label=\"Open navigation\"\r\n (click)=\"toggleMobileMenu()\"\r\n >\r\n <mt-icon icon=\"general.menu-01\" class=\"text-lg\" />\r\n </button>\r\n }\r\n\r\n @if (selectedItem(); as selected) {\r\n <mt-avatar\r\n [style]=\"getAvatarStyle(selected.color)\"\r\n [icon]=\"selected.icon\"\r\n shape=\"square\"\r\n size=\"large\"\r\n />\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-md font-semibold\">\r\n {{ selected.title }}\r\n </div>\r\n @if (selected.subtitle) {\r\n <div class=\"truncate text-sm text-gray-500 font-semibold\">\r\n {{ selected.subtitle }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if (headerEnd(); as template) {\r\n <div\r\n class=\"flex max-w-full min-w-0 flex-wrap items-center gap-2\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n >\r\n <ng-content />\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n </div>\r\n </div>\r\n\r\n @if (isMobileDrawer()) {\r\n @if (mobileMenuOpen()) {\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close navigation\"\r\n class=\"fixed inset-0 z-40 bg-black/35\"\r\n (click)=\"closeMobileMenu()\"\r\n ></button>\r\n }\r\n\r\n <div\r\n class=\"fixed inset-y-0 z-50 w-[min(20rem,calc(100vw-1rem))] max-w-[20rem] transition-transform duration-300 ease-in-out\"\r\n [class.start-0]=\"isMobileDrawer()\"\r\n [class.pointer-events-none]=\"!mobileMenuOpen()\"\r\n [style.transform]=\"mobileDrawerTransform()\"\r\n >\r\n <mt-card class=\"h-full min-h-0 rounded-none shadow-2xl\">\r\n <ng-template #headless>\r\n <div class=\"h-full min-h-0 bg-surface-0\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"sidebarContent\"\r\n [ngTemplateOutletContext]=\"{\r\n compact: false,\r\n mobileDrawer: true,\r\n }\"\r\n />\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n </div>\r\n }\r\n </ng-template>\r\n</mt-card>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: ClientPageMenu, selector: "mt-client-page-menu", inputs: ["menuItems", "loading", "compact", "selectedItem"], outputs: ["menuItemClick"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
80
178
  }
81
179
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPage, decorators: [{
82
180
  type: Component,
83
181
  args: [{ selector: 'mt-client-page', standalone: true, imports: [Avatar, Card, ClientPageMenu, Icon, NgTemplateOutlet], host: {
84
182
  class: 'block h-full',
85
- }, template: "<mt-card class=\"bg-gray-200 w-full h-full\">\r\n <ng-template #headless>\r\n <div class=\"flex h-full min-h-0\">\r\n <!-- Left Sidebar -->\r\n <div\r\n class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n [style.width]=\"sidebarWidth()\"\r\n >\r\n <!-- Sidebar Header -->\r\n <div\r\n class=\"flex shrink-0 items-center justify-between overflow-hidden border-b border-gray-300 px-5 py-4 whitespace-nowrap\"\r\n >\r\n <div class=\"flex gap-2 items-center\">\r\n @if (menuIcon()) {\r\n <div class=\"text-lg shrink-0\">\r\n <mt-icon [icon]=\"menuIcon()!\" />\r\n </div>\r\n }\r\n @if (menuTitle()) {\r\n <div class=\"font-semibold\">{{ menuTitle() }}</div>\r\n }\r\n </div>\r\n </div>\r\n @if (!collapsed()) {\r\n <!-- Menu Items -->\r\n <mt-client-page-menu\r\n [menuItems]=\"menuItems()\"\r\n [selectedItem]=\"selectedItem()\"\r\n [loading]=\"menuItemsLoading()\"\r\n (menuItemClick)=\"selectItem($event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <!-- Vertical Divider with Toggle Button -->\r\n <div\r\n class=\"relative flex-shrink-0 w-px\"\r\n (mouseenter)=\"dividerHovered.set(true)\"\r\n (mouseleave)=\"dividerHovered.set(false)\"\r\n >\r\n <!-- Toggle Button at bottom of divider -->\r\n <button\r\n type=\"button\"\r\n (click)=\"toggleCollapsed()\"\r\n class=\"absolute bottom-6 -translate-x-1/2 left-1/2 z-10 flex items-center justify-center w-6 h-6 rounded-full bg-white border border-gray-300 shadow-sm hover:shadow-md hover:scale-125 hover:bg-gray-50 active:scale-95 active:bg-gray-100 transition-all duration-200 ease-in-out cursor-pointer group\"\r\n [attr.aria-label]=\"\r\n collapsed() ? 'Expand sidebar' : 'Collapse sidebar'\r\n \"\r\n >\r\n <mt-icon\r\n [icon]=\"toggleIcon()\"\r\n class=\"text-gray-500 group-hover:text-primary-600 text-xs transition-all duration-200 group-hover:animate-pulse\"\r\n />\r\n </button>\r\n </div>\r\n\r\n <!-- Right Content Panel -->\r\n <div class=\"flex min-h-0 min-w-0 flex-1 flex-col\">\r\n <mt-card class=\"h-full min-h-0\">\r\n <ng-template #headless>\r\n <!-- Content Header -->\r\n <div\r\n class=\"flex shrink-0 items-center justify-between border-b border-surface px-5 py-4\"\r\n >\r\n <div class=\"flex gap-2 items-center\">\r\n @if (selectedItem(); as selected) {\r\n <mt-avatar\r\n [style]=\"getAvatarStyle(selected.color)\"\r\n [icon]=\"selected.icon\"\r\n shape=\"square\"\r\n size=\"large\"\r\n />\r\n <div>\r\n <div class=\"text-md font-semibold\">\r\n {{ selected.title }}\r\n </div>\r\n @if (selected.subtitle) {\r\n <div class=\"text-sm text-gray-500 font-semibold\">\r\n {{ selected.subtitle }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if (headerEnd(); as template) {\r\n <div class=\"flex gap-2\">\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Content Body -->\r\n <div class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\">\n <ng-content />\n </div>\n </ng-template>\r\n </mt-card>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</mt-card>\r\n" }]
86
- }], ctorParameters: () => [], propDecorators: { menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], menuTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTitle", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], menuItemsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItemsLoading", required: false }] }], activeItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItem", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], headerEnd: [{ type: i0.ContentChild, args: ['headerClientPageEnd', { isSignal: true }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }] } });
183
+ }, template: "<mt-card class=\"bg-gray-200 w-full h-full\">\r\n <ng-template #headless>\r\n <ng-template\r\n #sidebarContent\r\n let-compact=\"compact\"\r\n let-mobileDrawer=\"mobileDrawer\"\r\n >\r\n <div class=\"flex h-full min-h-0 flex-col overflow-hidden\">\r\n <div\r\n class=\"flex shrink-0 items-center border-b border-gray-300 px-5 py-4\"\r\n [class.justify-center]=\"compact && !mobileDrawer\"\r\n [class.justify-between]=\"!compact || mobileDrawer\"\r\n >\r\n <div\r\n class=\"flex min-w-0 items-center gap-2\"\r\n [class.flex-1]=\"mobileDrawer\"\r\n >\r\n @if (menuIcon()) {\r\n <div class=\"text-lg shrink-0\">\r\n <mt-icon [icon]=\"menuIcon()!\" />\r\n </div>\r\n }\r\n @if (menuTitle()) {\r\n <div\r\n class=\"min-w-0 overflow-hidden transition-all duration-300 ease-in-out\"\r\n [class.max-w-0]=\"compact && !mobileDrawer\"\r\n [class.opacity-0]=\"compact && !mobileDrawer\"\r\n [class.max-w-xs]=\"!compact || mobileDrawer\"\r\n [class.opacity-100]=\"!compact || mobileDrawer\"\r\n >\r\n <div class=\"truncate font-semibold\">{{ menuTitle() }}</div>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (mobileDrawer) {\r\n <button\r\n type=\"button\"\r\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-surface-100 cursor-pointer\"\r\n aria-label=\"Close navigation\"\r\n (click)=\"closeMobileMenu()\"\r\n >\r\n <mt-icon icon=\"general.x-close\" class=\"text-lg\" />\r\n </button>\r\n }\r\n </div>\r\n\r\n <mt-client-page-menu\r\n [menuItems]=\"menuItems()\"\r\n [selectedItem]=\"selectedItem()\"\r\n [loading]=\"menuItemsLoading()\"\r\n [compact]=\"compact && !mobileDrawer\"\r\n (menuItemClick)=\"selectItem($event)\"\r\n />\r\n </div>\r\n </ng-template>\r\n\r\n <div\r\n class=\"relative flex h-full min-h-0\"\r\n [class.flex-col]=\"isMobileStack()\"\r\n [class.flex-row]=\"!isMobileStack()\"\r\n >\r\n @if (showInlineSidebar()) {\r\n <div\r\n class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n [class.w-full]=\"isMobileStack()\"\r\n [style.width]=\"isMobileStack() ? null : sidebarWidth()\"\r\n [style.order]=\"sidebarOrder()\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"sidebarContent\"\r\n [ngTemplateOutletContext]=\"{\r\n compact: showCompactSidebar(),\r\n mobileDrawer: false,\r\n }\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (!isMobile()) {\r\n <div\r\n class=\"relative flex-shrink-0 w-px\"\r\n [style.order]=\"sidebarOrder()\"\r\n (mouseenter)=\"dividerHovered.set(true)\"\r\n (mouseleave)=\"dividerHovered.set(false)\"\r\n >\r\n <button\r\n type=\"button\"\r\n (click)=\"toggleCollapsed()\"\r\n class=\"absolute bottom-6 -translate-x-1/2 left-1/2 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 cursor-pointer group\"\r\n [attr.aria-label]=\"\r\n collapsed() ? 'Expand sidebar' : 'Collapse sidebar'\r\n \"\r\n >\r\n <mt-icon\r\n [icon]=\"toggleIcon()\"\r\n class=\"text-xs text-gray-500 transition-all duration-200 group-hover:text-primary-600 group-hover:animate-pulse\"\r\n />\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex min-h-0 min-w-0 flex-1 flex-col\"\r\n [style.order]=\"contentOrder()\"\r\n >\r\n <mt-card class=\"h-full min-h-0\">\r\n <ng-template #headless>\r\n <div\r\n class=\"flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface px-5 py-4\"\r\n >\r\n <div class=\"flex min-w-0 items-center gap-2\">\r\n @if (isMobileDrawer()) {\r\n <button\r\n type=\"button\"\r\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-surface-100 cursor-pointer\"\r\n aria-label=\"Open navigation\"\r\n (click)=\"toggleMobileMenu()\"\r\n >\r\n <mt-icon icon=\"general.menu-01\" class=\"text-lg\" />\r\n </button>\r\n }\r\n\r\n @if (selectedItem(); as selected) {\r\n <mt-avatar\r\n [style]=\"getAvatarStyle(selected.color)\"\r\n [icon]=\"selected.icon\"\r\n shape=\"square\"\r\n size=\"large\"\r\n />\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-md font-semibold\">\r\n {{ selected.title }}\r\n </div>\r\n @if (selected.subtitle) {\r\n <div class=\"truncate text-sm text-gray-500 font-semibold\">\r\n {{ selected.subtitle }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if (headerEnd(); as template) {\r\n <div\r\n class=\"flex max-w-full min-w-0 flex-wrap items-center gap-2\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n >\r\n <ng-content />\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n </div>\r\n </div>\r\n\r\n @if (isMobileDrawer()) {\r\n @if (mobileMenuOpen()) {\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close navigation\"\r\n class=\"fixed inset-0 z-40 bg-black/35\"\r\n (click)=\"closeMobileMenu()\"\r\n ></button>\r\n }\r\n\r\n <div\r\n class=\"fixed inset-y-0 z-50 w-[min(20rem,calc(100vw-1rem))] max-w-[20rem] transition-transform duration-300 ease-in-out\"\r\n [class.start-0]=\"isMobileDrawer()\"\r\n [class.pointer-events-none]=\"!mobileMenuOpen()\"\r\n [style.transform]=\"mobileDrawerTransform()\"\r\n >\r\n <mt-card class=\"h-full min-h-0 rounded-none shadow-2xl\">\r\n <ng-template #headless>\r\n <div class=\"h-full min-h-0 bg-surface-0\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"sidebarContent\"\r\n [ngTemplateOutletContext]=\"{\r\n compact: false,\r\n mobileDrawer: true,\r\n }\"\r\n />\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n </div>\r\n }\r\n </ng-template>\r\n</mt-card>\r\n" }]
184
+ }], ctorParameters: () => [], propDecorators: { menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], menuTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTitle", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], menuItemsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItemsLoading", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], mobileBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBehavior", required: false }] }], mobileStackOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileStackOrder", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], activeItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItem", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], headerEnd: [{ type: i0.ContentChild, args: ['headerClientPageEnd', { isSignal: true }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], onWindowResize: [{
185
+ type: HostListener,
186
+ args: ['window:resize']
187
+ }], onEscapeKey: [{
188
+ type: HostListener,
189
+ args: ['window:keydown.escape']
190
+ }] } });
87
191
 
88
192
  /**
89
193
  * Generated bundle index. Do not edit.
package/fesm2022/masterteam-components-client-page.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-client-page.mjs","sources":["../../../../packages/masterteam/components/client-page/client-page.ts","../../../../packages/masterteam/components/client-page/client-page.html","../../../../packages/masterteam/components/client-page/masterteam-components-client-page.ts"],"sourcesContent":["import {\r\n Component,\r\n contentChild,\r\n computed,\r\n effect,\r\n input,\r\n linkedSignal,\r\n model,\r\n output,\r\n signal,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { Card } from '@masterteam/components/card';\r\nimport {\r\n ClientPageMenu,\r\n ClientPageMenuItem,\r\n} from '@masterteam/components/client-page-menu';\r\nimport { Icon } from '@masterteam/icons';\r\n\r\n@Component({\r\n selector: 'mt-client-page',\r\n standalone: true,\r\n imports: [Avatar, Card, ClientPageMenu, Icon, NgTemplateOutlet],\r\n templateUrl: './client-page.html',\r\n host: {\r\n class: 'block h-full',\r\n },\r\n})\r\nexport class ClientPage {\r\n /** Icon for the left sidebar header */\r\n readonly menuIcon = input<string>();\r\n\r\n /** Title for the left sidebar header */\r\n readonly menuTitle = input<string>();\r\n\r\n /** List of menu items for the left sidebar */\r\n readonly menuItems = input<ClientPageMenuItem[]>([]);\r\n\r\n /** Whether menu items are loading */\r\n readonly menuItemsLoading = input<boolean>(false);\r\n\r\n /** Key of the active menu item (defaults to first item) */\r\n readonly activeItem = input<string>();\r\n\r\n /** Whether the sidebar menu is collapsed (two-way bindable) */\r\n readonly collapsed = model<boolean>(false);\r\n\r\n /** Template projected into the left sidebar header end */\r\n readonly headerEnd = contentChild<TemplateRef<any>>('headerClientPageEnd');\r\n\r\n /** Emitted when a menu item is clicked */\r\n readonly menuItemClick = output<ClientPageMenuItem>();\r\n\r\n /** Tracks activeItem input, overridable by user clicks */\r\n private readonly selectedKey = linkedSignal(() => this.activeItem());\r\n\r\n /** Currently selected menu item */\r\n readonly selectedItem = computed(() => {\r\n const key = this.selectedKey();\r\n const items = this.menuItems();\r\n if (key) {\r\n return items.find((item) => item.key === key) ?? items[0] ?? null;\r\n }\r\n return items[0] ?? null;\r\n });\r\n\r\n /** Whether the initial default selection has been emitted */\r\n private initialEmitted = false;\r\n\r\n constructor() {\r\n effect(() => {\r\n const item = this.selectedItem();\r\n if (item && !this.initialEmitted) {\r\n this.initialEmitted = true;\r\n this.menuItemClick.emit(item);\r\n }\r\n });\r\n }\r\n\r\n /** Whether the divider/toggle area is being hovered */\r\n readonly dividerHovered = signal(false);\r\n\r\n /** Sidebar width reacts to collapsed + hover */\r\n readonly sidebarWidth = computed(() => {\r\n if (this.collapsed()) {\r\n return this.dividerHovered() ? '12px' : '9px';\r\n }\r\n return this.dividerHovered() ? '15.8%' : '16%';\r\n });\r\n\r\n /** Icon for the collapse toggle button */\r\n readonly toggleIcon = computed(() =>\r\n this.collapsed() ? 'arrow.chevron-right' : 'arrow.chevron-left',\r\n );\r\n\r\n toggleCollapsed(): void {\r\n this.collapsed.update((v) => !v);\r\n }\r\n\r\n selectItem(item: ClientPageMenuItem): void {\r\n this.selectedKey.set(item.key);\r\n this.menuItemClick.emit(item);\r\n }\r\n\r\n getAvatarStyle(color: string): Record<string, string> {\r\n if (color.startsWith('#')) {\r\n return {\r\n '--p-avatar-background': color + '1a',\r\n '--p-avatar-color': color,\r\n };\r\n }\r\n return {\r\n '--p-avatar-background': `var(--p-${color}-100)`,\r\n '--p-avatar-color': `var(--p-${color}-700)`,\r\n };\r\n }\r\n}\r\n","<mt-card class=\"bg-gray-200 w-full h-full\">\r\n <ng-template #headless>\r\n <div class=\"flex h-full min-h-0\">\r\n <!-- Left Sidebar -->\r\n <div\r\n class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n [style.width]=\"sidebarWidth()\"\r\n >\r\n <!-- Sidebar Header -->\r\n <div\r\n class=\"flex shrink-0 items-center justify-between overflow-hidden border-b border-gray-300 px-5 py-4 whitespace-nowrap\"\r\n >\r\n <div class=\"flex gap-2 items-center\">\r\n @if (menuIcon()) {\r\n <div class=\"text-lg shrink-0\">\r\n <mt-icon [icon]=\"menuIcon()!\" />\r\n </div>\r\n }\r\n @if (menuTitle()) {\r\n <div class=\"font-semibold\">{{ menuTitle() }}</div>\r\n }\r\n </div>\r\n </div>\r\n @if (!collapsed()) {\r\n <!-- Menu Items -->\r\n <mt-client-page-menu\r\n [menuItems]=\"menuItems()\"\r\n [selectedItem]=\"selectedItem()\"\r\n [loading]=\"menuItemsLoading()\"\r\n (menuItemClick)=\"selectItem($event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <!-- Vertical Divider with Toggle Button -->\r\n <div\r\n class=\"relative flex-shrink-0 w-px\"\r\n (mouseenter)=\"dividerHovered.set(true)\"\r\n (mouseleave)=\"dividerHovered.set(false)\"\r\n >\r\n <!-- Toggle Button at bottom of divider -->\r\n <button\r\n type=\"button\"\r\n (click)=\"toggleCollapsed()\"\r\n class=\"absolute bottom-6 -translate-x-1/2 left-1/2 z-10 flex items-center justify-center w-6 h-6 rounded-full bg-white border border-gray-300 shadow-sm hover:shadow-md hover:scale-125 hover:bg-gray-50 active:scale-95 active:bg-gray-100 transition-all duration-200 ease-in-out cursor-pointer group\"\r\n [attr.aria-label]=\"\r\n collapsed() ? 'Expand sidebar' : 'Collapse sidebar'\r\n \"\r\n >\r\n <mt-icon\r\n [icon]=\"toggleIcon()\"\r\n class=\"text-gray-500 group-hover:text-primary-600 text-xs transition-all duration-200 group-hover:animate-pulse\"\r\n />\r\n </button>\r\n </div>\r\n\r\n <!-- Right Content Panel -->\r\n <div class=\"flex min-h-0 min-w-0 flex-1 flex-col\">\r\n <mt-card class=\"h-full min-h-0\">\r\n <ng-template #headless>\r\n <!-- Content Header -->\r\n <div\r\n class=\"flex shrink-0 items-center justify-between border-b border-surface px-5 py-4\"\r\n >\r\n <div class=\"flex gap-2 items-center\">\r\n @if (selectedItem(); as selected) {\r\n <mt-avatar\r\n [style]=\"getAvatarStyle(selected.color)\"\r\n [icon]=\"selected.icon\"\r\n shape=\"square\"\r\n size=\"large\"\r\n />\r\n <div>\r\n <div class=\"text-md font-semibold\">\r\n {{ selected.title }}\r\n </div>\r\n @if (selected.subtitle) {\r\n <div class=\"text-sm text-gray-500 font-semibold\">\r\n {{ selected.subtitle }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if (headerEnd(); as template) {\r\n <div class=\"flex gap-2\">\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Content Body -->\r\n <div class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\">\n <ng-content />\n </div>\n </ng-template>\r\n </mt-card>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</mt-card>\r\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":"masterteam-components-client-page.mjs","sources":["../../../../packages/masterteam/components/client-page/client-page.ts","../../../../packages/masterteam/components/client-page/client-page.html","../../../../packages/masterteam/components/client-page/masterteam-components-client-page.ts"],"sourcesContent":["import { DOCUMENT, NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n DestroyRef,\r\n HostListener,\r\n booleanAttribute,\r\n Component,\r\n contentChild,\r\n computed,\r\n effect,\r\n inject,\r\n input,\r\n linkedSignal,\r\n model,\r\n output,\r\n signal,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { Card } from '@masterteam/components/card';\r\nimport {\r\n ClientPageMenu,\r\n ClientPageMenuItem,\r\n} from '@masterteam/components/client-page-menu';\r\nimport { Icon } from '@masterteam/icons';\r\n\r\n@Component({\r\n selector: 'mt-client-page',\r\n standalone: true,\r\n imports: [Avatar, Card, ClientPageMenu, Icon, NgTemplateOutlet],\r\n templateUrl: './client-page.html',\r\n host: {\r\n class: 'block h-full',\r\n },\r\n})\r\nexport class ClientPage {\r\n private readonly document = inject(DOCUMENT);\r\n private readonly destroyRef = inject(DestroyRef);\r\n\r\n /** Icon for the left sidebar header */\r\n readonly menuIcon = input<string>();\r\n\r\n /** Title for the left sidebar header */\r\n readonly menuTitle = input<string>();\r\n\r\n /** List of menu items for the left sidebar */\r\n readonly menuItems = input<ClientPageMenuItem[]>([]);\r\n\r\n /** Whether menu items are loading */\r\n readonly menuItemsLoading = input<boolean>(false);\r\n\r\n /** Enables responsive mobile stacking behavior */\r\n readonly responsive = input<boolean, unknown>(true, {\r\n transform: booleanAttribute,\r\n });\r\n\r\n /** On mobile, choose between a drawer or inline stacked layout */\r\n readonly mobileBehavior = input<'drawer' | 'stack'>('drawer');\r\n\r\n /** On mobile, choose whether main content or sidebar is shown first */\r\n readonly mobileStackOrder = input<'main-first' | 'side-first'>('main-first');\r\n\r\n /** Breakpoint where mobile stacked mode starts */\r\n readonly mobileBreakpoint = input<number>(1024);\r\n\r\n /** Key of the active menu item (defaults to first item) */\r\n readonly activeItem = input<string>();\r\n\r\n /** Whether the sidebar menu is collapsed (two-way bindable) */\r\n readonly collapsed = model<boolean>(false);\r\n\r\n /** Template projected into the content header actions area */\r\n readonly headerEnd = contentChild<TemplateRef<any>>('headerClientPageEnd');\r\n\r\n /** Emitted when a menu item is clicked */\r\n readonly menuItemClick = output<ClientPageMenuItem>();\r\n\r\n /** Tracks activeItem input, overridable by user clicks */\r\n private readonly selectedKey = linkedSignal(() => this.activeItem());\r\n\r\n /** Currently selected menu item */\r\n readonly selectedItem = computed(() => {\r\n const key = this.selectedKey();\r\n const items = this.menuItems();\r\n if (key) {\r\n return items.find((item) => item.key === key) ?? items[0] ?? null;\r\n }\r\n return items[0] ?? null;\r\n });\r\n\r\n /** Whether the initial default selection has been emitted */\r\n private initialEmitted = false;\r\n\r\n /** Whether the mobile drawer menu is open */\r\n readonly mobileMenuOpen = signal(false);\r\n\r\n /** Whether the page is currently in RTL mode */\r\n readonly rtl = signal(this.getDirection() === 'rtl');\r\n\r\n /** Whether the divider/toggle area is being hovered */\r\n readonly dividerHovered = signal(false);\r\n private readonly viewportWidth = signal(this.getViewportWidth());\r\n\r\n /** Whether page is in a responsive mobile state */\r\n readonly isMobile = computed(\r\n () => this.responsive() && this.viewportWidth() < this.mobileBreakpoint(),\r\n );\r\n\r\n /** Whether the mobile menu should behave as a drawer */\r\n readonly isMobileDrawer = computed(\r\n () => this.isMobile() && this.mobileBehavior() === 'drawer',\r\n );\r\n\r\n /** Whether the mobile menu should stack with the content */\r\n readonly isMobileStack = computed(\r\n () => this.isMobile() && this.mobileBehavior() === 'stack',\r\n );\r\n\r\n /** Whether the sidebar should remain inline in the layout flow */\r\n readonly showInlineSidebar = computed(() => !this.isMobileDrawer());\r\n\r\n /** Whether the desktop sidebar should use a compact rail */\r\n readonly showCompactSidebar = computed(\r\n () => this.collapsed() && !this.isMobile(),\r\n );\r\n\r\n readonly mobileDrawerTransform = computed(() => {\r\n if (this.mobileMenuOpen()) {\r\n return 'translateX(0)';\r\n }\r\n\r\n return this.rtl() ? 'translateX(100%)' : 'translateX(-100%)';\r\n });\r\n\r\n constructor() {\r\n effect(() => {\r\n const item = this.selectedItem();\r\n if (item && !this.initialEmitted) {\r\n this.initialEmitted = true;\r\n this.menuItemClick.emit(item);\r\n }\r\n });\r\n\r\n effect(() => {\r\n if (!this.isMobileDrawer()) {\r\n this.mobileMenuOpen.set(false);\r\n }\r\n });\r\n\r\n const root = this.document?.documentElement;\r\n if (root && typeof MutationObserver !== 'undefined') {\r\n const observer = new MutationObserver(() => {\r\n this.rtl.set(this.getDirection() === 'rtl');\r\n });\r\n\r\n observer.observe(root, {\r\n attributes: true,\r\n attributeFilter: ['dir'],\r\n });\r\n\r\n this.destroyRef.onDestroy(() => observer.disconnect());\r\n }\r\n }\r\n\r\n /** Sidebar width reacts to collapsed + hover */\r\n readonly sidebarWidth = computed(() => {\r\n if (this.isMobileStack()) {\r\n return '100%';\r\n }\r\n\r\n if (this.showCompactSidebar()) {\r\n return this.dividerHovered() ? '4.75rem' : '4.25rem';\r\n }\r\n\r\n return this.dividerHovered() ? '16.5%' : '16%';\r\n });\r\n\r\n readonly sidebarOrder = computed(() => {\r\n if (!this.isMobileStack()) {\r\n return 1;\r\n }\r\n\r\n return this.mobileStackOrder() === 'main-first' ? 2 : 1;\r\n });\r\n\r\n readonly contentOrder = computed(() => {\r\n if (!this.isMobileStack()) {\r\n return 2;\r\n }\r\n\r\n return this.mobileStackOrder() === 'main-first' ? 1 : 2;\r\n });\r\n\r\n /** Icon for the collapse toggle button */\r\n readonly toggleIcon = computed(() => {\r\n if (this.collapsed()) {\r\n return this.rtl() ? 'arrow.chevron-left' : 'arrow.chevron-right';\r\n }\r\n\r\n return this.rtl() ? 'arrow.chevron-right' : 'arrow.chevron-left';\r\n });\r\n\r\n toggleCollapsed(): void {\r\n if (this.isMobile()) {\r\n return;\r\n }\r\n\r\n this.collapsed.update((v) => !v);\r\n }\r\n\r\n toggleMobileMenu(): void {\r\n if (!this.isMobileDrawer()) {\r\n return;\r\n }\r\n\r\n this.mobileMenuOpen.update((v) => !v);\r\n }\r\n\r\n closeMobileMenu(): void {\r\n this.mobileMenuOpen.set(false);\r\n }\r\n\r\n selectItem(item: ClientPageMenuItem): void {\r\n this.selectedKey.set(item.key);\r\n this.menuItemClick.emit(item);\r\n\r\n if (this.isMobileDrawer()) {\r\n this.closeMobileMenu();\r\n }\r\n }\r\n\r\n getAvatarStyle(color: string): Record<string, string> {\r\n if (color.startsWith('#')) {\r\n return {\r\n '--p-avatar-background': color + '1a',\r\n '--p-avatar-color': color,\r\n };\r\n }\r\n return {\r\n '--p-avatar-background': `var(--p-${color}-100)`,\r\n '--p-avatar-color': `var(--p-${color}-700)`,\r\n };\r\n }\r\n\r\n @HostListener('window:resize')\r\n onWindowResize(): void {\r\n this.viewportWidth.set(this.getViewportWidth());\r\n }\r\n\r\n @HostListener('window:keydown.escape')\r\n onEscapeKey(): void {\r\n this.closeMobileMenu();\r\n }\r\n\r\n private getViewportWidth(): number {\r\n if (typeof window === 'undefined') {\r\n return Number.MAX_SAFE_INTEGER;\r\n }\r\n\r\n return window.innerWidth;\r\n }\r\n\r\n private getDirection(): 'ltr' | 'rtl' {\r\n const dir = this.document?.documentElement?.dir?.toLowerCase();\r\n return dir === 'rtl' ? 'rtl' : 'ltr';\r\n }\r\n}\r\n","<mt-card class=\"bg-gray-200 w-full h-full\">\r\n <ng-template #headless>\r\n <ng-template\r\n #sidebarContent\r\n let-compact=\"compact\"\r\n let-mobileDrawer=\"mobileDrawer\"\r\n >\r\n <div class=\"flex h-full min-h-0 flex-col overflow-hidden\">\r\n <div\r\n class=\"flex shrink-0 items-center border-b border-gray-300 px-5 py-4\"\r\n [class.justify-center]=\"compact && !mobileDrawer\"\r\n [class.justify-between]=\"!compact || mobileDrawer\"\r\n >\r\n <div\r\n class=\"flex min-w-0 items-center gap-2\"\r\n [class.flex-1]=\"mobileDrawer\"\r\n >\r\n @if (menuIcon()) {\r\n <div class=\"text-lg shrink-0\">\r\n <mt-icon [icon]=\"menuIcon()!\" />\r\n </div>\r\n }\r\n @if (menuTitle()) {\r\n <div\r\n class=\"min-w-0 overflow-hidden transition-all duration-300 ease-in-out\"\r\n [class.max-w-0]=\"compact && !mobileDrawer\"\r\n [class.opacity-0]=\"compact && !mobileDrawer\"\r\n [class.max-w-xs]=\"!compact || mobileDrawer\"\r\n [class.opacity-100]=\"!compact || mobileDrawer\"\r\n >\r\n <div class=\"truncate font-semibold\">{{ menuTitle() }}</div>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (mobileDrawer) {\r\n <button\r\n type=\"button\"\r\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-surface-100 cursor-pointer\"\r\n aria-label=\"Close navigation\"\r\n (click)=\"closeMobileMenu()\"\r\n >\r\n <mt-icon icon=\"general.x-close\" class=\"text-lg\" />\r\n </button>\r\n }\r\n </div>\r\n\r\n <mt-client-page-menu\r\n [menuItems]=\"menuItems()\"\r\n [selectedItem]=\"selectedItem()\"\r\n [loading]=\"menuItemsLoading()\"\r\n [compact]=\"compact && !mobileDrawer\"\r\n (menuItemClick)=\"selectItem($event)\"\r\n />\r\n </div>\r\n </ng-template>\r\n\r\n <div\r\n class=\"relative flex h-full min-h-0\"\r\n [class.flex-col]=\"isMobileStack()\"\r\n [class.flex-row]=\"!isMobileStack()\"\r\n >\r\n @if (showInlineSidebar()) {\r\n <div\r\n class=\"flex min-h-0 flex-col overflow-hidden transition-all duration-300 ease-in-out\"\r\n [class.w-full]=\"isMobileStack()\"\r\n [style.width]=\"isMobileStack() ? null : sidebarWidth()\"\r\n [style.order]=\"sidebarOrder()\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"sidebarContent\"\r\n [ngTemplateOutletContext]=\"{\r\n compact: showCompactSidebar(),\r\n mobileDrawer: false,\r\n }\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (!isMobile()) {\r\n <div\r\n class=\"relative flex-shrink-0 w-px\"\r\n [style.order]=\"sidebarOrder()\"\r\n (mouseenter)=\"dividerHovered.set(true)\"\r\n (mouseleave)=\"dividerHovered.set(false)\"\r\n >\r\n <button\r\n type=\"button\"\r\n (click)=\"toggleCollapsed()\"\r\n class=\"absolute bottom-6 -translate-x-1/2 left-1/2 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 cursor-pointer group\"\r\n [attr.aria-label]=\"\r\n collapsed() ? 'Expand sidebar' : 'Collapse sidebar'\r\n \"\r\n >\r\n <mt-icon\r\n [icon]=\"toggleIcon()\"\r\n class=\"text-xs text-gray-500 transition-all duration-200 group-hover:text-primary-600 group-hover:animate-pulse\"\r\n />\r\n </button>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"flex min-h-0 min-w-0 flex-1 flex-col\"\r\n [style.order]=\"contentOrder()\"\r\n >\r\n <mt-card class=\"h-full min-h-0\">\r\n <ng-template #headless>\r\n <div\r\n class=\"flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-surface px-5 py-4\"\r\n >\r\n <div class=\"flex min-w-0 items-center gap-2\">\r\n @if (isMobileDrawer()) {\r\n <button\r\n type=\"button\"\r\n class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-surface-100 cursor-pointer\"\r\n aria-label=\"Open navigation\"\r\n (click)=\"toggleMobileMenu()\"\r\n >\r\n <mt-icon icon=\"general.menu-01\" class=\"text-lg\" />\r\n </button>\r\n }\r\n\r\n @if (selectedItem(); as selected) {\r\n <mt-avatar\r\n [style]=\"getAvatarStyle(selected.color)\"\r\n [icon]=\"selected.icon\"\r\n shape=\"square\"\r\n size=\"large\"\r\n />\r\n <div class=\"min-w-0\">\r\n <div class=\"truncate text-md font-semibold\">\r\n {{ selected.title }}\r\n </div>\r\n @if (selected.subtitle) {\r\n <div class=\"truncate text-sm text-gray-500 font-semibold\">\r\n {{ selected.subtitle }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if (headerEnd(); as template) {\r\n <div\r\n class=\"flex max-w-full min-w-0 flex-wrap items-center gap-2\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n >\r\n <ng-content />\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n </div>\r\n </div>\r\n\r\n @if (isMobileDrawer()) {\r\n @if (mobileMenuOpen()) {\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close navigation\"\r\n class=\"fixed inset-0 z-40 bg-black/35\"\r\n (click)=\"closeMobileMenu()\"\r\n ></button>\r\n }\r\n\r\n <div\r\n class=\"fixed inset-y-0 z-50 w-[min(20rem,calc(100vw-1rem))] max-w-[20rem] transition-transform duration-300 ease-in-out\"\r\n [class.start-0]=\"isMobileDrawer()\"\r\n [class.pointer-events-none]=\"!mobileMenuOpen()\"\r\n [style.transform]=\"mobileDrawerTransform()\"\r\n >\r\n <mt-card class=\"h-full min-h-0 rounded-none shadow-2xl\">\r\n <ng-template #headless>\r\n <div class=\"h-full min-h-0 bg-surface-0\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"sidebarContent\"\r\n [ngTemplateOutletContext]=\"{\r\n compact: false,\r\n mobileDrawer: true,\r\n }\"\r\n />\r\n </div>\r\n </ng-template>\r\n </mt-card>\r\n </div>\r\n }\r\n </ng-template>\r\n</mt-card>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAkCa,UAAU,CAAA;AACJ,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;;IAGvC,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;;IAG1B,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;;AAG3B,IAAA,SAAS,GAAG,KAAK,CAAuB,EAAE,qDAAC;;AAG3C,IAAA,gBAAgB,GAAG,KAAK,CAAU,KAAK,4DAAC;;IAGxC,UAAU,GAAG,KAAK,CAAmB,IAAI,uDAChD,SAAS,EAAE,gBAAgB,EAAA,CAC3B;;AAGO,IAAA,cAAc,GAAG,KAAK,CAAqB,QAAQ,0DAAC;;AAGpD,IAAA,gBAAgB,GAAG,KAAK,CAA8B,YAAY,4DAAC;;AAGnE,IAAA,gBAAgB,GAAG,KAAK,CAAS,IAAI,4DAAC;;IAGtC,UAAU,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;;AAG5B,IAAA,SAAS,GAAG,KAAK,CAAU,KAAK,qDAAC;;AAGjC,IAAA,SAAS,GAAG,YAAY,CAAmB,qBAAqB,qDAAC;;IAGjE,aAAa,GAAG,MAAM,EAAsB;;IAGpC,WAAW,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;;AAG3D,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACpC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;QAC9B,IAAI,GAAG,EAAE;YACP,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI;QACnE;AACA,QAAA,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI;AACzB,IAAA,CAAC,wDAAC;;IAGM,cAAc,GAAG,KAAK;;AAGrB,IAAA,cAAc,GAAG,MAAM,CAAC,KAAK,0DAAC;;IAG9B,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,KAAK,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,KAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;;AAG3C,IAAA,cAAc,GAAG,MAAM,CAAC,KAAK,0DAAC;IACtB,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,yDAAC;;IAGvD,QAAQ,GAAG,QAAQ,CAC1B,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAC1E;;AAGQ,IAAA,cAAc,GAAG,QAAQ,CAChC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE,KAAK,QAAQ,0DAC5D;;AAGQ,IAAA,aAAa,GAAG,QAAQ,CAC/B,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE,KAAK,OAAO,yDAC3D;;AAGQ,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,mBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;;AAG1D,IAAA,kBAAkB,GAAG,QAAQ,CACpC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,8DAC3C;AAEQ,IAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,OAAO,eAAe;QACxB;AAEA,QAAA,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,kBAAkB,GAAG,mBAAmB;AAC9D,IAAA,CAAC,iEAAC;AAEF,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE;AAChC,YAAA,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AAChC,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;YAC/B;AACF,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE;AAC1B,gBAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;YAChC;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,eAAe;AAC3C,QAAA,IAAI,IAAI,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;AACnD,YAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,KAAK,CAAC;AAC7C,YAAA,CAAC,CAAC;AAEF,YAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,gBAAA,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,KAAK,CAAC;AACzB,aAAA,CAAC;AAEF,YAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxD;IACF;;AAGS,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACpC,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,OAAO,MAAM;QACf;AAEA,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;AAC7B,YAAA,OAAO,IAAI,CAAC,cAAc,EAAE,GAAG,SAAS,GAAG,SAAS;QACtD;AAEA,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE,GAAG,OAAO,GAAG,KAAK;AAChD,IAAA,CAAC,wDAAC;AAEO,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;AACzB,YAAA,OAAO,CAAC;QACV;AAEA,QAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC;AACzD,IAAA,CAAC,wDAAC;AAEO,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;AACzB,YAAA,OAAO,CAAC;QACV;AAEA,QAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC;AACzD,IAAA,CAAC,wDAAC;;AAGO,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAClC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,oBAAoB,GAAG,qBAAqB;QAClE;AAEA,QAAA,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,qBAAqB,GAAG,oBAAoB;AAClE,IAAA,CAAC,sDAAC;IAEF,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AAEA,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAClC;IAEA,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE;YAC1B;QACF;AAEA,QAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;IAChC;AAEA,IAAA,UAAU,CAAC,IAAwB,EAAA;QACjC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AAE7B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;YACzB,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;AAEA,IAAA,cAAc,CAAC,KAAa,EAAA;AAC1B,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACzB,OAAO;gBACL,uBAAuB,EAAE,KAAK,GAAG,IAAI;AACrC,gBAAA,kBAAkB,EAAE,KAAK;aAC1B;QACH;QACA,OAAO;YACL,uBAAuB,EAAE,CAAA,QAAA,EAAW,KAAK,CAAA,KAAA,CAAO;YAChD,kBAAkB,EAAE,CAAA,QAAA,EAAW,KAAK,CAAA,KAAA,CAAO;SAC5C;IACH;IAGA,cAAc,GAAA;QACZ,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACjD;IAGA,WAAW,GAAA;QACT,IAAI,CAAC,eAAe,EAAE;IACxB;IAEQ,gBAAgB,GAAA;AACtB,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,OAAO,MAAM,CAAC,gBAAgB;QAChC;QAEA,OAAO,MAAM,CAAC,UAAU;IAC1B;IAEQ,YAAY,GAAA;AAClB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,eAAe,EAAE,GAAG,EAAE,WAAW,EAAE;QAC9D,OAAO,GAAG,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK;IACtC;uGAtOW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClCvB,m7OAkMA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDtKY,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,YAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,SAAA,EAAA,SAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAMnD,UAAU,EAAA,UAAA,EAAA,CAAA;kBATtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,CAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAEzD;AACJ,wBAAA,KAAK,EAAE,cAAc;AACtB,qBAAA,EAAA,QAAA,EAAA,m7OAAA,EAAA;8pCAuCmD,qBAAqB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA;sBA4KxE,YAAY;uBAAC,eAAe;;sBAK5B,YAAY;uBAAC,uBAAuB;;;AExPvC;;AAEG;;;;"}
package/fesm2022/masterteam-components-dialog.mjs CHANGED
@@ -10,10 +10,13 @@ class DialogService extends DialogService$1 {
10
10
  closable: true,
11
11
  modal: true,
12
12
  };
13
+ const styleClass = ['mt-dialog', config?.styleClass]
14
+ .filter(Boolean)
15
+ .join(' ');
13
16
  this.ref = super.open(component, {
14
17
  ...defaultConfig,
15
18
  ...config,
16
- styleClass: 'mt-dialog ' + config?.styleClass,
19
+ styleClass,
17
20
  });
18
21
  return this.ref;
19
22
  }
package/fesm2022/masterteam-components-dialog.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-dialog.mjs","sources":["../../../../packages/masterteam/components/dialog/dialog.ts","../../../../packages/masterteam/components/dialog/masterteam-components-dialog.ts"],"sourcesContent":["import {\r\n DialogService as PrimeNGDialogService,\r\n DynamicDialogConfig,\r\n DynamicDialogRef,\r\n} from 'primeng/dynamicdialog';\r\nimport { Injectable } from '@angular/core';\r\nexport {\r\n DynamicDialogConfig,\r\n DynamicDialogRef as ModalRef,\r\n} from 'primeng/dynamicdialog';\r\nexport { DynamicDialogRef } from 'primeng/dynamicdialog';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class DialogService extends PrimeNGDialogService {\r\n ref: DynamicDialogRef | undefined | null;\r\n\r\n override open(component: any, config?: DynamicDialogConfig) {\r\n const defaultConfig = {\r\n closable: true,\r\n modal: true,\r\n };\r\n this.ref = super.open(component, {\r\n ...defaultConfig,\r\n ...config,\r\n styleClass: 'mt-dialog ' + config?.styleClass,\r\n });\r\n return this.ref;\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["PrimeNGDialogService"],"mappings":";;;;;AAaM,MAAO,aAAc,SAAQA,eAAoB,CAAA;AACrD,IAAA,GAAG;IAEM,IAAI,CAAC,SAAc,EAAE,MAA4B,EAAA;AACxD,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,KAAK,EAAE,IAAI;SACZ;QACD,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;AAC/B,YAAA,GAAG,aAAa;AAChB,YAAA,GAAG,MAAM;AACT,YAAA,UAAU,EAAE,YAAY,GAAG,MAAM,EAAE,UAAU;AAC9C,SAAA,CAAC;QACF,OAAO,IAAI,CAAC,GAAG;IACjB;uGAdW,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAb,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cADA,MAAM,EAAA,CAAA;;2FACnB,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACZlC;;AAEG;;;;"}
1
+ {"version":3,"file":"masterteam-components-dialog.mjs","sources":["../../../../packages/masterteam/components/dialog/dialog.ts","../../../../packages/masterteam/components/dialog/masterteam-components-dialog.ts"],"sourcesContent":["import {\r\n DialogService as PrimeNGDialogService,\r\n DynamicDialogConfig,\r\n DynamicDialogRef,\r\n} from 'primeng/dynamicdialog';\r\nimport { Injectable } from '@angular/core';\r\nexport {\r\n DynamicDialogConfig,\r\n DynamicDialogRef as ModalRef,\r\n} from 'primeng/dynamicdialog';\r\nexport { DynamicDialogRef } from 'primeng/dynamicdialog';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class DialogService extends PrimeNGDialogService {\r\n ref: DynamicDialogRef | undefined | null;\r\n\r\n override open(component: any, config?: DynamicDialogConfig) {\r\n const defaultConfig = {\r\n closable: true,\r\n modal: true,\r\n };\r\n const styleClass = ['mt-dialog', config?.styleClass]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n this.ref = super.open(component, {\r\n ...defaultConfig,\r\n ...config,\r\n styleClass,\r\n });\r\n return this.ref;\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["PrimeNGDialogService"],"mappings":";;;;;AAaM,MAAO,aAAc,SAAQA,eAAoB,CAAA;AACrD,IAAA,GAAG;IAEM,IAAI,CAAC,SAAc,EAAE,MAA4B,EAAA;AACxD,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,KAAK,EAAE,IAAI;SACZ;QACD,MAAM,UAAU,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU;aAChD,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;QAEZ,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;AAC/B,YAAA,GAAG,aAAa;AAChB,YAAA,GAAG,MAAM;YACT,UAAU;AACX,SAAA,CAAC;QACF,OAAO,IAAI,CAAC,GAAG;IACjB;uGAlBW,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAb,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,cADA,MAAM,EAAA,CAAA;;2FACnB,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACZlC;;AAEG;;;;"}
package/fesm2022/masterteam-components-dynamic-drawer.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-dynamic-drawer.mjs","sources":["../../../../packages/masterteam/components/dynamic-drawer/dynamic-drawer-host.ts","../../../../packages/masterteam/components/dynamic-drawer/dynamic-drawer.ts","../../../../packages/masterteam/components/dynamic-drawer/masterteam-components-dynamic-drawer.ts"],"sourcesContent":["import { DynamicDialogRef } from 'primeng/dynamicdialog';\r\nimport { DrawerModule } from 'primeng/drawer';\r\nimport {\r\n Component,\r\n Injector,\r\n Input,\r\n signal,\r\n InjectionToken,\r\n model,\r\n computed,\r\n Injectable,\r\n} from '@angular/core';\r\nimport { NgComponentOutlet } from '@angular/common';\r\n\r\nexport const DynamicDrawerConfig = new InjectionToken<any>(\r\n 'DynamicDrawerConfig',\r\n);\r\n\r\n/**\r\n * Controller to dynamically update drawer properties from inside the child component.\r\n * Inject this in your drawer content component to modify drawer behavior.\r\n */\r\n@Injectable()\r\nexport class DrawerController {\r\n private _styleClass = signal<string>('');\r\n private _header = signal<string>('');\r\n private _fullScreen = signal<boolean | undefined>(undefined);\r\n\r\n /** Get the current additional styleClass */\r\n get styleClass() {\r\n return this._styleClass;\r\n }\r\n\r\n /** Get the current header */\r\n get header() {\r\n return this._header;\r\n }\r\n\r\n /** Get the current fullScreen state */\r\n get fullScreen() {\r\n return this._fullScreen;\r\n }\r\n\r\n /** Add or replace the dynamic styleClass */\r\n setStyleClass(styleClass: string) {\r\n this._styleClass.set(styleClass);\r\n }\r\n\r\n /** Append a class to the existing styleClass */\r\n addClass(className: string) {\r\n const current = this._styleClass();\r\n if (!current.includes(className)) {\r\n this._styleClass.set((current + ' ' + className).trim());\r\n }\r\n }\r\n\r\n /** Remove a class from the styleClass */\r\n removeClass(className: string) {\r\n const current = this._styleClass();\r\n this._styleClass.set(\r\n current\r\n .split(' ')\r\n .filter((c) => c !== className)\r\n .join(' '),\r\n );\r\n }\r\n\r\n /** Toggle a class on/off */\r\n toggleClass(className: string) {\r\n if (this._styleClass().includes(className)) {\r\n this.removeClass(className);\r\n } else {\r\n this.addClass(className);\r\n }\r\n }\r\n\r\n /** Update the drawer header */\r\n setHeader(header: string) {\r\n this._header.set(header);\r\n }\r\n\r\n /** Toggle fullScreen mode */\r\n setFullScreen(fullScreen: boolean) {\r\n this._fullScreen.set(fullScreen);\r\n }\r\n}\r\nimport { Button } from '@masterteam/components/button';\r\n\r\n@Component({\r\n selector: 'mt-dynamic-drawer-host',\r\n standalone: true,\r\n imports: [NgComponentOutlet, DrawerModule, Button],\r\n template: `\r\n <p-drawer\r\n [(visible)]=\"visible\"\r\n [closable]=\"cfg()?.closable\"\r\n [position]=\"cfg()?.position\"\r\n [fullScreen]=\"computedFullScreen()\"\r\n [modal]=\"cfg()?.modal\"\r\n [closeOnEscape]=\"cfg()?.closeOnEscape\"\r\n [dismissible]=\"cfg()?.dismissible\"\r\n [transitionOptions]=\"cfg()?.transitionOptions\"\r\n [styleClass]=\"computedStyleClass()\"\r\n >\r\n <ng-template #header>\r\n <div\r\n class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\r\n >\r\n <h3 class=\"text-xl font-semibold\">{{ computedHeader() }}</h3>\r\n <mt-button\r\n (onClick)=\"handleHide()\"\r\n variant=\"outlined\"\r\n styleClass=\"!bg-white\"\r\n icon=\"general.x-close\"\r\n severity=\"secondary\"\r\n >\r\n </mt-button>\r\n </div>\r\n </ng-template>\r\n @if (childInjector) {\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n cmp();\r\n injector: childInjector;\r\n inputs: cmpInputs()\r\n \"\r\n >\r\n </ng-container>\r\n }\r\n </p-drawer>\r\n `,\r\n})\r\nexport class DynamicDrawerHost {\r\n public visible = model<boolean>(false);\r\n cmp = signal<any>(null);\r\n cfg = signal<any>({});\r\n cmpInputs = signal<Record<string, unknown>>({});\r\n childInjector!: Injector;\r\n private ref?: DynamicDialogRef;\r\n private drawerController = new DrawerController();\r\n\r\n /** Computed styleClass combining config + dynamic controller class */\r\n computedStyleClass = computed(() => {\r\n const configClass = this.cfg()?.styleClass ?? '';\r\n const dynamicClass = this.drawerController.styleClass();\r\n return `${configClass} ${dynamicClass} mt-drawer`.trim();\r\n });\r\n\r\n /** Computed header - controller overrides config if set */\r\n computedHeader = computed(() => {\r\n const dynamicHeader = this.drawerController.header();\r\n return dynamicHeader || this.cfg()?.header || '';\r\n });\r\n\r\n /** Computed fullScreen - controller overrides config if set */\r\n computedFullScreen = computed(() => {\r\n const dynamicFullScreen = this.drawerController.fullScreen();\r\n return dynamicFullScreen !== undefined\r\n ? dynamicFullScreen\r\n : this.cfg()?.fullScreen;\r\n });\r\n\r\n @Input({ required: true })\r\n connect(opts: {\r\n component: any;\r\n config?: any;\r\n parent: Injector;\r\n ref: DynamicDialogRef;\r\n }) {\r\n this.cmp.set(opts.component);\r\n this.cfg.set(opts.config ?? {});\r\n this.cmpInputs.set(opts.config?.inputValues ?? {});\r\n this.ref = opts.ref;\r\n setTimeout(() => {\r\n this.childInjector = Injector.create({\r\n parent: opts.parent,\r\n providers: [\r\n { provide: DynamicDrawerConfig, useValue: opts.config ?? {} },\r\n { provide: DynamicDialogRef, useValue: opts.ref },\r\n { provide: DrawerController, useValue: this.drawerController },\r\n ],\r\n });\r\n }, 0);\r\n\r\n opts.ref.onClose.subscribe(() => {\r\n this.visible.set(false);\r\n });\r\n this.visible.set(true);\r\n }\r\n\r\n handleHide(data = null) {\r\n this.visible.set(false);\r\n this.ref?.close(data);\r\n }\r\n}\r\n","// dynamic-drawer.service.ts\r\nimport {\r\n Injectable,\r\n Type,\r\n createComponent,\r\n EnvironmentInjector,\r\n ApplicationRef,\r\n Injector,\r\n DestroyRef,\r\n inject,\r\n} from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { DynamicDrawerHost } from './dynamic-drawer-host';\r\nimport { DynamicDialogRef } from 'primeng/dynamicdialog';\r\n\r\nexport interface DynamicDrawerConfigInterface {\r\n header?: string;\r\n position?: string;\r\n data?: any;\r\n fullScreen?: boolean;\r\n modal?: boolean;\r\n closable?: boolean;\r\n closeOnEscape?: boolean;\r\n dismissible?: boolean;\r\n appendTo?: any;\r\n transitionOptions?: string;\r\n styleClass?: string;\r\n inputValues?: any;\r\n}\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class DrawerService {\r\n private appRef = inject(ApplicationRef);\r\n private env = inject(EnvironmentInjector);\r\n private rootInjector = inject(Injector);\r\n private destroyRef = inject(DestroyRef);\r\n private doc = inject(DOCUMENT);\r\n private hostRef?: ReturnType<typeof createComponent<DynamicDrawerHost>>;\r\n defauiltConfig: DynamicDrawerConfigInterface = {\r\n position: 'right',\r\n modal: true,\r\n closable: false,\r\n transitionOptions: '200ms cubic-bezier(0, 0, 1, 1)',\r\n inputValues: {},\r\n };\r\n open<T>(\r\n component: Type<any>,\r\n config: DynamicDrawerConfigInterface = {},\r\n ): DynamicDialogRef<T> {\r\n config = { ...this.defauiltConfig, ...config };\r\n\r\n const targetEl = this.resolveAppendTarget(config.appendTo);\r\n\r\n this.hostRef = createComponent(DynamicDrawerHost, {\r\n environmentInjector: this.env,\r\n });\r\n\r\n this.appRef.attachView(this.hostRef.hostView);\r\n\r\n // 📌 append to target (NOT body when provided)\r\n targetEl.appendChild(this.hostRef.location.nativeElement);\r\n\r\n // 🧹 auto-clean if app destroyed (SSR / HMR safety)\r\n this.destroyRef.onDestroy(() => {\r\n this.appRef.detachView(this.hostRef!.hostView);\r\n this.hostRef!.destroy();\r\n this.hostRef = undefined;\r\n });\r\n\r\n const ref = new DynamicDialogRef<T>();\r\n this.hostRef.instance.connect({\r\n component,\r\n config,\r\n parent: this.rootInjector,\r\n ref,\r\n });\r\n\r\n return ref;\r\n }\r\n\r\n private resolveAppendTarget(appendTo?: string | HTMLElement): HTMLElement {\r\n if (!appendTo) return this.doc.body;\r\n\r\n if (typeof appendTo === 'string') {\r\n const selector =\r\n appendTo.startsWith('#') || appendTo.startsWith('.')\r\n ? appendTo\r\n : `#${appendTo}`;\r\n const el = this.doc.querySelector(selector) as HTMLElement | null;\r\n if (!el) {\r\n return this.doc.body;\r\n }\r\n return el;\r\n }\r\n\r\n return appendTo; // HTMLElement passed directly\r\n }\r\n}\r\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":"masterteam-components-dynamic-drawer.mjs","sources":["../../../../packages/masterteam/components/dynamic-drawer/dynamic-drawer-host.ts","../../../../packages/masterteam/components/dynamic-drawer/dynamic-drawer.ts","../../../../packages/masterteam/components/dynamic-drawer/masterteam-components-dynamic-drawer.ts"],"sourcesContent":["import { DynamicDialogRef } from 'primeng/dynamicdialog';\r\nimport { DrawerModule } from 'primeng/drawer';\r\nimport {\r\n Component,\r\n Injector,\r\n Input,\r\n signal,\r\n InjectionToken,\r\n model,\r\n computed,\r\n Injectable,\r\n} from '@angular/core';\r\nimport { NgComponentOutlet } from '@angular/common';\r\n\r\nexport const DynamicDrawerConfig = new InjectionToken<any>(\r\n 'DynamicDrawerConfig',\r\n);\r\n\r\n/**\r\n * Controller to dynamically update drawer properties from inside the child component.\r\n * Inject this in your drawer content component to modify drawer behavior.\r\n */\r\n@Injectable()\r\nexport class DrawerController {\r\n private _styleClass = signal<string>('');\r\n private _header = signal<string>('');\r\n private _fullScreen = signal<boolean | undefined>(undefined);\r\n\r\n /** Get the current additional styleClass */\r\n get styleClass() {\r\n return this._styleClass;\r\n }\r\n\r\n /** Get the current header */\r\n get header() {\r\n return this._header;\r\n }\r\n\r\n /** Get the current fullScreen state */\r\n get fullScreen() {\r\n return this._fullScreen;\r\n }\r\n\r\n /** Add or replace the dynamic styleClass */\r\n setStyleClass(styleClass: string) {\r\n this._styleClass.set(styleClass);\r\n }\r\n\r\n /** Append a class to the existing styleClass */\r\n addClass(className: string) {\r\n const current = this._styleClass();\r\n if (!current.includes(className)) {\r\n this._styleClass.set((current + ' ' + className).trim());\r\n }\r\n }\r\n\r\n /** Remove a class from the styleClass */\r\n removeClass(className: string) {\r\n const current = this._styleClass();\r\n this._styleClass.set(\r\n current\r\n .split(' ')\r\n .filter((c) => c !== className)\r\n .join(' '),\r\n );\r\n }\r\n\r\n /** Toggle a class on/off */\r\n toggleClass(className: string) {\r\n if (this._styleClass().includes(className)) {\r\n this.removeClass(className);\r\n } else {\r\n this.addClass(className);\r\n }\r\n }\r\n\r\n /** Update the drawer header */\r\n setHeader(header: string) {\r\n this._header.set(header);\r\n }\r\n\r\n /** Toggle fullScreen mode */\r\n setFullScreen(fullScreen: boolean) {\r\n this._fullScreen.set(fullScreen);\r\n }\r\n}\r\nimport { Button } from '@masterteam/components/button';\r\n\r\n@Component({\r\n selector: 'mt-dynamic-drawer-host',\r\n standalone: true,\r\n imports: [NgComponentOutlet, DrawerModule, Button],\r\n template: `\r\n <p-drawer\r\n [(visible)]=\"visible\"\r\n [closable]=\"cfg()?.closable\"\r\n [position]=\"cfg()?.position\"\r\n [fullScreen]=\"computedFullScreen()\"\r\n [modal]=\"cfg()?.modal\"\r\n [closeOnEscape]=\"cfg()?.closeOnEscape\"\r\n [dismissible]=\"cfg()?.dismissible\"\r\n [transitionOptions]=\"cfg()?.transitionOptions\"\r\n [styleClass]=\"computedStyleClass()\"\r\n >\r\n <ng-template #header>\r\n <div\r\n class=\"flex items-center justify-between px-5 w-full py-3 border-b border-surface\"\r\n >\r\n <h3 class=\"text-xl font-semibold\">{{ computedHeader() }}</h3>\r\n <mt-button\r\n (onClick)=\"handleHide()\"\r\n variant=\"outlined\"\r\n styleClass=\"!bg-white\"\r\n icon=\"general.x-close\"\r\n severity=\"secondary\"\r\n >\r\n </mt-button>\r\n </div>\r\n </ng-template>\r\n @if (childInjector) {\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n cmp();\r\n injector: childInjector;\r\n inputs: cmpInputs()\r\n \"\r\n >\r\n </ng-container>\r\n }\r\n </p-drawer>\r\n `,\r\n})\r\nexport class DynamicDrawerHost {\r\n public visible = model<boolean>(false);\r\n cmp = signal<any>(null);\r\n cfg = signal<any>({});\r\n cmpInputs = signal<Record<string, unknown>>({});\r\n childInjector!: Injector;\r\n private ref?: DynamicDialogRef;\r\n private drawerController = new DrawerController();\r\n\r\n /** Computed styleClass combining config + dynamic controller class */\r\n computedStyleClass = computed(() => {\r\n const configClass = this.cfg()?.styleClass ?? '';\r\n const dynamicClass = this.drawerController.styleClass();\r\n return `${configClass} ${dynamicClass} mt-drawer`.trim();\r\n });\r\n\r\n /** Computed header - controller overrides config if set */\r\n computedHeader = computed(() => {\r\n const dynamicHeader = this.drawerController.header();\r\n return dynamicHeader || this.cfg()?.header || '';\r\n });\r\n\r\n /** Computed fullScreen - controller overrides config if set */\r\n computedFullScreen = computed(() => {\r\n const dynamicFullScreen = this.drawerController.fullScreen();\r\n return dynamicFullScreen !== undefined\r\n ? dynamicFullScreen\r\n : this.cfg()?.fullScreen;\r\n });\r\n\r\n @Input({ required: true })\r\n connect(opts: {\r\n component: any;\r\n config?: any;\r\n parent: Injector;\r\n ref: DynamicDialogRef;\r\n }) {\r\n this.cmp.set(opts.component);\r\n this.cfg.set(opts.config ?? {});\r\n this.cmpInputs.set(opts.config?.inputValues ?? {});\r\n this.ref = opts.ref;\r\n setTimeout(() => {\r\n this.childInjector = Injector.create({\r\n parent: opts.parent,\r\n providers: [\r\n { provide: DynamicDrawerConfig, useValue: opts.config ?? {} },\r\n { provide: DynamicDialogRef, useValue: opts.ref },\r\n { provide: DrawerController, useValue: this.drawerController },\r\n ],\r\n });\r\n }, 0);\r\n\r\n opts.ref.onClose.subscribe(() => {\r\n this.visible.set(false);\r\n });\r\n this.visible.set(true);\r\n }\r\n\r\n handleHide(data = null) {\r\n this.visible.set(false);\r\n this.ref?.close(data);\r\n }\r\n}\r\n","// dynamic-drawer.service.ts\r\nimport {\r\n Injectable,\r\n Type,\r\n createComponent,\r\n EnvironmentInjector,\r\n ApplicationRef,\r\n Injector,\r\n DestroyRef,\r\n inject,\r\n} from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { DynamicDrawerHost } from './dynamic-drawer-host';\r\nimport { DynamicDialogRef } from 'primeng/dynamicdialog';\r\n\r\nexport type ResponsiveOverlayPreset =\r\n | 'drawer-narrow'\r\n | 'drawer-default'\r\n | 'drawer-wide'\r\n | 'dialog-narrow'\r\n | 'dialog-default'\r\n | 'dialog-wide';\r\n\r\nexport interface DynamicDrawerConfigInterface {\r\n header?: string;\r\n position?: string;\r\n data?: any;\r\n fullScreen?: boolean;\r\n modal?: boolean;\r\n closable?: boolean;\r\n closeOnEscape?: boolean;\r\n dismissible?: boolean;\r\n appendTo?: any;\r\n transitionOptions?: string;\r\n styleClass?: string;\r\n responsive?: boolean;\r\n responsivePreset?: ResponsiveOverlayPreset;\r\n inputValues?: any;\r\n}\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class DrawerService {\r\n private appRef = inject(ApplicationRef);\r\n private env = inject(EnvironmentInjector);\r\n private rootInjector = inject(Injector);\r\n private destroyRef = inject(DestroyRef);\r\n private doc = inject(DOCUMENT);\r\n private hostRef?: ReturnType<typeof createComponent<DynamicDrawerHost>>;\r\n defauiltConfig: DynamicDrawerConfigInterface = {\r\n position: 'right',\r\n modal: true,\r\n closable: false,\r\n transitionOptions: '200ms cubic-bezier(0, 0, 1, 1)',\r\n inputValues: {},\r\n };\r\n open<T>(\r\n component: Type<any>,\r\n config: DynamicDrawerConfigInterface = {},\r\n ): DynamicDialogRef<T> {\r\n config = { ...this.defauiltConfig, ...config };\r\n\r\n const targetEl = this.resolveAppendTarget(config.appendTo);\r\n\r\n this.hostRef = createComponent(DynamicDrawerHost, {\r\n environmentInjector: this.env,\r\n });\r\n\r\n this.appRef.attachView(this.hostRef.hostView);\r\n\r\n // 📌 append to target (NOT body when provided)\r\n targetEl.appendChild(this.hostRef.location.nativeElement);\r\n\r\n // 🧹 auto-clean if app destroyed (SSR / HMR safety)\r\n this.destroyRef.onDestroy(() => {\r\n this.appRef.detachView(this.hostRef!.hostView);\r\n this.hostRef!.destroy();\r\n this.hostRef = undefined;\r\n });\r\n\r\n const ref = new DynamicDialogRef<T>();\r\n this.hostRef.instance.connect({\r\n component,\r\n config,\r\n parent: this.rootInjector,\r\n ref,\r\n });\r\n\r\n return ref;\r\n }\r\n\r\n private resolveAppendTarget(appendTo?: string | HTMLElement): HTMLElement {\r\n if (!appendTo) return this.doc.body;\r\n\r\n if (typeof appendTo === 'string') {\r\n const selector =\r\n appendTo.startsWith('#') || appendTo.startsWith('.')\r\n ? appendTo\r\n : `#${appendTo}`;\r\n const el = this.doc.querySelector(selector) as HTMLElement | null;\r\n if (!el) {\r\n return this.doc.body;\r\n }\r\n return el;\r\n }\r\n\r\n return appendTo; // HTMLElement passed directly\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/masterteam-components-entities.mjs CHANGED
@@ -346,11 +346,11 @@ class EntityAttachment {
346
346
  isMultiple = computed(() => Array.isArray(this.uploadValue()), ...(ngDevMode ? [{ debugName: "isMultiple" }] : []));
347
347
  empty = '-';
348
348
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
349
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-2\">\n @if (!hideName()) {\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\n }\n\n @if (hasAttachments()) {\n <mt-upload-field\n class=\"w-full\"\n [ngModel]=\"uploadValue()\"\n [ngModelOptions]=\"{ standalone: true }\"\n [shape]=\"'card'\"\n [multiple]=\"isMultiple()\"\n [readonly]=\"true\"\n />\n } @else {\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\n }\n</div>\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: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }] });
349
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-2\">\r\n @if (!hideName()) {\r\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n }\r\n\r\n @if (hasAttachments()) {\r\n <mt-upload-field\r\n class=\"w-full\"\r\n [ngModel]=\"uploadValue()\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [shape]=\"'card'\"\r\n [multiple]=\"isMultiple()\"\r\n [readonly]=\"true\"\r\n />\r\n } @else {\r\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n }\r\n</div>\r\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: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }] });
350
350
  }
351
351
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, decorators: [{
352
352
  type: Component,
353
- args: [{ selector: 'mt-entity-attachment', standalone: true, imports: [FormsModule, UploadField], template: "<div class=\"flex w-full flex-col gap-2\">\n @if (!hideName()) {\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\n }\n\n @if (hasAttachments()) {\n <mt-upload-field\n class=\"w-full\"\n [ngModel]=\"uploadValue()\"\n [ngModelOptions]=\"{ standalone: true }\"\n [shape]=\"'card'\"\n [multiple]=\"isMultiple()\"\n [readonly]=\"true\"\n />\n } @else {\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\n }\n</div>\n" }]
353
+ args: [{ selector: 'mt-entity-attachment', standalone: true, imports: [FormsModule, UploadField], template: "<div class=\"flex w-full flex-col gap-2\">\r\n @if (!hideName()) {\r\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n }\r\n\r\n @if (hasAttachments()) {\r\n <mt-upload-field\r\n class=\"w-full\"\r\n [ngModel]=\"uploadValue()\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [shape]=\"'card'\"\r\n [multiple]=\"isMultiple()\"\r\n [readonly]=\"true\"\r\n />\r\n } @else {\r\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n }\r\n</div>\r\n" }]
354
354
  }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
355
355
 
356
356
  class EntityPreview {