@masterteam/components 0.0.102 → 0.0.103

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 (29) hide show
  1. package/assets/common.css +1 -1
  2. package/fesm2022/masterteam-components-client-page-menu.mjs +3 -5
  3. package/fesm2022/masterteam-components-client-page-menu.mjs.map +1 -1
  4. package/fesm2022/masterteam-components-client-page.mjs +12 -116
  5. package/fesm2022/masterteam-components-client-page.mjs.map +1 -1
  6. package/fesm2022/masterteam-components-dialog.mjs +1 -4
  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-formula.mjs +1 -1
  10. package/fesm2022/masterteam-components-formula.mjs.map +1 -1
  11. package/fesm2022/masterteam-components-modal.mjs +4 -42
  12. package/fesm2022/masterteam-components-modal.mjs.map +1 -1
  13. package/fesm2022/masterteam-components-page-header.mjs +2 -2
  14. package/fesm2022/masterteam-components-page-header.mjs.map +1 -1
  15. package/fesm2022/masterteam-components-sidebar.mjs +4 -63
  16. package/fesm2022/masterteam-components-sidebar.mjs.map +1 -1
  17. package/fesm2022/masterteam-components-table.mjs +2 -2
  18. package/fesm2022/masterteam-components-table.mjs.map +1 -1
  19. package/fesm2022/masterteam-components-tabs.mjs +3 -3
  20. package/fesm2022/masterteam-components-tabs.mjs.map +1 -1
  21. package/fesm2022/masterteam-components-topbar.mjs +4 -50
  22. package/fesm2022/masterteam-components-topbar.mjs.map +1 -1
  23. package/package.json +1 -1
  24. package/types/masterteam-components-client-page-menu.d.ts +1 -3
  25. package/types/masterteam-components-client-page.d.ts +5 -39
  26. package/types/masterteam-components-dynamic-drawer.d.ts +1 -4
  27. package/types/masterteam-components-modal.d.ts +2 -10
  28. package/types/masterteam-components-sidebar.d.ts +1 -18
  29. package/types/masterteam-components-topbar.d.ts +1 -17
