@masterteam/components 0.0.106 → 0.0.108

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-chip.mjs

@@ -0,0 +1,35 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, Component } from '@angular/core';
+import { Icon } from '@masterteam/icons';
+import * as i1 from 'primeng/chip';
+import { ChipModule } from 'primeng/chip';
+
+class Chip {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    image = input('', ...(ngDevMode ? [{ debugName: "image" }] : []));
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : {}), transform: booleanAttribute });
+    removeIcon = input('general.x-circle', ...(ngDevMode ? [{ debugName: "removeIcon" }] : []));
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    onRemove = output();
+    onImageError = output();
+    onChipRemove(event) {
+        this.onRemove.emit(event);
+    }
+    onChipImageError(event) {
+        this.onImageError.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Chip, isStandalone: true, selector: "mt-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeIcon: { classPropertyName: "removeIcon", publicName: "removeIcon", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove", onImageError: "onImageError" }, ngImport: i0, template: "<p-chip\r\n  [label]=\"label()\"\r\n  [image]=\"image()\"\r\n  [removable]=\"removable()\"\r\n  [removeIcon]=\"removeIcon()\"\r\n  [class]=\"styleClass()\"\r\n  (onRemove)=\"onChipRemove($event)\"\r\n  (onImageError)=\"onChipImageError($event)\"\r\n>\r\n  <ng-template #removeicon>\r\n    <mt-icon class=\"align-super!\" [icon]=\"removeIcon()\" />\r\n  </ng-template>\r\n  @if (icon()) {\r\n    <mt-icon #iconTemplate class=\"align-super!\" [icon]=\"icon()\" />\r\n  }\r\n</p-chip>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ChipModule }, { kind: "component", type: i1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Chip, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-chip', standalone: true, imports: [ChipModule, Icon], template: "<p-chip\r\n  [label]=\"label()\"\r\n  [image]=\"image()\"\r\n  [removable]=\"removable()\"\r\n  [removeIcon]=\"removeIcon()\"\r\n  [class]=\"styleClass()\"\r\n  (onRemove)=\"onChipRemove($event)\"\r\n  (onImageError)=\"onChipImageError($event)\"\r\n>\r\n  <ng-template #removeicon>\r\n    <mt-icon class=\"align-super!\" [icon]=\"removeIcon()\" />\r\n  </ng-template>\r\n  @if (icon()) {\r\n    <mt-icon #iconTemplate class=\"align-super!\" [icon]=\"icon()\" />\r\n  }\r\n</p-chip>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeIcon", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onImageError: [{ type: i0.Output, args: ["onImageError"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Chip };
+//# sourceMappingURL=masterteam-components-chip.mjs.map

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-chip.mjs","sources":["../../../../packages/masterteam/components/chip/chip.ts","../../../../packages/masterteam/components/chip/chip.html","../../../../packages/masterteam/components/chip/masterteam-components-chip.ts"],"sourcesContent":["import { Component, output, input, booleanAttribute } from '@angular/core';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { ChipModule } from 'primeng/chip';\r\n\r\n@Component({\r\n  selector: 'mt-chip',\r\n  standalone: true,\r\n  imports: [ChipModule, Icon],\r\n  templateUrl: './chip.html',\r\n  styleUrls: ['./chip.scss'],\r\n})\r\nexport class Chip {\r\n  readonly label = input<string>('');\r\n  readonly icon = input<MTIcon>();\r\n  readonly image = input<string>('');\r\n  readonly removable = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly removeIcon = input<MTIcon>('general.x-circle');\r\n  readonly styleClass = input<string>('');\r\n\r\n  onRemove = output<MouseEvent>();\r\n  onImageError = output<Event>();\r\n\r\n  onChipRemove(event: MouseEvent): void {\r\n    this.onRemove.emit(event);\r\n  }\r\n\r\n  onChipImageError(event: Event): void {\r\n    this.onImageError.emit(event);\r\n  }\r\n}\r\n","<p-chip\r\n  [label]=\"label()\"\r\n  [image]=\"image()\"\r\n  [removable]=\"removable()\"\r\n  [removeIcon]=\"removeIcon()\"\r\n  [class]=\"styleClass()\"\r\n  (onRemove)=\"onChipRemove($event)\"\r\n  (onImageError)=\"onChipImageError($event)\"\r\n>\r\n  <ng-template #removeicon>\r\n    <mt-icon class=\"align-super!\" [icon]=\"removeIcon()\" />\r\n  </ng-template>\r\n  @if (icon()) {\r\n    <mt-icon #iconTemplate class=\"align-super!\" [icon]=\"icon()\" />\r\n  }\r\n</p-chip>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-client-page-menu.mjs

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, viewChildren, effect, Component } from '@angular/core';
+import { Avatar } from '@masterteam/components/avatar';
+import { Skeleton } from 'primeng/skeleton';
+
+class ClientPageMenu {
+    syncFrameId = null;
+    /** List of menu items to display */
+    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    /** Whether menu items are loading */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    /** Currently selected menu item */
+    selectedItem = input(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    /** Emitted when a menu item is clicked */
+    menuItemClick = output();
+    menuContainer = viewChild('menuContainer', ...(ngDevMode ? [{ debugName: "menuContainer" }] : []));
+    menuItemElements = viewChildren('menuItem', ...(ngDevMode ? [{ debugName: "menuItemElements" }] : []));
+    constructor() {
+        effect(() => {
+            const selectedKey = this.selectedItem()?.key;
+            const itemCount = this.menuItems().length;
+            const itemElements = this.menuItemElements();
+            void selectedKey;
+            void itemCount;
+            void itemElements;
+            this.queueSelectedItemSync();
+        });
+    }
+    selectItem(item) {
+        this.menuItemClick.emit(item);
+    }
+    ngOnDestroy() {
+        if (this.syncFrameId !== null) {
+            cancelAnimationFrame(this.syncFrameId);
+        }
+    }
+    getAvatarStyle(color) {
+        if (color.startsWith('#')) {
+            return {
+                '--p-avatar-background': color + '1a',
+                '--p-avatar-color': color,
+            };
+        }
+        return {
+            '--p-avatar-background': `var(--p-${color}-100)`,
+            '--p-avatar-color': `var(--p-${color}-700)`,
+        };
+    }
+    queueSelectedItemSync() {
+        if (this.syncFrameId !== null) {
+            cancelAnimationFrame(this.syncFrameId);
+        }
+        this.syncFrameId = requestAnimationFrame(() => {
+            this.syncFrameId = null;
+            this.syncSelectedItemIntoView();
+        });
+    }
+    syncSelectedItemIntoView() {
+        const selectedItem = this.selectedItem();
+        const container = this.menuContainer()?.nativeElement;
+        if (!selectedItem || !container)
+            return;
+        const selectedElement = this.menuItemElements().find((item) => item.nativeElement.dataset['key'] === selectedItem.key)?.nativeElement;
+        if (!selectedElement)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const itemRect = selectedElement.getBoundingClientRect();
+        const topLimit = containerRect.top + 12;
+        const bottomLimit = containerRect.bottom - 56;
+        if (itemRect.top < topLimit || itemRect.bottom > bottomLimit) {
+            selectedElement.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPageMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ClientPageMenu, isStandalone: true, selector: "mt-client-page-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { classAttribute: "flex min-h-0 flex-1 overflow-hidden" }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true, isSignal: true }, { propertyName: "menuItemElements", predicate: ["menuItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu Items -->\r\n<div\r\n  #menuContainer\r\n  class=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto py-1 pb-16\"\r\n>\r\n  @if (loading()) {\r\n    <!-- Skeleton Loading -->\r\n    @for (i of [1, 2, 3, 4]; track i) {\r\n      <div class=\"px-3 py-2 w-full\">\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 rounded-lg\"\r\n          style=\"--p-skeleton-background: var(--p-surface-300)\"\r\n        >\r\n          <p-skeleton shape=\"square\" size=\"2.5rem\" borderRadius=\"8px\" />\r\n          <div class=\"flex-1 flex flex-col gap-1\">\r\n            <p-skeleton width=\"70%\" height=\"0.875rem\" />\r\n            <p-skeleton width=\"40%\" height=\"0.75rem\" />\r\n          </div>\r\n          <p-skeleton shape=\"circle\" size=\"1.5rem\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else if (menuItems().length === 0) {\r\n    <!-- Empty State -->\r\n    <div\r\n      class=\"flex flex-col items-center justify-center py-10 px-4 text-center\"\r\n    >\r\n      <div class=\"text-surface-400 text-3xl mb-3\">\r\n        <i class=\"pi pi-inbox\"></i>\r\n      </div>\r\n      <p class=\"text-sm text-surface-500 font-medium\">No data found</p>\r\n    </div>\r\n  } @else {\r\n    @for (item of menuItems(); track item.key) {\r\n      <div\r\n        #menuItem\r\n        [attr.data-key]=\"item.key\"\r\n        class=\"px-3 py-2 w-full text-start transition-colors cursor-pointer\"\r\n        (click)=\"selectItem(item)\"\r\n      >\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 transition-colors rounded-lg\"\r\n          [class]=\"\r\n            selectedItem()?.key === item.key\r\n              ? 'bg-surface-300'\r\n              : 'hover:bg-surface-100'\r\n          \"\r\n        >\r\n          <mt-avatar\r\n            [style]=\"getAvatarStyle(item.color)\"\r\n            [icon]=\"item.icon\"\r\n            shape=\"square\"\r\n            size=\"normal\"\r\n          />\r\n          <span\r\n            class=\"flex-1 text-sm font-medium\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'text-primary-700'\r\n                : 'text-surface-700'\r\n            \"\r\n          >\r\n            {{ item.title }}\r\n          </span>\r\n          <span\r\n            class=\"text-xs font-medium rounded-full px-2 py-0.5\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'bg-primary-100 text-primary-700'\r\n                : 'bg-surface-200 text-surface-600'\r\n            \"\r\n          >\r\n            {{ item.count }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\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: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPageMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-client-page-menu', standalone: true, imports: [Avatar, Skeleton], host: {
+                        class: 'flex min-h-0 flex-1 overflow-hidden',
+                    }, template: "<!-- Menu Items -->\r\n<div\r\n  #menuContainer\r\n  class=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto py-1 pb-16\"\r\n>\r\n  @if (loading()) {\r\n    <!-- Skeleton Loading -->\r\n    @for (i of [1, 2, 3, 4]; track i) {\r\n      <div class=\"px-3 py-2 w-full\">\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 rounded-lg\"\r\n          style=\"--p-skeleton-background: var(--p-surface-300)\"\r\n        >\r\n          <p-skeleton shape=\"square\" size=\"2.5rem\" borderRadius=\"8px\" />\r\n          <div class=\"flex-1 flex flex-col gap-1\">\r\n            <p-skeleton width=\"70%\" height=\"0.875rem\" />\r\n            <p-skeleton width=\"40%\" height=\"0.75rem\" />\r\n          </div>\r\n          <p-skeleton shape=\"circle\" size=\"1.5rem\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else if (menuItems().length === 0) {\r\n    <!-- Empty State -->\r\n    <div\r\n      class=\"flex flex-col items-center justify-center py-10 px-4 text-center\"\r\n    >\r\n      <div class=\"text-surface-400 text-3xl mb-3\">\r\n        <i class=\"pi pi-inbox\"></i>\r\n      </div>\r\n      <p class=\"text-sm text-surface-500 font-medium\">No data found</p>\r\n    </div>\r\n  } @else {\r\n    @for (item of menuItems(); track item.key) {\r\n      <div\r\n        #menuItem\r\n        [attr.data-key]=\"item.key\"\r\n        class=\"px-3 py-2 w-full text-start transition-colors cursor-pointer\"\r\n        (click)=\"selectItem(item)\"\r\n      >\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 transition-colors rounded-lg\"\r\n          [class]=\"\r\n            selectedItem()?.key === item.key\r\n              ? 'bg-surface-300'\r\n              : 'hover:bg-surface-100'\r\n          \"\r\n        >\r\n          <mt-avatar\r\n            [style]=\"getAvatarStyle(item.color)\"\r\n            [icon]=\"item.icon\"\r\n            shape=\"square\"\r\n            size=\"normal\"\r\n          />\r\n          <span\r\n            class=\"flex-1 text-sm font-medium\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'text-primary-700'\r\n                : 'text-surface-700'\r\n            \"\r\n          >\r\n            {{ item.title }}\r\n          </span>\r\n          <span\r\n            class=\"text-xs font-medium rounded-full px-2 py-0.5\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'bg-primary-100 text-primary-700'\r\n                : 'bg-surface-200 text-surface-600'\r\n            \"\r\n          >\r\n            {{ item.count }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], menuContainer: [{ type: i0.ViewChild, args: ['menuContainer', { isSignal: true }] }], menuItemElements: [{ type: i0.ViewChildren, args: ['menuItem', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClientPageMenu };
+//# sourceMappingURL=masterteam-components-client-page-menu.mjs.map

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-client-page-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-client-page-menu.mjs","sources":["../../../../packages/masterteam/components/client-page-menu/client-page-menu.ts","../../../../packages/masterteam/components/client-page-menu/client-page-menu.html","../../../../packages/masterteam/components/client-page-menu/masterteam-components-client-page-menu.ts"],"sourcesContent":["import {\r\n  Component,\r\n  effect,\r\n  ElementRef,\r\n  input,\r\n  OnDestroy,\r\n  output,\r\n  viewChild,\r\n  viewChildren,\r\n} from '@angular/core';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { Skeleton } from 'primeng/skeleton';\r\n\r\nexport interface ClientPageMenuItem {\r\n  icon: string;\r\n  title: string;\r\n  subtitle?: string;\r\n  color: string;\r\n  count: number;\r\n  key: string;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-client-page-menu',\r\n  standalone: true,\r\n  imports: [Avatar, Skeleton],\r\n  templateUrl: './client-page-menu.html',\r\n  host: {\r\n    class: 'flex min-h-0 flex-1 overflow-hidden',\r\n  },\r\n})\r\nexport class ClientPageMenu implements OnDestroy {\r\n  private syncFrameId: number | null = null;\r\n\r\n  /** List of menu items to display */\r\n  readonly menuItems = input<ClientPageMenuItem[]>([]);\r\n\r\n  /** Whether menu items are loading */\r\n  readonly loading = input<boolean>(false);\r\n\r\n  /** Currently selected menu item */\r\n  readonly selectedItem = input<ClientPageMenuItem | null>(null);\r\n\r\n  /** Emitted when a menu item is clicked */\r\n  readonly menuItemClick = output<ClientPageMenuItem>();\r\n\r\n  readonly menuContainer = viewChild<ElementRef<HTMLElement>>('menuContainer');\r\n  readonly menuItemElements = viewChildren<ElementRef<HTMLElement>>('menuItem');\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const selectedKey = this.selectedItem()?.key;\r\n      const itemCount = this.menuItems().length;\r\n      const itemElements = this.menuItemElements();\r\n      void selectedKey;\r\n      void itemCount;\r\n      void itemElements;\r\n      this.queueSelectedItemSync();\r\n    });\r\n  }\r\n\r\n  selectItem(item: ClientPageMenuItem): void {\r\n    this.menuItemClick.emit(item);\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.syncFrameId !== null) {\r\n      cancelAnimationFrame(this.syncFrameId);\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  private queueSelectedItemSync(): void {\r\n    if (this.syncFrameId !== null) {\r\n      cancelAnimationFrame(this.syncFrameId);\r\n    }\r\n\r\n    this.syncFrameId = requestAnimationFrame(() => {\r\n      this.syncFrameId = null;\r\n      this.syncSelectedItemIntoView();\r\n    });\r\n  }\r\n\r\n  private syncSelectedItemIntoView(): void {\r\n    const selectedItem = this.selectedItem();\r\n    const container = this.menuContainer()?.nativeElement;\r\n    if (!selectedItem || !container) return;\r\n\r\n    const selectedElement = this.menuItemElements().find(\r\n      (item) => item.nativeElement.dataset['key'] === selectedItem.key,\r\n    )?.nativeElement;\r\n    if (!selectedElement) return;\r\n\r\n    const containerRect = container.getBoundingClientRect();\r\n    const itemRect = selectedElement.getBoundingClientRect();\r\n    const topLimit = containerRect.top + 12;\r\n    const bottomLimit = containerRect.bottom - 56;\r\n\r\n    if (itemRect.top < topLimit || itemRect.bottom > bottomLimit) {\r\n      selectedElement.scrollIntoView({\r\n        block: 'nearest',\r\n        inline: 'nearest',\r\n      });\r\n    }\r\n  }\r\n}\r\n","<!-- Menu Items -->\r\n<div\r\n  #menuContainer\r\n  class=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto py-1 pb-16\"\r\n>\r\n  @if (loading()) {\r\n    <!-- Skeleton Loading -->\r\n    @for (i of [1, 2, 3, 4]; track i) {\r\n      <div class=\"px-3 py-2 w-full\">\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 rounded-lg\"\r\n          style=\"--p-skeleton-background: var(--p-surface-300)\"\r\n        >\r\n          <p-skeleton shape=\"square\" size=\"2.5rem\" borderRadius=\"8px\" />\r\n          <div class=\"flex-1 flex flex-col gap-1\">\r\n            <p-skeleton width=\"70%\" height=\"0.875rem\" />\r\n            <p-skeleton width=\"40%\" height=\"0.75rem\" />\r\n          </div>\r\n          <p-skeleton shape=\"circle\" size=\"1.5rem\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else if (menuItems().length === 0) {\r\n    <!-- Empty State -->\r\n    <div\r\n      class=\"flex flex-col items-center justify-center py-10 px-4 text-center\"\r\n    >\r\n      <div class=\"text-surface-400 text-3xl mb-3\">\r\n        <i class=\"pi pi-inbox\"></i>\r\n      </div>\r\n      <p class=\"text-sm text-surface-500 font-medium\">No data found</p>\r\n    </div>\r\n  } @else {\r\n    @for (item of menuItems(); track item.key) {\r\n      <div\r\n        #menuItem\r\n        [attr.data-key]=\"item.key\"\r\n        class=\"px-3 py-2 w-full text-start transition-colors cursor-pointer\"\r\n        (click)=\"selectItem(item)\"\r\n      >\r\n        <div\r\n          class=\"flex items-center gap-3 py-2 px-3 transition-colors rounded-lg\"\r\n          [class]=\"\r\n            selectedItem()?.key === item.key\r\n              ? 'bg-surface-300'\r\n              : 'hover:bg-surface-100'\r\n          \"\r\n        >\r\n          <mt-avatar\r\n            [style]=\"getAvatarStyle(item.color)\"\r\n            [icon]=\"item.icon\"\r\n            shape=\"square\"\r\n            size=\"normal\"\r\n          />\r\n          <span\r\n            class=\"flex-1 text-sm font-medium\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'text-primary-700'\r\n                : 'text-surface-700'\r\n            \"\r\n          >\r\n            {{ item.title }}\r\n          </span>\r\n          <span\r\n            class=\"text-xs font-medium rounded-full px-2 py-0.5\"\r\n            [class]=\"\r\n              selectedItem()?.key === item.key\r\n                ? 'bg-primary-100 text-primary-700'\r\n                : 'bg-surface-200 text-surface-600'\r\n            \"\r\n          >\r\n            {{ item.count }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\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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"}

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-client-page.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { input, model, contentChild, output, linkedSignal, computed, effect, signal, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Avatar } from '@masterteam/components/avatar';
+import { Card } from '@masterteam/components/card';
+import { ClientPageMenu } from '@masterteam/components/client-page-menu';
+import { Icon } from '@masterteam/icons';
+
+class ClientPage {
+    /** Icon for the left sidebar header */
+    menuIcon = input(...(ngDevMode ? [undefined, { debugName: "menuIcon" }] : []));
+    /** Title for the left sidebar header */
+    menuTitle = input(...(ngDevMode ? [undefined, { debugName: "menuTitle" }] : []));
+    /** List of menu items for the left sidebar */
+    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    /** Whether menu items are loading */
+    menuItemsLoading = input(false, ...(ngDevMode ? [{ debugName: "menuItemsLoading" }] : []));
+    /** Key of the active menu item (defaults to first item) */
+    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : []));
+    /** Whether the sidebar menu is collapsed (two-way bindable) */
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /** Template projected into the left sidebar header end */
+    headerEnd = contentChild('headerClientPageEnd', ...(ngDevMode ? [{ debugName: "headerEnd" }] : []));
+    /** Emitted when a menu item is clicked */
+    menuItemClick = output();
+    /** Tracks activeItem input, overridable by user clicks */
+    selectedKey = linkedSignal(() => this.activeItem(), ...(ngDevMode ? [{ debugName: "selectedKey" }] : []));
+    /** Currently selected menu item */
+    selectedItem = computed(() => {
+        const key = this.selectedKey();
+        const items = this.menuItems();
+        if (key) {
+            return items.find((item) => item.key === key) ?? items[0] ?? null;
+        }
+        return items[0] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    /** Whether the initial default selection has been emitted */
+    initialEmitted = false;
+    constructor() {
+        effect(() => {
+            const item = this.selectedItem();
+            if (item && !this.initialEmitted) {
+                this.initialEmitted = true;
+                this.menuItemClick.emit(item);
+            }
+        });
+    }
+    /** Whether the divider/toggle area is being hovered */
+    dividerHovered = signal(false, ...(ngDevMode ? [{ debugName: "dividerHovered" }] : []));
+    /** Sidebar width reacts to collapsed + hover */
+    sidebarWidth = computed(() => {
+        if (this.collapsed()) {
+            return this.dividerHovered() ? '12px' : '9px';
+        }
+        return this.dividerHovered() ? '15.8%' : '16%';
+    }, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
+    /** Icon for the collapse toggle button */
+    toggleIcon = computed(() => this.collapsed() ? 'arrow.chevron-right' : 'arrow.chevron-left', ...(ngDevMode ? [{ debugName: "toggleIcon" }] : []));
+    toggleCollapsed() {
+        this.collapsed.update((v) => !v);
+    }
+    selectItem(item) {
+        this.selectedKey.set(item.key);
+        this.menuItemClick.emit(item);
+    }
+    getAvatarStyle(color) {
+        if (color.startsWith('#')) {
+            return {
+                '--p-avatar-background': color + '1a',
+                '--p-avatar-color': color,
+            };
+        }
+        return {
+            '--p-avatar-background': `var(--p-${color}-100)`,
+            '--p-avatar-color': `var(--p-${color}-700)`,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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\">\r\n              <ng-content />\r\n            </div>\r\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-client-page', standalone: true, imports: [Avatar, Card, ClientPageMenu, Icon, NgTemplateOutlet], host: {
+                        class: 'block h-full',
+                    }, 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\">\r\n              <ng-content />\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</mt-card>\r\n" }]
+        }], 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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClientPage };
+//# sourceMappingURL=masterteam-components-client-page.mjs.map

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-client-page.mjs.map

@@ -0,0 +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\">\r\n              <ng-content />\r\n            </div>\r\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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"}

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-color-picker-field.mjs

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, signal, effect, ViewChild, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NgControl, Validators, FormsModule } from '@angular/forms';
+import * as i2 from 'primeng/colorpicker';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import { FieldValidation } from '@masterteam/components/field-validation';
+import { TextField } from '@masterteam/components/text-field';
+import { isInvalid } from '@masterteam/components';
+
+class ColorPickerField {
+    colorPicker;
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    appendTo = input('body', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    pInputs = input(...(ngDevMode ? [undefined, { debugName: "pInputs" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    onChange = output();
+    ngControl = inject(NgControl, { self: true });
+    requiredValidator = Validators.required;
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onTouched = () => { };
+    onModelChange = () => { };
+    isInvalid = isInvalid;
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        // Effect to apply pInputs reactively when the pInputs signal changes
+        effect(() => {
+            const currentPInputs = this.pInputs();
+            // Ensure colorPicker ViewChild is initialized and pInputs has a value
+            // @ViewChild with static: true makes 'colorPicker' available during construction/ngOnInit
+            if (this.colorPicker && currentPInputs) {
+                this.applyInputsToColorPicker();
+            }
+        });
+        // Effect to add required validator if required input is true
+        effect(() => {
+            if (this.ngControl.control && this.required()) {
+                this.ngControl.control.addValidators(Validators.required);
+                this.ngControl.control.updateValueAndValidity();
+            }
+            if (this.ngControl.control) {
+                this.ngControl.control.addValidators(Validators.pattern(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/));
+            }
+        });
+    }
+    applyInputsToColorPicker() {
+        const currentPInputs = this.pInputs();
+        if (currentPInputs) {
+            Object.assign(this.colorPicker, currentPInputs);
+        }
+    }
+    onValueChange(value) {
+        this.onModelChange(value);
+        this.onTouched();
+        this.value.set(value);
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ColorPickerField, isStandalone: true, selector: "mt-color-picker-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { properties: { "class": "class()" } }, viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-1 min-w-full\">\r\n  @if (label()) {\r\n    <label\r\n      [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n      [for]=\"ngControl?.name || label()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div\r\n    class=\"flex items-center hover:border-(--p-inputtext-hover-border-color)! p-inputtext\"\r\n    [class.bg-(--p-inputtext-filled-background)]=\"variant() === 'filled'\"\r\n    [class.border-(--p-inputtext-invalid-border-color)!]=\"\r\n      ngControl?.control?.invalid && ngControl?.control?.touched\r\n    \"\r\n  >\r\n    <p-colorpicker\r\n      #colorPicker=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      (onChange)=\"onChange.emit($event)\"\r\n      (blur)=\"onTouched()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n      [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n      class=\"leading-none\"\r\n      [appendTo]=\"appendTo()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n    ></p-colorpicker>\r\n    <div class=\"ms-2 w-full min-w-0\">\r\n      <mt-text-field\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        (change)=\"onChange.emit($event)\"\r\n        (blur)=\"onTouched()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n        placeholder=\"Select Color\"\r\n        class=\"leading-none p-0 input-no-border px-0 w-full\"\r\n        hint=\"Should be a hex color code, e.g. #ff5733 or #f00\"\r\n      ></mt-text-field>\r\n    </div>\r\n  </div>\r\n  <mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center}::ng-deep .input-no-border .p-component{border:none;box-shadow:none;background-color:transparent;width:100%}::ng-deep .input-no-border .p-inputgroupaddon{border-inline:none;border-block-start:none;border-block-end:none;padding:0!important}::ng-deep .input-no-border .p-inputgroupaddon:last-child{border-inline-end:none}::ng-deep .p-inputtext .p-inputtext{padding:0!important}\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: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-color-picker-field', standalone: true, imports: [FormsModule, ColorPickerModule, FieldValidation, TextField], host: {
+                        '[class]': 'class()',
+                    }, template: "<div class=\"flex flex-col gap-1 min-w-full\">\r\n  @if (label()) {\r\n    <label\r\n      [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n      [for]=\"ngControl?.name || label()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div\r\n    class=\"flex items-center hover:border-(--p-inputtext-hover-border-color)! p-inputtext\"\r\n    [class.bg-(--p-inputtext-filled-background)]=\"variant() === 'filled'\"\r\n    [class.border-(--p-inputtext-invalid-border-color)!]=\"\r\n      ngControl?.control?.invalid && ngControl?.control?.touched\r\n    \"\r\n  >\r\n    <p-colorpicker\r\n      #colorPicker=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      (onChange)=\"onChange.emit($event)\"\r\n      (blur)=\"onTouched()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n      [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n      class=\"leading-none\"\r\n      [appendTo]=\"appendTo()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n    ></p-colorpicker>\r\n    <div class=\"ms-2 w-full min-w-0\">\r\n      <mt-text-field\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        (change)=\"onChange.emit($event)\"\r\n        (blur)=\"onTouched()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n        placeholder=\"Select Color\"\r\n        class=\"leading-none p-0 input-no-border px-0 w-full\"\r\n        hint=\"Should be a hex color code, e.g. #ff5733 or #f00\"\r\n      ></mt-text-field>\r\n    </div>\r\n  </div>\r\n  <mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center}::ng-deep .input-no-border .p-component{border:none;box-shadow:none;background-color:transparent;width:100%}::ng-deep .input-no-border .p-inputgroupaddon{border-inline:none;border-block-start:none;border-block-end:none;padding:0!important}::ng-deep .input-no-border .p-inputgroupaddon:last-child{border-inline-end:none}::ng-deep .p-inputtext .p-inputtext{padding:0!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { colorPicker: [{
+                type: ViewChild,
+                args: ['colorPicker', { static: true }]
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputs", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPickerField };
+//# sourceMappingURL=masterteam-components-color-picker-field.mjs.map

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-color-picker-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-color-picker-field.mjs","sources":["../../../../packages/masterteam/components/color-picker-field/color-picker-field.ts","../../../../packages/masterteam/components/color-picker-field/color-picker-field.html","../../../../packages/masterteam/components/color-picker-field/masterteam-components-color-picker-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewChild,\r\n  signal,\r\n  input,\r\n  output,\r\n  inject,\r\n  effect,\r\n} from '@angular/core';\r\nimport {\r\n  ControlValueAccessor,\r\n  FormsModule,\r\n  NgControl,\r\n  Validators,\r\n} from '@angular/forms';\r\nimport {\r\n  ColorPickerModule,\r\n  ColorPicker,\r\n  ColorPickerChangeEvent,\r\n} from 'primeng/colorpicker';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { TextField } from '@masterteam/components/text-field';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-color-picker-field',\r\n  standalone: true,\r\n  imports: [FormsModule, ColorPickerModule, FieldValidation, TextField],\r\n  templateUrl: './color-picker-field.html',\r\n  styleUrls: ['./color-picker-field.scss'],\r\n  host: {\r\n    '[class]': 'class()',\r\n  },\r\n})\r\nexport class ColorPickerField implements ControlValueAccessor {\r\n  @ViewChild('colorPicker', { static: true })\r\n  colorPicker: ColorPicker;\r\n  label = input<string>();\r\n  appendTo = input<string>('body');\r\n  placeholder = input<string>();\r\n  class = input<string>('');\r\n  variant = input<'outlined' | 'filled'>('outlined');\r\n  readonly = input<boolean>(false);\r\n  pInputs = input<Partial<ColorPicker>>();\r\n  required = input<boolean>(false);\r\n\r\n  onChange = output<ColorPickerChangeEvent>();\r\n\r\n  public ngControl = inject(NgControl, { self: true });\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<string | null>(null);\r\n  disabled = signal<boolean>(false);\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: string | null) => void = () => {};\r\n  isInvalid = isInvalid;\r\n\r\n  constructor() {\r\n    if (this.ngControl) {\r\n      this.ngControl.valueAccessor = this;\r\n    }\r\n\r\n    // Effect to apply pInputs reactively when the pInputs signal changes\r\n    effect(() => {\r\n      const currentPInputs = this.pInputs();\r\n      // Ensure colorPicker ViewChild is initialized and pInputs has a value\r\n      // @ViewChild with static: true makes 'colorPicker' available during construction/ngOnInit\r\n      if (this.colorPicker && currentPInputs) {\r\n        this.applyInputsToColorPicker();\r\n      }\r\n    });\r\n\r\n    // Effect to add required validator if required input is true\r\n    effect(() => {\r\n      if (this.ngControl.control && this.required()) {\r\n        this.ngControl.control.addValidators(Validators.required);\r\n        this.ngControl.control.updateValueAndValidity();\r\n      }\r\n      if (this.ngControl.control) {\r\n        this.ngControl.control.addValidators(\r\n          Validators.pattern(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/),\r\n        );\r\n      }\r\n    });\r\n  }\r\n\r\n  applyInputsToColorPicker() {\r\n    const currentPInputs = this.pInputs();\r\n    if (currentPInputs) {\r\n      Object.assign(this.colorPicker, currentPInputs);\r\n    }\r\n  }\r\n\r\n  onValueChange(value: string | null) {\r\n    this.onModelChange(value);\r\n    this.onTouched();\r\n    this.value.set(value);\r\n  }\r\n\r\n  writeValue(value: string | null) {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: any) {\r\n    this.onModelChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any) {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(disabled: boolean) {\r\n    this.disabled.set(disabled);\r\n  }\r\n}\r\n","<div class=\"flex flex-col gap-1 min-w-full\">\r\n  @if (label()) {\r\n    <label\r\n      [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n      [for]=\"ngControl?.name || label()\"\r\n      >{{ label() }}</label\r\n    >\r\n  }\r\n  <div\r\n    class=\"flex items-center hover:border-(--p-inputtext-hover-border-color)! p-inputtext\"\r\n    [class.bg-(--p-inputtext-filled-background)]=\"variant() === 'filled'\"\r\n    [class.border-(--p-inputtext-invalid-border-color)!]=\"\r\n      ngControl?.control?.invalid && ngControl?.control?.touched\r\n    \"\r\n  >\r\n    <p-colorpicker\r\n      #colorPicker=\"\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"onValueChange($event)\"\r\n      (onChange)=\"onChange.emit($event)\"\r\n      (blur)=\"onTouched()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n      [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n      class=\"leading-none\"\r\n      [appendTo]=\"appendTo()\"\r\n      [invalid]=\"isInvalid(ngControl?.control)\"\r\n    ></p-colorpicker>\r\n    <div class=\"ms-2 w-full min-w-0\">\r\n      <mt-text-field\r\n        [ngModel]=\"value()\"\r\n        (ngModelChange)=\"onValueChange($event)\"\r\n        (change)=\"onChange.emit($event)\"\r\n        (blur)=\"onTouched()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n        [class.ng-invalid]=\"ngControl?.control?.invalid\"\r\n        placeholder=\"Select Color\"\r\n        class=\"leading-none p-0 input-no-border px-0 w-full\"\r\n        hint=\"Should be a hex color code, e.g. #ff5733 or #f00\"\r\n      ></mt-text-field>\r\n    </div>\r\n  </div>\r\n  <mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\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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"}

package/.codex-tmp-pack/extract/package/fesm2022/masterteam-components-confirmation.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { inject, signal, Injectable, Component } from '@angular/core';
+import { ConfirmationService as ConfirmationService$1 } from 'primeng/api';
+import { TranslocoService } from '@jsverse/transloco';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Button } from '@masterteam/components/button';
+import { Icon } from '@masterteam/icons';
+import { ConfirmPopup } from 'primeng/confirmpopup';
+
+class ConfirmationService {
+    confirmationService = inject(ConfirmationService$1);
+    transloco = inject(TranslocoService);
+    defaultConfig = {
+        header: this.transloco.translate('components.confirmation.header'),
+        message: this.transloco.translate('components.confirmation.message'),
+        icon: 'alert.alert-triangle',
+        acceptLabel: this.transloco.translate('components.confirmation.yes'),
+        rejectLabel: this.transloco.translate('components.confirmation.cancel'),
+        acceptButton: {
+            severity: 'primary',
+            variant: undefined,
+        },
+        rejectButton: {
+            severity: 'secondary',
+            variant: 'text',
+        },
+        position: 'center',
+        type: 'dialog',
+        closeOnEscape: true,
+        dismissableMask: true,
+        draggable: false,
+    };
+    popupKey = signal('', ...(ngDevMode ? [{ debugName: "popupKey" }] : []));
+    lastTarget = null;
+    confirm(config) {
+        const currentTarget = config?.event?.currentTarget;
+        this.popupKey.update((prev) => {
+            if (config.type === 'popup') {
+                if (this.lastTarget === currentTarget) {
+                    return prev || 'popup1';
+                }
+                return prev === 'popup1' ? 'popup2' : 'popup1';
+            }
+            return config.type;
+        });
+        this.lastTarget = currentTarget ?? null;
+        this.confirmationService.close();
+        const mergedConfig = {
+            ...this.defaultConfig,
+            ...config,
+            target: currentTarget,
+            key: this.popupKey(),
+        };
+        this.confirmationService.confirm(mergedConfig);
+    }
+    confirmDelete(config) {
+        this.confirm({
+            message: this.transloco.translate('components.confirmation.deleteMessage'),
+            header: this.transloco.translate('components.confirmation.deleteHeader'),
+            icon: 'general.trash-01',
+            acceptLabel: this.transloco.translate('components.confirmation.delete'),
+            rejectLabel: this.transloco.translate('components.confirmation.cancel'),
+            acceptButton: {
+                severity: 'danger',
+            },
+            ...config,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ConfirmationDialog {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: ConfirmationDialog, isStandalone: true, selector: "mt-confirmation-dialog", ngImport: i0, template: "<ng-template #popupTemplate let-key=\"key\">\r\n  <p-confirmpopup #cp [key]=\"key\">\r\n    <ng-template #headless let-data>\r\n      <div class=\"flex items-center gap-2 p-3 min-w-100\">\r\n        <div class=\"text-3xl mb-2\">\r\n          <mt-icon [icon]=\"data.icon\"></mt-icon>\r\n        </div>\r\n        <div>{{ data.message }}</div>\r\n      </div>\r\n\r\n      <div class=\"flex items-center justify-end gap-2 p-3 pt-0\">\r\n        <mt-button\r\n          [label]=\"data.acceptLabel\"\r\n          [styleClass]=\"data.acceptButtonStyleClass\"\r\n          [severity]=\"data.acceptButton.severity\"\r\n          [variant]=\"data.acceptButton.variant\"\r\n          size=\"small\"\r\n          (onClick)=\"cp.onAccept()\"\r\n        ></mt-button>\r\n        <mt-button\r\n          [label]=\"data.rejectLabel\"\r\n          [severity]=\"data.rejectButton.severity\"\r\n          [variant]=\"data.rejectButton.variant\"\r\n          size=\"small\"\r\n          (onClick)=\"cp.onReject()\"\r\n        ></mt-button>\r\n      </div>\r\n    </ng-template>\r\n  </p-confirmpopup>\r\n</ng-template>\r\n\r\n<ng-container\r\n  *ngTemplateOutlet=\"popupTemplate; context: { key: 'popup1' }\"\r\n></ng-container>\r\n<ng-container\r\n  *ngTemplateOutlet=\"popupTemplate; context: { key: 'popup2' }\"\r\n></ng-container>\r\n\r\n<p-confirmdialog [key]=\"'dialog'\">\r\n  <ng-template\r\n    #headless\r\n    let-data\r\n    let-onAccept=\"onAccept\"\r\n    let-onReject=\"onReject\"\r\n  >\r\n    <div\r\n      class=\"flex items-center justify-between bg-surface-100 rounded-t-xl px-4 py-2\"\r\n    >\r\n      <div class=\"text-xl font-semibold\">{{ data.header }}</div>\r\n      <mt-button\r\n        [icon]=\"'general.x-close'\"\r\n        variant=\"text\"\r\n        severity=\"secondary\"\r\n        styleClass=\"text-8xl\"\r\n        size=\"large\"\r\n        (onClick)=\"onReject()\"\r\n      ></mt-button>\r\n    </div>\r\n\r\n    <div class=\"flex items-center gap-2 p-4 min-w-100\">\r\n      <div class=\"text-3xl mb-2\">\r\n        <mt-icon [icon]=\"data.icon\"></mt-icon>\r\n      </div>\r\n      <div>{{ data.message }}</div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end gap-2 mt-2 p-4\">\r\n      <mt-button\r\n        [label]=\"data.acceptLabel\"\r\n        [styleClass]=\"data.acceptButtonStyleClass\"\r\n        [severity]=\"data.acceptButton.severity\"\r\n        [variant]=\"data.acceptButton.variant\"\r\n        (onClick)=\"onAccept()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        [label]=\"data.rejectLabel\"\r\n        [severity]=\"data.rejectButton.severity\"\r\n        [variant]=\"data.rejectButton.variant\"\r\n        (onClick)=\"onReject()\"\r\n      ></mt-button>\r\n    </div>\r\n  </ng-template>\r\n</p-confirmdialog>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { 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: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: ConfirmPopup, selector: "p-confirmpopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible", "motionOptions", "appendTo"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-confirmation-dialog', standalone: true, imports: [CommonModule, ConfirmDialog, Button, Icon, ConfirmPopup], template: "<ng-template #popupTemplate let-key=\"key\">\r\n  <p-confirmpopup #cp [key]=\"key\">\r\n    <ng-template #headless let-data>\r\n      <div class=\"flex items-center gap-2 p-3 min-w-100\">\r\n        <div class=\"text-3xl mb-2\">\r\n          <mt-icon [icon]=\"data.icon\"></mt-icon>\r\n        </div>\r\n        <div>{{ data.message }}</div>\r\n      </div>\r\n\r\n      <div class=\"flex items-center justify-end gap-2 p-3 pt-0\">\r\n        <mt-button\r\n          [label]=\"data.acceptLabel\"\r\n          [styleClass]=\"data.acceptButtonStyleClass\"\r\n          [severity]=\"data.acceptButton.severity\"\r\n          [variant]=\"data.acceptButton.variant\"\r\n          size=\"small\"\r\n          (onClick)=\"cp.onAccept()\"\r\n        ></mt-button>\r\n        <mt-button\r\n          [label]=\"data.rejectLabel\"\r\n          [severity]=\"data.rejectButton.severity\"\r\n          [variant]=\"data.rejectButton.variant\"\r\n          size=\"small\"\r\n          (onClick)=\"cp.onReject()\"\r\n        ></mt-button>\r\n      </div>\r\n    </ng-template>\r\n  </p-confirmpopup>\r\n</ng-template>\r\n\r\n<ng-container\r\n  *ngTemplateOutlet=\"popupTemplate; context: { key: 'popup1' }\"\r\n></ng-container>\r\n<ng-container\r\n  *ngTemplateOutlet=\"popupTemplate; context: { key: 'popup2' }\"\r\n></ng-container>\r\n\r\n<p-confirmdialog [key]=\"'dialog'\">\r\n  <ng-template\r\n    #headless\r\n    let-data\r\n    let-onAccept=\"onAccept\"\r\n    let-onReject=\"onReject\"\r\n  >\r\n    <div\r\n      class=\"flex items-center justify-between bg-surface-100 rounded-t-xl px-4 py-2\"\r\n    >\r\n      <div class=\"text-xl font-semibold\">{{ data.header }}</div>\r\n      <mt-button\r\n        [icon]=\"'general.x-close'\"\r\n        variant=\"text\"\r\n        severity=\"secondary\"\r\n        styleClass=\"text-8xl\"\r\n        size=\"large\"\r\n        (onClick)=\"onReject()\"\r\n      ></mt-button>\r\n    </div>\r\n\r\n    <div class=\"flex items-center gap-2 p-4 min-w-100\">\r\n      <div class=\"text-3xl mb-2\">\r\n        <mt-icon [icon]=\"data.icon\"></mt-icon>\r\n      </div>\r\n      <div>{{ data.message }}</div>\r\n    </div>\r\n\r\n    <div class=\"flex items-center justify-end gap-2 mt-2 p-4\">\r\n      <mt-button\r\n        [label]=\"data.acceptLabel\"\r\n        [styleClass]=\"data.acceptButtonStyleClass\"\r\n        [severity]=\"data.acceptButton.severity\"\r\n        [variant]=\"data.acceptButton.variant\"\r\n        (onClick)=\"onAccept()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        [label]=\"data.rejectLabel\"\r\n        [severity]=\"data.rejectButton.severity\"\r\n        [variant]=\"data.rejectButton.variant\"\r\n        (onClick)=\"onReject()\"\r\n      ></mt-button>\r\n    </div>\r\n  </ng-template>\r\n</p-confirmdialog>\r\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfirmationDialog, ConfirmationService };
+//# sourceMappingURL=masterteam-components-confirmation.mjs.map