@@ -12,55 +12,17 @@ class ModalService {
12
12
  contentClass = 'mt-modal-content';
13
13
  modalConfig;
14
14
  openModal(component, modalType, config) {
15
- const normalizedConfig = this.normalizeResponsiveConfig(config, modalType);
16
15
  let ref;
17
16
  if (modalType === 'drawer') {
18
- normalizedConfig['position'] = this.handelStartEndPosition(normalizedConfig['position']);
19
- ref = this.drawerService.open(component, normalizedConfig);
17
+ config.position = this.handelStartEndPosition(config.position);
18
+ console.log('Opening drawer with config:', config);
19
+ ref = this.drawerService.open(component, config);
20
20
  }
21
21
  else {
22
- ref = this.dialogService.open(component, normalizedConfig);
22
+ ref = this.dialogService.open(component, config);
23
23
  }
24
24
  return ref;
25
25
  }
26
- normalizeResponsiveConfig(config, modalType) {
27
- if (config.responsive === false) {
28
- return config;
29
- }
30
- const defaultPreset = modalType === 'drawer' ? 'drawer-default' : 'dialog-default';
31
- const className = this.getResponsiveClassName(config.responsivePreset ?? defaultPreset);
32
- return {
33
- ...config,
34
- styleClass: this.mergeClassNames(config.styleClass, className),
35
- };
36
- }
37
- getResponsiveClassName(preset) {
38
- switch (preset) {
39
- case 'drawer-narrow':
40
- return 'mt-overlay-drawer-narrow';
41
- case 'drawer-wide':
42
- return 'mt-overlay-drawer-wide';
43
- case 'dialog-narrow':
44
- return 'mt-overlay-dialog-narrow';
45
- case 'dialog-wide':
46
- return 'mt-overlay-dialog-wide';
47
- case 'drawer-default':
48
- return 'mt-overlay-drawer-default';
49
- case 'dialog-default':
50
- default:
51
- return 'mt-overlay-dialog-default';
52
- }
53
- }
54
- mergeClassNames(currentClass = '', classToAdd = '') {
55
- const classes = `${currentClass} ${classToAdd}`
56
- .split(' ')
57
- .map((item) => item.trim())
58
- .filter(Boolean);
59
- if (!classes.length) {
60
- return undefined;
61
- }
62
- return Array.from(new Set(classes)).join(' ');
63
- }
64
26
  handelStartEndPosition(position) {
65
27
  if (position === 'start') {
66
28
  return this.dir?.value === 'rtl' ? 'right' : 'left';
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-modal.mjs","sources":["../../../../packages/masterteam/components/modal/modal.ts","../../../../packages/masterteam/components/modal/masterteam-components-modal.ts"],"sourcesContent":["import {\r\n DynamicDrawerConfigInterface,\r\n ResponsiveOverlayPreset,\r\n DrawerService,\r\n} from '@masterteam/components/dynamic-drawer';\r\nimport {\r\n DynamicDialogConfig,\r\n DialogService,\r\n} from '@masterteam/components/dialog';\r\nimport { inject, Injectable } from '@angular/core';\r\nimport { Directionality } from '@angular/cdk/bidi'; // Import from Angular CDK\r\n\r\ntype ResponsiveModalConfig = {\r\n responsive?: boolean;\r\n responsivePreset?: ResponsiveOverlayPreset;\r\n styleClass?: string;\r\n};\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class ModalService {\r\n readonly drawerService: DrawerService = inject(DrawerService);\r\n readonly dialogService: DialogService = inject(DialogService);\r\n private dir = inject(Directionality, { optional: true });\r\n\r\n footerClass: string = 'mt-modal-footer';\r\n contentClass: string = 'mt-modal-content';\r\n modalConfig: any;\r\n\r\n openModal(\r\n component: any,\r\n modalType: 'drawer' | 'dialog',\r\n config: (DynamicDialogConfig | DynamicDrawerConfigInterface) &\r\n ResponsiveModalConfig,\r\n ) {\r\n const normalizedConfig = this.normalizeResponsiveConfig(config, modalType);\r\n let ref: any;\r\n if (modalType === 'drawer') {\r\n normalizedConfig['position'] = this.handelStartEndPosition(\r\n normalizedConfig['position'],\r\n );\r\n ref = this.drawerService.open(\r\n component,\r\n normalizedConfig as DynamicDrawerConfigInterface,\r\n );\r\n } else {\r\n ref = this.dialogService.open(component, normalizedConfig);\r\n }\r\n\r\n return ref;\r\n }\r\n\r\n private normalizeResponsiveConfig(\r\n config: ResponsiveModalConfig & Record<string, any>,\r\n modalType: 'drawer' | 'dialog',\r\n ): ResponsiveModalConfig & Record<string, any> {\r\n if (config.responsive === false) {\r\n return config;\r\n }\r\n\r\n const defaultPreset: ResponsiveOverlayPreset =\r\n modalType === 'drawer' ? 'drawer-default' : 'dialog-default';\r\n const className = this.getResponsiveClassName(\r\n config.responsivePreset ?? defaultPreset,\r\n );\r\n\r\n return {\r\n ...config,\r\n styleClass: this.mergeClassNames(config.styleClass, className),\r\n };\r\n }\r\n\r\n private getResponsiveClassName(preset: ResponsiveOverlayPreset): string {\r\n switch (preset) {\r\n case 'drawer-narrow':\r\n return 'mt-overlay-drawer-narrow';\r\n case 'drawer-wide':\r\n return 'mt-overlay-drawer-wide';\r\n case 'dialog-narrow':\r\n return 'mt-overlay-dialog-narrow';\r\n case 'dialog-wide':\r\n return 'mt-overlay-dialog-wide';\r\n case 'drawer-default':\r\n return 'mt-overlay-drawer-default';\r\n case 'dialog-default':\r\n default:\r\n return 'mt-overlay-dialog-default';\r\n }\r\n }\r\n\r\n private mergeClassNames(\r\n currentClass = '',\r\n classToAdd = '',\r\n ): string | undefined {\r\n const classes = `${currentClass} ${classToAdd}`\r\n .split(' ')\r\n .map((item) => item.trim())\r\n .filter(Boolean);\r\n\r\n if (!classes.length) {\r\n return undefined;\r\n }\r\n\r\n return Array.from(new Set(classes)).join(' ');\r\n }\r\n\r\n handelStartEndPosition(position: string | undefined) {\r\n if (position === 'start') {\r\n return this.dir?.value === 'rtl' ? 'right' : 'left';\r\n } else if (position === 'end') {\r\n return this.dir?.value === 'rtl' ? 'left' : 'right';\r\n } else {\r\n return position || 'right';\r\n }\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-modal.mjs","sources":["../../../../packages/masterteam/components/modal/modal.ts","../../../../packages/masterteam/components/modal/masterteam-components-modal.ts"],"sourcesContent":["import {\r\n DynamicDrawerConfigInterface,\r\n DrawerService,\r\n} from '@masterteam/components/dynamic-drawer';\r\nimport {\r\n DynamicDialogConfig,\r\n DialogService,\r\n} from '@masterteam/components/dialog';\r\nimport { inject, Injectable } from '@angular/core';\r\nimport { Directionality } from '@angular/cdk/bidi'; // Import from Angular CDK\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class ModalService {\r\n readonly drawerService: DrawerService = inject(DrawerService);\r\n readonly dialogService: DialogService = inject(DialogService);\r\n private dir = inject(Directionality, { optional: true });\r\n\r\n footerClass: string = 'mt-modal-footer';\r\n contentClass: string = 'mt-modal-content';\r\n modalConfig: any;\r\n\r\n openModal(\r\n component: any,\r\n modalType: 'drawer' | 'dialog',\r\n config: DynamicDialogConfig | DynamicDrawerConfigInterface,\r\n ) {\r\n let ref: any;\r\n if (modalType === 'drawer') {\r\n config.position = this.handelStartEndPosition(config.position);\r\n console.log('Opening drawer with config:', config);\r\n ref = this.drawerService.open(component, config);\r\n } else {\r\n ref = this.dialogService.open(component, config);\r\n }\r\n\r\n return ref;\r\n }\r\n\r\n handelStartEndPosition(position: string | undefined) {\r\n if (position === 'start') {\r\n return this.dir?.value === 'rtl' ? 'right' : 'left';\r\n } else if (position === 'end') {\r\n return this.dir?.value === 'rtl' ? 'left' : 'right';\r\n } else {\r\n return position || 'right';\r\n }\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAYa,YAAY,CAAA;AACd,IAAA,aAAa,GAAkB,MAAM,CAAC,aAAa,CAAC;AACpD,IAAA,aAAa,GAAkB,MAAM,CAAC,aAAa,CAAC;IACrD,GAAG,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAExD,WAAW,GAAW,iBAAiB;IACvC,YAAY,GAAW,kBAAkB;AACzC,IAAA,WAAW;AAEX,IAAA,SAAS,CACP,SAAc,EACd,SAA8B,EAC9B,MAA0D,EAAA;AAE1D,QAAA,IAAI,GAAQ;AACZ,QAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;YAC1B,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC9D,YAAA,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC;YAClD,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;QAClD;aAAO;YACL,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;QAClD;AAEA,QAAA,OAAO,GAAG;IACZ;AAEA,IAAA,sBAAsB,CAAC,QAA4B,EAAA;AACjD,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM;QACrD;AAAO,aAAA,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC7B,YAAA,OAAO,IAAI,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO;QACrD;aAAO;YACL,OAAO,QAAQ,IAAI,OAAO;QAC5B;IACF;uGAlCW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cADC,MAAM,EAAA,CAAA;;2FACnB,YAAY,EAAA,UAAA,EAAA,CAAA;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACXlC;;AAEG;;;;"}
@@ -27,11 +27,11 @@ class PageHeader {
27
27
  }, ...(ngDevMode ? [{ debugName: "backIcon" }] : []));
28
28
  hasTabs = computed(() => this.tabs().length > 0, ...(ngDevMode ? [{ debugName: "hasTabs" }] : []));
29
29
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PageHeader, isStandalone: true, selector: "mt-page-header", inputs: { backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, backButtonIcon: { classPropertyName: "backButtonIcon", publicName: "backButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, avatarIcon: { classPropertyName: "avatarIcon", publicName: "avatarIcon", isSignal: true, isRequired: false, transformFunction: null }, avatarStyle: { classPropertyName: "avatarStyle", publicName: "avatarStyle", isSignal: true, isRequired: false, transformFunction: null }, avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClick: "backButtonClick", tabChange: "tabChange" }, queries: [{ propertyName: "titleEnd", first: true, predicate: ["titleEnd"], descendants: true, isSignal: true }, { propertyName: "headerEnd", first: true, predicate: ["headerEnd"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] bg-content items-center gap-3 lg:gap-0 p-3 border-b border-surface min-h-18.5\"\r\n>\r\n <div class=\"flex gap-2 items-center min-w-0\">\r\n @if (backButton()) {\r\n <mt-button\r\n [text]=\"true\"\r\n [icon]=\"backIcon()\"\r\n size=\"large\"\r\n (click)=\"backButtonClick.emit()\"\r\n >\r\n </mt-button>\r\n }\r\n\r\n @if (avatarIcon()) {\r\n <mt-avatar\r\n [icon]=\"avatarIcon()\"\r\n [shape]=\"avatarShape()\"\r\n [style]=\"avatarStyle()\"\r\n >\r\n </mt-avatar>\r\n }\r\n\r\n <h3 class=\"font-bold text-lg truncate\">{{ title() }}</h3>\r\n\r\n @if (titleEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n\r\n <div class=\"w-full min-w-0 lg:w-auto lg:justify-self-center\">\r\n @if (hasTabs()) {\r\n <mt-tabs\r\n [options]=\"tabs()\"\r\n [active]=\"activeTab()\"\r\n size=\"large\"\r\n (onChange)=\"tabChange.emit($event)\"\r\n >\r\n </mt-tabs>\r\n }\r\n </div>\r\n\r\n <div class=\"w-full min-w-0 lg:w-auto lg:justify-self-end\">\r\n @if (headerEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n</div>\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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
30
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PageHeader, isStandalone: true, selector: "mt-page-header", inputs: { backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, backButtonIcon: { classPropertyName: "backButtonIcon", publicName: "backButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, avatarIcon: { classPropertyName: "avatarIcon", publicName: "avatarIcon", isSignal: true, isRequired: false, transformFunction: null }, avatarStyle: { classPropertyName: "avatarStyle", publicName: "avatarStyle", isSignal: true, isRequired: false, transformFunction: null }, avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backButtonClick: "backButtonClick", tabChange: "tabChange" }, queries: [{ propertyName: "titleEnd", first: true, predicate: ["titleEnd"], descendants: true, isSignal: true }, { propertyName: "headerEnd", first: true, predicate: ["headerEnd"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"grid grid-cols-3 bg-content items-center p-3 border-b border-surface min-h-18.5\"\r\n>\r\n <div class=\"flex gap-2 items-center\">\r\n @if (backButton()) {\r\n <mt-button\r\n [text]=\"true\"\r\n [icon]=\"backIcon()\"\r\n size=\"large\"\r\n (click)=\"backButtonClick.emit()\"\r\n >\r\n </mt-button>\r\n }\r\n\r\n @if (avatarIcon()) {\r\n <mt-avatar\r\n [icon]=\"avatarIcon()\"\r\n [shape]=\"avatarShape()\"\r\n [style]=\"avatarStyle()\"\r\n >\r\n </mt-avatar>\r\n }\r\n\r\n <h3 class=\"font-bold text-lg\">{{ title() }}</h3>\r\n\r\n @if (titleEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n\r\n <div class=\"justify-self-center\">\r\n @if (hasTabs()) {\r\n <mt-tabs\r\n [options]=\"tabs()\"\r\n [active]=\"activeTab()\"\r\n size=\"large\"\r\n (onChange)=\"tabChange.emit($event)\"\r\n >\r\n </mt-tabs>\r\n }\r\n </div>\r\n\r\n <div class=\"justify-self-end\">\r\n @if (headerEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n</div>\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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
31
31
  }
32
32
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PageHeader, decorators: [{
33
33
  type: Component,
34
- args: [{ selector: 'mt-page-header', standalone: true, imports: [Avatar, Button, Tabs, NgTemplateOutlet], template: "<div\r\n class=\"grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] bg-content items-center gap-3 lg:gap-0 p-3 border-b border-surface min-h-18.5\"\r\n>\r\n <div class=\"flex gap-2 items-center min-w-0\">\r\n @if (backButton()) {\r\n <mt-button\r\n [text]=\"true\"\r\n [icon]=\"backIcon()\"\r\n size=\"large\"\r\n (click)=\"backButtonClick.emit()\"\r\n >\r\n </mt-button>\r\n }\r\n\r\n @if (avatarIcon()) {\r\n <mt-avatar\r\n [icon]=\"avatarIcon()\"\r\n [shape]=\"avatarShape()\"\r\n [style]=\"avatarStyle()\"\r\n >\r\n </mt-avatar>\r\n }\r\n\r\n <h3 class=\"font-bold text-lg truncate\">{{ title() }}</h3>\r\n\r\n @if (titleEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n\r\n <div class=\"w-full min-w-0 lg:w-auto lg:justify-self-center\">\r\n @if (hasTabs()) {\r\n <mt-tabs\r\n [options]=\"tabs()\"\r\n [active]=\"activeTab()\"\r\n size=\"large\"\r\n (onChange)=\"tabChange.emit($event)\"\r\n >\r\n </mt-tabs>\r\n }\r\n </div>\r\n\r\n <div class=\"w-full min-w-0 lg:w-auto lg:justify-self-end\">\r\n @if (headerEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n</div>\r\n" }]
34
+ args: [{ selector: 'mt-page-header', standalone: true, imports: [Avatar, Button, Tabs, NgTemplateOutlet], template: "<div\r\n class=\"grid grid-cols-3 bg-content items-center p-3 border-b border-surface min-h-18.5\"\r\n>\r\n <div class=\"flex gap-2 items-center\">\r\n @if (backButton()) {\r\n <mt-button\r\n [text]=\"true\"\r\n [icon]=\"backIcon()\"\r\n size=\"large\"\r\n (click)=\"backButtonClick.emit()\"\r\n >\r\n </mt-button>\r\n }\r\n\r\n @if (avatarIcon()) {\r\n <mt-avatar\r\n [icon]=\"avatarIcon()\"\r\n [shape]=\"avatarShape()\"\r\n [style]=\"avatarStyle()\"\r\n >\r\n </mt-avatar>\r\n }\r\n\r\n <h3 class=\"font-bold text-lg\">{{ title() }}</h3>\r\n\r\n @if (titleEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n\r\n <div class=\"justify-self-center\">\r\n @if (hasTabs()) {\r\n <mt-tabs\r\n [options]=\"tabs()\"\r\n [active]=\"activeTab()\"\r\n size=\"large\"\r\n (onChange)=\"tabChange.emit($event)\"\r\n >\r\n </mt-tabs>\r\n }\r\n </div>\r\n\r\n <div class=\"justify-self-end\">\r\n @if (headerEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n</div>\r\n" }]
35
35
  }], propDecorators: { backButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButton", required: false }] }], backButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonIcon", required: false }] }], avatarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIcon", required: false }] }], avatarStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarStyle", required: false }] }], avatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarShape", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], titleEnd: [{ type: i0.ContentChild, args: ['titleEnd', { isSignal: true }] }], headerEnd: [{ type: i0.ContentChild, args: ['headerEnd', { isSignal: true }] }], backButtonClick: [{ type: i0.Output, args: ["backButtonClick"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
36
36
 
37
37
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-page-header.mjs","sources":["../../../../packages/masterteam/components/page-header/page-header.ts","../../../../packages/masterteam/components/page-header/page-header.html","../../../../packages/masterteam/components/page-header/masterteam-components-page-header.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n Component,\r\n input,\r\n output,\r\n computed,\r\n contentChild,\r\n TemplateRef,\r\n signal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { Button } from '@masterteam/components/button';\r\nimport { Tabs } from '@masterteam/components/tabs';\r\nimport { MTIcon } from '@masterteam/icons';\r\n\r\nexport interface PageHeaderTab {\r\n label: string;\r\n value: string | number;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-page-header',\r\n standalone: true,\r\n imports: [Avatar, Button, Tabs, NgTemplateOutlet],\r\n templateUrl: './page-header.html',\r\n})\r\nexport class PageHeader {\r\n backButton = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n backButtonIcon = input<'arrow' | 'close'>('arrow');\r\n avatarIcon = input<MTIcon>();\r\n avatarStyle = input<Record<string, string>>({});\r\n avatarShape = input<'circle' | 'square'>('square');\r\n title = input.required<string>();\r\n tabs = input<PageHeaderTab[]>([]);\r\n activeTab = input<string | number>();\r\n\r\n titleEnd = contentChild<TemplateRef<any>>('titleEnd');\r\n headerEnd = contentChild<TemplateRef<any>>('headerEnd');\r\n\r\n backButtonClick = output<void>();\r\n tabChange = output<string | number>();\r\n\r\n rtl = signal<boolean>(document.documentElement.dir === 'rtl');\r\n\r\n backIcon = computed(() => {\r\n if (this.backButtonIcon() === 'close') {\r\n return 'general.x-close';\r\n }\r\n return this.rtl() ? 'arrow.arrow-narrow-right' : 'arrow.arrow-narrow-left';\r\n });\r\n\r\n hasTabs = computed(() => this.tabs().length > 0);\r\n}\r\n","<div\r\n class=\"grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] bg-content items-center gap-3 lg:gap-0 p-3 border-b border-surface min-h-18.5\"\r\n>\r\n <div class=\"flex gap-2 items-center min-w-0\">\r\n @if (backButton()) {\r\n <mt-button\r\n [text]=\"true\"\r\n [icon]=\"backIcon()\"\r\n size=\"large\"\r\n (click)=\"backButtonClick.emit()\"\r\n >\r\n </mt-button>\r\n }\r\n\r\n @if (avatarIcon()) {\r\n <mt-avatar\r\n [icon]=\"avatarIcon()\"\r\n [shape]=\"avatarShape()\"\r\n [style]=\"avatarStyle()\"\r\n >\r\n </mt-avatar>\r\n }\r\n\r\n <h3 class=\"font-bold text-lg truncate\">{{ title() }}</h3>\r\n\r\n @if (titleEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n\r\n <div class=\"w-full min-w-0 lg:w-auto lg:justify-self-center\">\r\n @if (hasTabs()) {\r\n <mt-tabs\r\n [options]=\"tabs()\"\r\n [active]=\"activeTab()\"\r\n size=\"large\"\r\n (onChange)=\"tabChange.emit($event)\"\r\n >\r\n </mt-tabs>\r\n }\r\n </div>\r\n\r\n <div class=\"w-full min-w-0 lg:w-auto lg:justify-self-end\">\r\n @if (headerEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n</div>\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-page-header.mjs","sources":["../../../../packages/masterteam/components/page-header/page-header.ts","../../../../packages/masterteam/components/page-header/page-header.html","../../../../packages/masterteam/components/page-header/masterteam-components-page-header.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n Component,\r\n input,\r\n output,\r\n computed,\r\n contentChild,\r\n TemplateRef,\r\n signal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { Button } from '@masterteam/components/button';\r\nimport { Tabs } from '@masterteam/components/tabs';\r\nimport { MTIcon } from '@masterteam/icons';\r\n\r\nexport interface PageHeaderTab {\r\n label: string;\r\n value: string | number;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-page-header',\r\n standalone: true,\r\n imports: [Avatar, Button, Tabs, NgTemplateOutlet],\r\n templateUrl: './page-header.html',\r\n})\r\nexport class PageHeader {\r\n backButton = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n backButtonIcon = input<'arrow' | 'close'>('arrow');\r\n avatarIcon = input<MTIcon>();\r\n avatarStyle = input<Record<string, string>>({});\r\n avatarShape = input<'circle' | 'square'>('square');\r\n title = input.required<string>();\r\n tabs = input<PageHeaderTab[]>([]);\r\n activeTab = input<string | number>();\r\n\r\n titleEnd = contentChild<TemplateRef<any>>('titleEnd');\r\n headerEnd = contentChild<TemplateRef<any>>('headerEnd');\r\n\r\n backButtonClick = output<void>();\r\n tabChange = output<string | number>();\r\n\r\n rtl = signal<boolean>(document.documentElement.dir === 'rtl');\r\n\r\n backIcon = computed(() => {\r\n if (this.backButtonIcon() === 'close') {\r\n return 'general.x-close';\r\n }\r\n return this.rtl() ? 'arrow.arrow-narrow-right' : 'arrow.arrow-narrow-left';\r\n });\r\n\r\n hasTabs = computed(() => this.tabs().length > 0);\r\n}\r\n","<div\r\n class=\"grid grid-cols-3 bg-content items-center p-3 border-b border-surface min-h-18.5\"\r\n>\r\n <div class=\"flex gap-2 items-center\">\r\n @if (backButton()) {\r\n <mt-button\r\n [text]=\"true\"\r\n [icon]=\"backIcon()\"\r\n size=\"large\"\r\n (click)=\"backButtonClick.emit()\"\r\n >\r\n </mt-button>\r\n }\r\n\r\n @if (avatarIcon()) {\r\n <mt-avatar\r\n [icon]=\"avatarIcon()\"\r\n [shape]=\"avatarShape()\"\r\n [style]=\"avatarStyle()\"\r\n >\r\n </mt-avatar>\r\n }\r\n\r\n <h3 class=\"font-bold text-lg\">{{ title() }}</h3>\r\n\r\n @if (titleEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n\r\n <div class=\"justify-self-center\">\r\n @if (hasTabs()) {\r\n <mt-tabs\r\n [options]=\"tabs()\"\r\n [active]=\"activeTab()\"\r\n size=\"large\"\r\n (onChange)=\"tabChange.emit($event)\"\r\n >\r\n </mt-tabs>\r\n }\r\n </div>\r\n\r\n <div class=\"justify-self-end\">\r\n @if (headerEnd(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n }\r\n </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1,13 +1,10 @@
1
- import { DOCUMENT } from '@angular/common';
2
1
  import * as i0 from '@angular/core';
3
- import { inject, DestroyRef, input, booleanAttribute, model, signal, output, computed, HostListener, Component } from '@angular/core';
2
+ import { input, booleanAttribute, signal, output, Component } from '@angular/core';
4
3
  import { Icon } from '@masterteam/icons';
5
4
  import { RouterLinkActive, RouterLink } from '@angular/router';
6
5
  import { Tooltip } from '@masterteam/components/tooltip';
7
6
 
8
7
  class Sidebar {
9
- document = inject(DOCUMENT);
10
- destroyRef = inject(DestroyRef);
11
8
  items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
12
9
  logo = input(...(ngDevMode ? [undefined, { debugName: "logo" }] : []));
13
10
  logoLink = input(...(ngDevMode ? [undefined, { debugName: "logoLink" }] : []));
@@ -17,75 +14,19 @@ class Sidebar {
17
14
  bgImage = input(...(ngDevMode ? [undefined, { debugName: "bgImage" }] : []));
18
15
  bgRepeat = input(false, { ...(ngDevMode ? { debugName: "bgRepeat" } : {}), transform: booleanAttribute });
19
16
  iconsColor = input('var(--p-text-color)', ...(ngDevMode ? [{ debugName: "iconsColor" }] : []));
20
- mobileBehavior = input('overlay', ...(ngDevMode ? [{ debugName: "mobileBehavior" }] : []));
21
- mobileBreakpoint = input(1024, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
22
- mobileOpen = model(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : []));
23
17
  expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
24
18
  expandedChange = output();
25
- viewportWidth = signal(this.getViewportWidth(), ...(ngDevMode ? [{ debugName: "viewportWidth" }] : []));
26
- isMobile = computed(() => this.viewportWidth() < this.mobileBreakpoint(), ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
27
- isOverlayMode = computed(() => this.mobileBehavior() === 'overlay' && this.isMobile(), ...(ngDevMode ? [{ debugName: "isOverlayMode" }] : []));
28
- labelsExpanded = computed(() => this.isOverlayMode() || this.expanded(), ...(ngDevMode ? [{ debugName: "labelsExpanded" }] : []));
29
- rtl = signal(this.getDirection() === 'rtl', ...(ngDevMode ? [{ debugName: "rtl" }] : []));
30
- overlayTransform = computed(() => {
31
- if (!this.isOverlayMode() || this.mobileOpen()) {
32
- return null;
33
- }
34
- return this.rtl() ? 'translateX(100%)' : 'translateX(-100%)';
35
- }, ...(ngDevMode ? [{ debugName: "overlayTransform" }] : []));
36
- constructor() {
37
- const root = this.document?.documentElement;
38
- if (!root || typeof MutationObserver === 'undefined') {
39
- return;
40
- }
41
- const observer = new MutationObserver(() => {
42
- this.rtl.set(this.getDirection() === 'rtl');
43
- });
44
- observer.observe(root, {
45
- attributes: true,
46
- attributeFilter: ['dir'],
47
- });
48
- this.destroyRef.onDestroy(() => observer.disconnect());
49
- }
50
19
  toggleSidebar() {
51
- if (this.isOverlayMode()) {
52
- this.setMobileOpen(!this.mobileOpen());
53
- return;
54
- }
55
20
  this.expanded.update((v) => !v);
56
21
  this.expandedChange.emit(this.expanded());
57
22
  }
58
- onItemClick() {
59
- if (this.isOverlayMode() && this.mobileOpen()) {
60
- this.setMobileOpen(false);
61
- }
62
- }
63
- setMobileOpen(open) {
64
- this.mobileOpen.set(open);
65
- }
66
- onWindowResize() {
67
- this.viewportWidth.set(this.getViewportWidth());
68
- }
69
- getViewportWidth() {
70
- if (typeof window === 'undefined') {
71
- return Number.MAX_SAFE_INTEGER;
72
- }
73
- return window.innerWidth;
74
- }
75
- getDirection() {
76
- const dir = this.document?.documentElement?.dir?.toLowerCase();
77
- return dir === 'rtl' ? 'rtl' : 'ltr';
78
- }
79
23
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
80
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Sidebar, isStandalone: true, selector: "mt-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, iconsColor: { classPropertyName: "iconsColor", publicName: "iconsColor", isSignal: true, isRequired: false, transformFunction: null }, mobileBehavior: { classPropertyName: "mobileBehavior", publicName: "mobileBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mobileOpen: "mobileOpenChange", expandedChange: "expandedChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div class=\"h-full min-h-0\">\r\n @if (isOverlayMode() && mobileOpen()) {\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close sidebar\"\r\n class=\"fixed inset-0 z-40 bg-black/35\"\r\n (click)=\"setMobileOpen(false)\"\r\n ></button>\r\n }\r\n\r\n <div\r\n class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all transition-transform duration-400 ease-in-out dark:bg-surface-800\"\r\n [class.fixed]=\"isOverlayMode()\"\r\n [class.inset-y-0]=\"isOverlayMode()\"\r\n [class.start-0]=\"isOverlayMode()\"\r\n [class.z-50]=\"isOverlayMode()\"\r\n [class.shadow-2xl]=\"isOverlayMode()\"\r\n [style.width]=\"isOverlayMode() ? '16rem' : expanded() ? '16rem' : '4rem'\"\r\n [style.transform]=\"overlayTransform()\"\r\n >\r\n <div\r\n class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat-y]=\"bgRepeat()\"\r\n >\r\n <div class=\"flex shrink-0 items-center gap-2\">\r\n <button\r\n type=\"button\"\r\n size=\"large\"\r\n class=\"flex h-[40px] w-[47px] shrink-0 items-center justify-center rounded-xl transition-colors hover:bg-surface-100 dark:hover:bg-surface-900 cursor-pointer\"\r\n [style.color]=\"iconsColor()\"\r\n (click)=\"toggleSidebar()\"\r\n >\r\n <mt-icon\r\n icon=\"general.menu-01\"\r\n class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n [class.rotate-180]=\"labelsExpanded()\"\r\n />\r\n </button>\r\n\r\n @if (logo() || title()) {\r\n <div\r\n class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!labelsExpanded()\"\r\n [class.opacity-0]=\"!labelsExpanded()\"\r\n [class.max-w-xs]=\"labelsExpanded()\"\r\n [class.opacity-100]=\"labelsExpanded()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-8 shrink-0\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div\r\n class=\"h-6 w-[1px] shrink-0 bg-current opacity-30\"\r\n [style.color]=\"iconsColor()\"\r\n ></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div\r\n class=\"flex min-w-0 flex-col gap-0.5\"\r\n [style.color]=\"iconsColor()\"\r\n >\r\n <span class=\"truncate text-sm font-semibold\">{{\r\n title()\r\n }}</span>\r\n @if (subTitle()) {\r\n <span class=\"truncate text-xs opacity-70\">{{\r\n subTitle()\r\n }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n [class.mt-sidebar-menu-collapsed]=\"!labelsExpanded()\"\r\n [class.pe-1]=\"labelsExpanded()\"\r\n [class.pe-px]=\"!labelsExpanded()\"\r\n >\r\n @for (item of items(); track item.id) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n #rla=\"routerLinkActive\"\r\n class=\"flex h-[47px] min-w-[47px] shrink-0 items-center gap-3 overflow-hidden rounded-xl transition-colors hover:bg-primary-50 dark:hover:bg-surface-900\"\r\n mtTooltip=\"{{ item.title }}\"\r\n [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n (click)=\"onItemClick()\"\r\n >\r\n <div class=\"px-4\">\r\n <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n </div>\r\n <div\r\n class=\"overflow-hidden whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out\"\r\n [class.opacity-0]=\"!labelsExpanded()\"\r\n [class.max-w-0]=\"!labelsExpanded()\"\r\n [class.max-w-xs]=\"labelsExpanded()\"\r\n [class.opacity-100]=\"labelsExpanded()\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
24
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Sidebar, isStandalone: true, selector: "mt-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, iconsColor: { classPropertyName: "iconsColor", publicName: "iconsColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div\r\n class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n [style.width]=\"expanded() ? '16rem' : '4rem'\"\r\n>\r\n <div\r\n class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat-y]=\"bgRepeat()\"\r\n >\r\n <!-- Toggle Button & Branding -->\r\n <div class=\"flex shrink-0 items-center gap-2\">\r\n <button\r\n type=\"button\"\r\n size=\"large\"\r\n class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n [style.color]=\"iconsColor()\"\r\n (click)=\"toggleSidebar()\"\r\n >\r\n <mt-icon\r\n icon=\"general.menu-01\"\r\n class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n [class.rotate-180]=\"expanded()\"\r\n />\r\n </button>\r\n\r\n @if (logo() || title()) {\r\n <div\r\n class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!expanded()\"\r\n [class.opacity-0]=\"!expanded()\"\r\n [class.max-w-xs]=\"expanded()\"\r\n [class.opacity-100]=\"expanded()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-8 shrink-0\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div\r\n class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n [style.color]=\"iconsColor()\"\r\n ></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div\r\n class=\"flex flex-col gap-0.5 min-w-0\"\r\n [style.color]=\"iconsColor()\"\r\n >\r\n <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n @if (subTitle()) {\r\n <span class=\"text-xs opacity-70 truncate\">{{\r\n subTitle()\r\n }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n [class.pr-1]=\"expanded()\"\r\n [class.pr-px]=\"!expanded()\"\r\n >\r\n @for (item of items(); track item.id) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n #rla=\"routerLinkActive\"\r\n class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-xl overflow-hidden\"\r\n mtTooltip=\"{{ item.title }}\"\r\n [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n >\r\n <div class=\"px-4\">\r\n <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n </div>\r\n <div\r\n class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n [class.opacity-0]=\"!expanded()\"\r\n [class.max-w-xs]=\"expanded()\"\r\n [class.opacity-100]=\"expanded()\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
81
25
  }
82
26
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Sidebar, decorators: [{
83
27
  type: Component,
84
- args: [{ selector: 'mt-sidebar', standalone: true, imports: [RouterLinkActive, RouterLink, Icon, Tooltip], template: "<div class=\"h-full min-h-0\">\r\n @if (isOverlayMode() && mobileOpen()) {\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close sidebar\"\r\n class=\"fixed inset-0 z-40 bg-black/35\"\r\n (click)=\"setMobileOpen(false)\"\r\n ></button>\r\n }\r\n\r\n <div\r\n class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all transition-transform duration-400 ease-in-out dark:bg-surface-800\"\r\n [class.fixed]=\"isOverlayMode()\"\r\n [class.inset-y-0]=\"isOverlayMode()\"\r\n [class.start-0]=\"isOverlayMode()\"\r\n [class.z-50]=\"isOverlayMode()\"\r\n [class.shadow-2xl]=\"isOverlayMode()\"\r\n [style.width]=\"isOverlayMode() ? '16rem' : expanded() ? '16rem' : '4rem'\"\r\n [style.transform]=\"overlayTransform()\"\r\n >\r\n <div\r\n class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat-y]=\"bgRepeat()\"\r\n >\r\n <div class=\"flex shrink-0 items-center gap-2\">\r\n <button\r\n type=\"button\"\r\n size=\"large\"\r\n class=\"flex h-[40px] w-[47px] shrink-0 items-center justify-center rounded-xl transition-colors hover:bg-surface-100 dark:hover:bg-surface-900 cursor-pointer\"\r\n [style.color]=\"iconsColor()\"\r\n (click)=\"toggleSidebar()\"\r\n >\r\n <mt-icon\r\n icon=\"general.menu-01\"\r\n class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n [class.rotate-180]=\"labelsExpanded()\"\r\n />\r\n </button>\r\n\r\n @if (logo() || title()) {\r\n <div\r\n class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!labelsExpanded()\"\r\n [class.opacity-0]=\"!labelsExpanded()\"\r\n [class.max-w-xs]=\"labelsExpanded()\"\r\n [class.opacity-100]=\"labelsExpanded()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-8 shrink-0\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div\r\n class=\"h-6 w-[1px] shrink-0 bg-current opacity-30\"\r\n [style.color]=\"iconsColor()\"\r\n ></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div\r\n class=\"flex min-w-0 flex-col gap-0.5\"\r\n [style.color]=\"iconsColor()\"\r\n >\r\n <span class=\"truncate text-sm font-semibold\">{{\r\n title()\r\n }}</span>\r\n @if (subTitle()) {\r\n <span class=\"truncate text-xs opacity-70\">{{\r\n subTitle()\r\n }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n [class.mt-sidebar-menu-collapsed]=\"!labelsExpanded()\"\r\n [class.pe-1]=\"labelsExpanded()\"\r\n [class.pe-px]=\"!labelsExpanded()\"\r\n >\r\n @for (item of items(); track item.id) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n #rla=\"routerLinkActive\"\r\n class=\"flex h-[47px] min-w-[47px] shrink-0 items-center gap-3 overflow-hidden rounded-xl transition-colors hover:bg-primary-50 dark:hover:bg-surface-900\"\r\n mtTooltip=\"{{ item.title }}\"\r\n [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n (click)=\"onItemClick()\"\r\n >\r\n <div class=\"px-4\">\r\n <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n </div>\r\n <div\r\n class=\"overflow-hidden whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out\"\r\n [class.opacity-0]=\"!labelsExpanded()\"\r\n [class.max-w-0]=\"!labelsExpanded()\"\r\n [class.max-w-xs]=\"labelsExpanded()\"\r\n [class.opacity-100]=\"labelsExpanded()\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"] }]
85
- }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], logoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoLink", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], bgImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgImage", required: false }] }], bgRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgRepeat", required: false }] }], iconsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsColor", required: false }] }], mobileBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBehavior", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], onWindowResize: [{
86
- type: HostListener,
87
- args: ['window:resize']
88
- }] } });
28
+ args: [{ selector: 'mt-sidebar', standalone: true, imports: [RouterLinkActive, RouterLink, Icon, Tooltip], template: "<div\r\n class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n [style.width]=\"expanded() ? '16rem' : '4rem'\"\r\n>\r\n <div\r\n class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat-y]=\"bgRepeat()\"\r\n >\r\n <!-- Toggle Button & Branding -->\r\n <div class=\"flex shrink-0 items-center gap-2\">\r\n <button\r\n type=\"button\"\r\n size=\"large\"\r\n class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n [style.color]=\"iconsColor()\"\r\n (click)=\"toggleSidebar()\"\r\n >\r\n <mt-icon\r\n icon=\"general.menu-01\"\r\n class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n [class.rotate-180]=\"expanded()\"\r\n />\r\n </button>\r\n\r\n @if (logo() || title()) {\r\n <div\r\n class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!expanded()\"\r\n [class.opacity-0]=\"!expanded()\"\r\n [class.max-w-xs]=\"expanded()\"\r\n [class.opacity-100]=\"expanded()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-8 shrink-0\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div\r\n class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n [style.color]=\"iconsColor()\"\r\n ></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div\r\n class=\"flex flex-col gap-0.5 min-w-0\"\r\n [style.color]=\"iconsColor()\"\r\n >\r\n <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n @if (subTitle()) {\r\n <span class=\"text-xs opacity-70 truncate\">{{\r\n subTitle()\r\n }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n [class.pr-1]=\"expanded()\"\r\n [class.pr-px]=\"!expanded()\"\r\n >\r\n @for (item of items(); track item.id) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n #rla=\"routerLinkActive\"\r\n class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-xl overflow-hidden\"\r\n mtTooltip=\"{{ item.title }}\"\r\n [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n >\r\n <div class=\"px-4\">\r\n <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n </div>\r\n <div\r\n class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n [class.opacity-0]=\"!expanded()\"\r\n [class.max-w-xs]=\"expanded()\"\r\n [class.opacity-100]=\"expanded()\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"] }]
29
+ }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], logoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoLink", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], bgImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgImage", required: false }] }], bgRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgRepeat", required: false }] }], iconsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsColor", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
89
30
 
90
31
  /**
91
32
  * Generated bundle index. Do not edit.
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-sidebar.mjs","sources":["../../../../packages/masterteam/components/sidebar/sidebar.ts","../../../../packages/masterteam/components/sidebar/sidebar.html","../../../../packages/masterteam/components/sidebar/masterteam-components-sidebar.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\r\nimport {\r\n DestroyRef,\r\n booleanAttribute,\r\n Component,\r\n HostListener,\r\n computed,\r\n inject,\r\n input,\r\n model,\r\n output,\r\n signal,\r\n} from '@angular/core';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\n\r\nexport interface SidebarItem {\r\n id: string | number;\r\n title: string;\r\n icon?: MTIcon;\r\n routerLink?: any[] | string;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-sidebar',\r\n standalone: true,\r\n imports: [RouterLinkActive, RouterLink, Icon, Tooltip],\r\n templateUrl: './sidebar.html',\r\n styles: [\r\n `\r\n :host {\r\n display: block;\r\n height: 100%;\r\n min-height: 0;\r\n }\r\n\r\n .mt-sidebar-menu {\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--p-surface-400) transparent;\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar-track {\r\n background: transparent;\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar-thumb {\r\n border-radius: 9999px;\r\n background: color-mix(in srgb, var(--p-surface-500) 58%, transparent);\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar-thumb:hover {\r\n background: color-mix(in srgb, var(--p-surface-600) 72%, transparent);\r\n }\r\n\r\n .mt-sidebar-menu-collapsed {\r\n scrollbar-color: var(--p-surface-500) transparent;\r\n }\r\n\r\n .mt-sidebar-menu-collapsed::-webkit-scrollbar {\r\n width: 2px;\r\n }\r\n\r\n .mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb {\r\n background: color-mix(in srgb, var(--p-surface-600) 82%, transparent);\r\n }\r\n `,\r\n ],\r\n})\r\nexport class Sidebar {\r\n private readonly document = inject(DOCUMENT);\r\n private readonly destroyRef = inject(DestroyRef);\r\n\r\n items = input<SidebarItem[]>([]);\r\n\r\n logo = input<string>();\r\n logoLink = input<string | any[]>();\r\n title = input<string>();\r\n subTitle = input<string>();\r\n\r\n bgColor = input<string>();\r\n bgImage = input<string>();\r\n bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n iconsColor = input<string>('var(--p-text-color)');\r\n mobileBehavior = input<'overlay' | 'inline'>('overlay');\r\n mobileBreakpoint = input<number>(1024);\r\n mobileOpen = model(false);\r\n\r\n expanded = signal(false);\r\n expandedChange = output<boolean>();\r\n\r\n private readonly viewportWidth = signal(this.getViewportWidth());\r\n\r\n readonly isMobile = computed(\r\n () => this.viewportWidth() < this.mobileBreakpoint(),\r\n );\r\n\r\n readonly isOverlayMode = computed(\r\n () => this.mobileBehavior() === 'overlay' && this.isMobile(),\r\n );\r\n\r\n readonly labelsExpanded = computed(\r\n () => this.isOverlayMode() || this.expanded(),\r\n );\r\n\r\n readonly rtl = signal(this.getDirection() === 'rtl');\r\n\r\n readonly overlayTransform = computed(() => {\r\n if (!this.isOverlayMode() || this.mobileOpen()) {\r\n return null;\r\n }\r\n\r\n return this.rtl() ? 'translateX(100%)' : 'translateX(-100%)';\r\n });\r\n\r\n constructor() {\r\n const root = this.document?.documentElement;\r\n if (!root || typeof MutationObserver === 'undefined') {\r\n return;\r\n }\r\n\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 toggleSidebar(): void {\r\n if (this.isOverlayMode()) {\r\n this.setMobileOpen(!this.mobileOpen());\r\n return;\r\n }\r\n\r\n this.expanded.update((v) => !v);\r\n this.expandedChange.emit(this.expanded());\r\n }\r\n\r\n onItemClick(): void {\r\n if (this.isOverlayMode() && this.mobileOpen()) {\r\n this.setMobileOpen(false);\r\n }\r\n }\r\n\r\n setMobileOpen(open: boolean): void {\r\n this.mobileOpen.set(open);\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 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","<div class=\"h-full min-h-0\">\r\n @if (isOverlayMode() && mobileOpen()) {\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close sidebar\"\r\n class=\"fixed inset-0 z-40 bg-black/35\"\r\n (click)=\"setMobileOpen(false)\"\r\n ></button>\r\n }\r\n\r\n <div\r\n class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all transition-transform duration-400 ease-in-out dark:bg-surface-800\"\r\n [class.fixed]=\"isOverlayMode()\"\r\n [class.inset-y-0]=\"isOverlayMode()\"\r\n [class.start-0]=\"isOverlayMode()\"\r\n [class.z-50]=\"isOverlayMode()\"\r\n [class.shadow-2xl]=\"isOverlayMode()\"\r\n [style.width]=\"isOverlayMode() ? '16rem' : expanded() ? '16rem' : '4rem'\"\r\n [style.transform]=\"overlayTransform()\"\r\n >\r\n <div\r\n class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat-y]=\"bgRepeat()\"\r\n >\r\n <div class=\"flex shrink-0 items-center gap-2\">\r\n <button\r\n type=\"button\"\r\n size=\"large\"\r\n class=\"flex h-[40px] w-[47px] shrink-0 items-center justify-center rounded-xl transition-colors hover:bg-surface-100 dark:hover:bg-surface-900 cursor-pointer\"\r\n [style.color]=\"iconsColor()\"\r\n (click)=\"toggleSidebar()\"\r\n >\r\n <mt-icon\r\n icon=\"general.menu-01\"\r\n class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n [class.rotate-180]=\"labelsExpanded()\"\r\n />\r\n </button>\r\n\r\n @if (logo() || title()) {\r\n <div\r\n class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!labelsExpanded()\"\r\n [class.opacity-0]=\"!labelsExpanded()\"\r\n [class.max-w-xs]=\"labelsExpanded()\"\r\n [class.opacity-100]=\"labelsExpanded()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-8 shrink-0\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div\r\n class=\"h-6 w-[1px] shrink-0 bg-current opacity-30\"\r\n [style.color]=\"iconsColor()\"\r\n ></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div\r\n class=\"flex min-w-0 flex-col gap-0.5\"\r\n [style.color]=\"iconsColor()\"\r\n >\r\n <span class=\"truncate text-sm font-semibold\">{{\r\n title()\r\n }}</span>\r\n @if (subTitle()) {\r\n <span class=\"truncate text-xs opacity-70\">{{\r\n subTitle()\r\n }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n [class.mt-sidebar-menu-collapsed]=\"!labelsExpanded()\"\r\n [class.pe-1]=\"labelsExpanded()\"\r\n [class.pe-px]=\"!labelsExpanded()\"\r\n >\r\n @for (item of items(); track item.id) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n #rla=\"routerLinkActive\"\r\n class=\"flex h-[47px] min-w-[47px] shrink-0 items-center gap-3 overflow-hidden rounded-xl transition-colors hover:bg-primary-50 dark:hover:bg-surface-900\"\r\n mtTooltip=\"{{ item.title }}\"\r\n [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n (click)=\"onItemClick()\"\r\n >\r\n <div class=\"px-4\">\r\n <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n </div>\r\n <div\r\n class=\"overflow-hidden whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out\"\r\n [class.opacity-0]=\"!labelsExpanded()\"\r\n [class.max-w-0]=\"!labelsExpanded()\"\r\n [class.max-w-xs]=\"labelsExpanded()\"\r\n [class.opacity-100]=\"labelsExpanded()\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\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-sidebar.mjs","sources":["../../../../packages/masterteam/components/sidebar/sidebar.ts","../../../../packages/masterteam/components/sidebar/sidebar.html","../../../../packages/masterteam/components/sidebar/masterteam-components-sidebar.ts"],"sourcesContent":["import {\r\n booleanAttribute,\r\n Component,\r\n input,\r\n output,\r\n signal,\r\n} from '@angular/core';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\n\r\nexport interface SidebarItem {\r\n id: string | number;\r\n title: string;\r\n icon?: MTIcon;\r\n routerLink?: any[] | string;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-sidebar',\r\n standalone: true,\r\n imports: [RouterLinkActive, RouterLink, Icon, Tooltip],\r\n templateUrl: './sidebar.html',\r\n styles: [\r\n `\r\n :host {\r\n display: block;\r\n height: 100%;\r\n min-height: 0;\r\n }\r\n\r\n .mt-sidebar-menu {\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--p-surface-400) transparent;\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar-track {\r\n background: transparent;\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar-thumb {\r\n border-radius: 9999px;\r\n background: color-mix(in srgb, var(--p-surface-500) 58%, transparent);\r\n }\r\n\r\n .mt-sidebar-menu::-webkit-scrollbar-thumb:hover {\r\n background: color-mix(in srgb, var(--p-surface-600) 72%, transparent);\r\n }\r\n\r\n .mt-sidebar-menu-collapsed {\r\n scrollbar-color: var(--p-surface-500) transparent;\r\n }\r\n\r\n .mt-sidebar-menu-collapsed::-webkit-scrollbar {\r\n width: 2px;\r\n }\r\n\r\n .mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb {\r\n background: color-mix(in srgb, var(--p-surface-600) 82%, transparent);\r\n }\r\n `,\r\n ],\r\n})\r\nexport class Sidebar {\r\n items = input<SidebarItem[]>([]);\r\n\r\n logo = input<string>();\r\n logoLink = input<string | any[]>();\r\n title = input<string>();\r\n subTitle = input<string>();\r\n\r\n bgColor = input<string>();\r\n bgImage = input<string>();\r\n bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n iconsColor = input<string>('var(--p-text-color)');\r\n\r\n expanded = signal(false);\r\n expandedChange = output<boolean>();\r\n\r\n toggleSidebar(): void {\r\n this.expanded.update((v) => !v);\r\n this.expandedChange.emit(this.expanded());\r\n }\r\n}\r\n","<div\r\n class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n [style.width]=\"expanded() ? '16rem' : '4rem'\"\r\n>\r\n <div\r\n class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat-y]=\"bgRepeat()\"\r\n >\r\n <!-- Toggle Button & Branding -->\r\n <div class=\"flex shrink-0 items-center gap-2\">\r\n <button\r\n type=\"button\"\r\n size=\"large\"\r\n class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n [style.color]=\"iconsColor()\"\r\n (click)=\"toggleSidebar()\"\r\n >\r\n <mt-icon\r\n icon=\"general.menu-01\"\r\n class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n [class.rotate-180]=\"expanded()\"\r\n />\r\n </button>\r\n\r\n @if (logo() || title()) {\r\n <div\r\n class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!expanded()\"\r\n [class.opacity-0]=\"!expanded()\"\r\n [class.max-w-xs]=\"expanded()\"\r\n [class.opacity-100]=\"expanded()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-8 shrink-0\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div\r\n class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n [style.color]=\"iconsColor()\"\r\n ></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div\r\n class=\"flex flex-col gap-0.5 min-w-0\"\r\n [style.color]=\"iconsColor()\"\r\n >\r\n <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n @if (subTitle()) {\r\n <span class=\"text-xs opacity-70 truncate\">{{\r\n subTitle()\r\n }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div\r\n class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n [class.pr-1]=\"expanded()\"\r\n [class.pr-px]=\"!expanded()\"\r\n >\r\n @for (item of items(); track item.id) {\r\n <a\r\n [routerLink]=\"item.routerLink\"\r\n routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n #rla=\"routerLinkActive\"\r\n class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-xl overflow-hidden\"\r\n mtTooltip=\"{{ item.title }}\"\r\n [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n >\r\n <div class=\"px-4\">\r\n <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n </div>\r\n <div\r\n class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n [class.opacity-0]=\"!expanded()\"\r\n [class.max-w-xs]=\"expanded()\"\r\n [class.opacity-100]=\"expanded()\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </a>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}