@masterteam/components 0.0.136 → 0.0.137

package/fesm2022/masterteam-components-checkbox-field.mjs

@@ -9,19 +9,19 @@ import { isInvalid } from '@masterteam/components';
 
 class CheckboxField {
     checkbox;
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-    labelPosition = input('end', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-    pInputs = input(...(ngDevMode ? [undefined, { debugName: "pInputs" }] : []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    labelPosition = input('end', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    pInputs = input(...(ngDevMode ? [undefined, { debugName: "pInputs" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     onChange = output();
     ngControl = inject(NgControl, { self: true });
     isInvalid = isInvalid;
-    isVertical = computed(() => this.labelPosition() === 'top' || this.labelPosition() === 'bottom', ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
+    isVertical = computed(() => this.labelPosition() === 'top' || this.labelPosition() === 'bottom', ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
     requiredValidator = Validators.required;
-    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     onTouched = () => { };
     onModelChange = () => { };
     constructor() {
@@ -67,10 +67,10 @@ class CheckboxField {
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CheckboxField, isStandalone: true, selector: "mt-checkbox-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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: { classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.gap-2]=\"!isVertical()\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n  [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n  [class.justify-end]=\"labelPosition() === 'start'\"\r\n>\r\n  <p-checkbox\r\n    #checkbox\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n    [binary]=\"true\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    class=\"leading-none\"\r\n  ></p-checkbox>\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\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], 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: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckboxField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CheckboxField, isStandalone: true, selector: "mt-checkbox-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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: { classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"flex gap-1\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.gap-2]=\"!isVertical()\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n  [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n  [class.justify-end]=\"labelPosition() === 'start'\"\r\n>\r\n  <p-checkbox\r\n    #checkbox\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n    [binary]=\"true\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    class=\"leading-none\"\r\n  ></p-checkbox>\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\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], 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: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckboxField, decorators: [{
             type: Component,
             args: [{ selector: 'mt-checkbox-field', standalone: true, imports: [FormsModule, CheckboxModule, FieldValidation], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'grid gap-1',

package/fesm2022/masterteam-components-checkbox-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-checkbox-field.mjs","sources":["../../../../packages/masterteam/components/checkbox-field/checkbox-field.ts","../../../../packages/masterteam/components/checkbox-field/checkbox-field.html","../../../../packages/masterteam/components/checkbox-field/masterteam-components-checkbox-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewChild,\r\n  signal,\r\n  input,\r\n  output,\r\n  inject,\r\n  ChangeDetectionStrategy,\r\n  computed,\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  CheckboxModule,\r\n  Checkbox,\r\n  CheckboxChangeEvent,\r\n} from 'primeng/checkbox';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-checkbox-field',\r\n  standalone: true,\r\n  imports: [FormsModule, CheckboxModule, FieldValidation],\r\n  templateUrl: './checkbox-field.html',\r\n  styleUrls: ['./checkbox-field.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'grid gap-1',\r\n  },\r\n})\r\nexport class CheckboxField implements ControlValueAccessor {\r\n  @ViewChild('checkbox', { static: true })\r\n  checkbox: Checkbox;\r\n\r\n  label = input<string>();\r\n  labelPosition = input<'top' | 'start' | 'end' | 'bottom'>('end');\r\n  placeholder = input<string>();\r\n  readonly = input<boolean>(false);\r\n  pInputs = input<Partial<Checkbox>>();\r\n  required = input<boolean>(false);\r\n\r\n  onChange = output<CheckboxChangeEvent>();\r\n\r\n  public ngControl = inject(NgControl, { self: true });\r\n\r\n  isInvalid = isInvalid;\r\n\r\n  isVertical = computed(\r\n    () => this.labelPosition() === 'top' || this.labelPosition() === 'bottom',\r\n  );\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<boolean | null>(null);\r\n  disabled = signal<boolean>(false);\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: boolean | null) => void = () => {};\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 checkbox ViewChild is initialized and pInputs has a value\r\n      // @ViewChild with static: true makes 'checkbox' available during construction/ngOnInit\r\n      if (this.checkbox && currentPInputs) {\r\n        this.applyInputsToCheckbox();\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    });\r\n  }\r\n\r\n  applyInputsToCheckbox() {\r\n    const currentPInputs = this.pInputs();\r\n    if (currentPInputs) {\r\n      Object.assign(this.checkbox, currentPInputs);\r\n    }\r\n  }\r\n\r\n  onValueChange(value: boolean | null) {\r\n    this.onModelChange(value);\r\n    this.value.set(value);\r\n  }\r\n\r\n  writeValue(value: boolean | 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\r\n  class=\"flex gap-1\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.gap-2]=\"!isVertical()\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n  [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n  [class.justify-end]=\"labelPosition() === 'start'\"\r\n>\r\n  <p-checkbox\r\n    #checkbox\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n    [binary]=\"true\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    class=\"leading-none\"\r\n  ></p-checkbox>\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\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-checkbox-field.mjs","sources":["../../../../packages/masterteam/components/checkbox-field/checkbox-field.ts","../../../../packages/masterteam/components/checkbox-field/checkbox-field.html","../../../../packages/masterteam/components/checkbox-field/masterteam-components-checkbox-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewChild,\r\n  signal,\r\n  input,\r\n  output,\r\n  inject,\r\n  ChangeDetectionStrategy,\r\n  computed,\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  CheckboxModule,\r\n  Checkbox,\r\n  CheckboxChangeEvent,\r\n} from 'primeng/checkbox';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-checkbox-field',\r\n  standalone: true,\r\n  imports: [FormsModule, CheckboxModule, FieldValidation],\r\n  templateUrl: './checkbox-field.html',\r\n  styleUrls: ['./checkbox-field.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'grid gap-1',\r\n  },\r\n})\r\nexport class CheckboxField implements ControlValueAccessor {\r\n  @ViewChild('checkbox', { static: true })\r\n  checkbox: Checkbox;\r\n\r\n  label = input<string>();\r\n  labelPosition = input<'top' | 'start' | 'end' | 'bottom'>('end');\r\n  placeholder = input<string>();\r\n  readonly = input<boolean>(false);\r\n  pInputs = input<Partial<Checkbox>>();\r\n  required = input<boolean>(false);\r\n\r\n  onChange = output<CheckboxChangeEvent>();\r\n\r\n  public ngControl = inject(NgControl, { self: true });\r\n\r\n  isInvalid = isInvalid;\r\n\r\n  isVertical = computed(\r\n    () => this.labelPosition() === 'top' || this.labelPosition() === 'bottom',\r\n  );\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<boolean | null>(null);\r\n  disabled = signal<boolean>(false);\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: boolean | null) => void = () => {};\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 checkbox ViewChild is initialized and pInputs has a value\r\n      // @ViewChild with static: true makes 'checkbox' available during construction/ngOnInit\r\n      if (this.checkbox && currentPInputs) {\r\n        this.applyInputsToCheckbox();\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    });\r\n  }\r\n\r\n  applyInputsToCheckbox() {\r\n    const currentPInputs = this.pInputs();\r\n    if (currentPInputs) {\r\n      Object.assign(this.checkbox, currentPInputs);\r\n    }\r\n  }\r\n\r\n  onValueChange(value: boolean | null) {\r\n    this.onModelChange(value);\r\n    this.value.set(value);\r\n  }\r\n\r\n  writeValue(value: boolean | 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\r\n  class=\"flex gap-1\"\r\n  [class.items-center]=\"!isVertical()\"\r\n  [class.gap-2]=\"!isVertical()\"\r\n  [class.flex-col]=\"isVertical()\"\r\n  [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n  [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n  [class.justify-end]=\"labelPosition() === 'start'\"\r\n>\r\n  <p-checkbox\r\n    #checkbox\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\r\n    [binary]=\"true\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    class=\"leading-none\"\r\n  ></p-checkbox>\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\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-chip.mjs

@@ -5,12 +5,12 @@ 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" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    image = input('', ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    removeIcon = input('general.x-circle', ...(ngDevMode ? [{ debugName: "removeIcon" }] : /* istanbul ignore next */ []));
+    styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     onRemove = output();
     onImageError = output();
     onChipRemove(event) {
@@ -19,10 +19,10 @@ class Chip {
     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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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"] }] } });

package/fesm2022/masterteam-components-chip.mjs.map

@@ -1 +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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"}
+{"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/fesm2022/masterteam-components-client-page-menu.mjs

@@ -6,15 +6,15 @@ import { Skeleton } from 'primeng/skeleton';
 class ClientPageMenu {
     syncFrameId = null;
     /** List of menu items to display */
-    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     /** Whether menu items are loading */
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** Currently selected menu item */
-    selectedItem = input(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    selectedItem = input(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
     /** Emitted when a menu item is clicked */
     menuItemClick = output();
-    menuContainer = viewChild('menuContainer', ...(ngDevMode ? [{ debugName: "menuContainer" }] : []));
-    menuItemElements = viewChildren('menuItem', ...(ngDevMode ? [{ debugName: "menuItemElements" }] : []));
+    menuContainer = viewChild('menuContainer', ...(ngDevMode ? [{ debugName: "menuContainer" }] : /* istanbul ignore next */ []));
+    menuItemElements = viewChildren('menuItem', ...(ngDevMode ? [{ debugName: "menuItemElements" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const selectedKey = this.selectedItem()?.key;
@@ -74,10 +74,10 @@ class ClientPageMenu {
             });
         }
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientPageMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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',

package/fesm2022/masterteam-components-client-page-menu.mjs.map

@@ -1 +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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"}
+{"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/fesm2022/masterteam-components-client-page.mjs

@@ -10,23 +10,23 @@ class ClientPage {
     platformId = inject(PLATFORM_ID);
     mediaQueryList = null;
     /** Icon for the left sidebar header */
-    menuIcon = input(...(ngDevMode ? [undefined, { debugName: "menuIcon" }] : []));
+    menuIcon = input(...(ngDevMode ? [undefined, { debugName: "menuIcon" }] : /* istanbul ignore next */ []));
     /** Title for the left sidebar header */
-    menuTitle = input(...(ngDevMode ? [undefined, { debugName: "menuTitle" }] : []));
+    menuTitle = input(...(ngDevMode ? [undefined, { debugName: "menuTitle" }] : /* istanbul ignore next */ []));
     /** List of menu items for the left sidebar */
-    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     /** Whether menu items are loading */
-    menuItemsLoading = input(false, ...(ngDevMode ? [{ debugName: "menuItemsLoading" }] : []));
+    menuItemsLoading = input(false, ...(ngDevMode ? [{ debugName: "menuItemsLoading" }] : /* istanbul ignore next */ []));
     /** Key of the active menu item (defaults to first item) */
-    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : []));
+    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : /* istanbul ignore next */ []));
     /** Whether the sidebar menu is collapsed (two-way bindable) */
-    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /** Template projected into the left sidebar header end */
-    headerEnd = contentChild('headerClientPageEnd', ...(ngDevMode ? [{ debugName: "headerEnd" }] : []));
+    headerEnd = contentChild('headerClientPageEnd', ...(ngDevMode ? [{ debugName: "headerEnd" }] : /* istanbul ignore next */ []));
     /** Emitted when a menu item is clicked */
     menuItemClick = output();
     /** Tracks activeItem input, overridable by user clicks */
-    selectedKey = linkedSignal(() => this.activeItem(), ...(ngDevMode ? [{ debugName: "selectedKey" }] : []));
+    selectedKey = linkedSignal(() => this.activeItem(), ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
     /** Currently selected menu item */
     selectedItem = computed(() => {
         const key = this.selectedKey();
@@ -35,7 +35,7 @@ class ClientPage {
             return items.find((item) => item.key === key) ?? items[0] ?? null;
         }
         return items[0] ?? null;
-    }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
     /** Whether the initial default selection has been emitted */
     initialEmitted = false;
     constructor() {
@@ -49,13 +49,13 @@ class ClientPage {
         this.setupResponsiveBehavior();
     }
     /** Whether the divider/toggle area is being hovered */
-    dividerHovered = signal(false, ...(ngDevMode ? [{ debugName: "dividerHovered" }] : []));
+    dividerHovered = signal(false, ...(ngDevMode ? [{ debugName: "dividerHovered" }] : /* istanbul ignore next */ []));
     /** Whether the viewport is at or below the responsive breakpoint */
-    isResponsive = signal(false, ...(ngDevMode ? [{ debugName: "isResponsive" }] : []));
+    isResponsive = signal(false, ...(ngDevMode ? [{ debugName: "isResponsive" }] : /* istanbul ignore next */ []));
     /** Whether the responsive top navigation is expanded */
-    responsiveMenuExpanded = signal(false, ...(ngDevMode ? [{ debugName: "responsiveMenuExpanded" }] : []));
+    responsiveMenuExpanded = signal(false, ...(ngDevMode ? [{ debugName: "responsiveMenuExpanded" }] : /* istanbul ignore next */ []));
     /** Whether the menu section is currently visible */
-    showSidebarMenu = computed(() => this.isResponsive() ? this.responsiveMenuExpanded() : !this.collapsed(), ...(ngDevMode ? [{ debugName: "showSidebarMenu" }] : []));
+    showSidebarMenu = computed(() => this.isResponsive() ? this.responsiveMenuExpanded() : !this.collapsed(), ...(ngDevMode ? [{ debugName: "showSidebarMenu" }] : /* istanbul ignore next */ []));
     /** Sidebar width reacts to collapsed + hover */
     sidebarWidth = computed(() => {
         if (this.isResponsive()) {
@@ -65,7 +65,7 @@ class ClientPage {
             return this.dividerHovered() ? '12px' : '9px';
         }
         return this.dividerHovered() ? '15.8%' : '16%';
-    }, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : /* istanbul ignore next */ []));
     /** Icon for the collapse toggle button */
     toggleIcon = computed(() => this.isResponsive()
         ? this.responsiveMenuExpanded()
@@ -73,7 +73,7 @@ class ClientPage {
             : 'arrow.chevron-down'
         : this.collapsed()
             ? 'arrow.chevron-right'
-            : 'arrow.chevron-left', ...(ngDevMode ? [{ debugName: "toggleIcon" }] : []));
+            : 'arrow.chevron-left', ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
     /** Accessible label for the toggle button */
     toggleAriaLabel = computed(() => this.isResponsive()
         ? this.responsiveMenuExpanded()
@@ -81,7 +81,7 @@ class ClientPage {
             : 'Expand menu'
         : this.collapsed()
             ? 'Expand sidebar'
-            : 'Collapse sidebar', ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : []));
+            : 'Collapse sidebar', ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
     toggleCollapsed() {
         if (this.isResponsive()) {
             this.responsiveMenuExpanded.update((expanded) => !expanded);
@@ -142,10 +142,10 @@ class ClientPage {
             this.responsiveMenuExpanded.set(false);
         }
     }
-    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\" [class.flex-col]=\"isResponsive()\">\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\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-2\">\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=\"min-w-0 truncate font-semibold\">\r\n                {{ menuTitle() }}\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          @if (isResponsive()) {\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"toggleCollapsed()\"\r\n              class=\"ml-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-primary-600 active:scale-95 active:bg-gray-100\"\r\n              [attr.aria-label]=\"toggleAriaLabel()\"\r\n            >\r\n              <mt-icon [icon]=\"toggleIcon()\" class=\"text-sm\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (showSidebarMenu()) {\r\n          <!-- Menu Items -->\r\n          <div\r\n            class=\"min-h-0 overflow-hidden\"\r\n            [class.flex-1]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"isResponsive() ? '22rem' : null\"\r\n          >\r\n            <mt-client-page-menu\r\n              class=\"h-full\"\r\n              [menuItems]=\"menuItems()\"\r\n              [selectedItem]=\"selectedItem()\"\r\n              [loading]=\"menuItemsLoading()\"\r\n              (menuItemClick)=\"selectItem($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Vertical Divider with Toggle Button -->\r\n      @if (!isResponsive()) {\r\n        <div\r\n          class=\"relative w-px flex-shrink-0\"\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 left-1/2 z-10 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 group\"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"text-xs text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\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              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n            >\r\n              <div class=\"flex min-w-0 items-center gap-3\">\r\n                @if (selectedItem(); as selected) {\r\n                  <mt-avatar\r\n                    [style]=\"getAvatarStyle(selected.color)\"\r\n                    [icon]=\"selected.icon\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                  />\r\n                  <div class=\"min-w-0\">\r\n                    <div class=\"text-md truncate font-semibold\">\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div class=\"truncate text-sm font-semibold text-gray-500\">\r\n                        {{ selected.subtitle }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n              @if (headerEnd(); as template) {\r\n                <div\r\n                  class=\"flex gap-2\"\r\n                  [class.w-full]=\"isResponsive()\"\r\n                  [class.flex-wrap]=\"isResponsive()\"\r\n                  [class.justify-end]=\"isResponsive()\"\r\n                >\r\n                  <ng-container [ngTemplateOutlet]=\"template\" />\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Content Body -->\r\n            <div\r\n              class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n            >\r\n              <ng-content />\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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\" [class.flex-col]=\"isResponsive()\">\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\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-2\">\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=\"min-w-0 truncate font-semibold\">\r\n                {{ menuTitle() }}\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          @if (isResponsive()) {\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"toggleCollapsed()\"\r\n              class=\"ml-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-primary-600 active:scale-95 active:bg-gray-100\"\r\n              [attr.aria-label]=\"toggleAriaLabel()\"\r\n            >\r\n              <mt-icon [icon]=\"toggleIcon()\" class=\"text-sm\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (showSidebarMenu()) {\r\n          <!-- Menu Items -->\r\n          <div\r\n            class=\"min-h-0 overflow-hidden\"\r\n            [class.flex-1]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"isResponsive() ? '22rem' : null\"\r\n          >\r\n            <mt-client-page-menu\r\n              class=\"h-full\"\r\n              [menuItems]=\"menuItems()\"\r\n              [selectedItem]=\"selectedItem()\"\r\n              [loading]=\"menuItemsLoading()\"\r\n              (menuItemClick)=\"selectItem($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Vertical Divider with Toggle Button -->\r\n      @if (!isResponsive()) {\r\n        <div\r\n          class=\"relative w-px flex-shrink-0\"\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 left-1/2 z-10 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 group\"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"text-xs text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\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              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n            >\r\n              <div class=\"flex min-w-0 items-center gap-3\">\r\n                @if (selectedItem(); as selected) {\r\n                  <mt-avatar\r\n                    [style]=\"getAvatarStyle(selected.color)\"\r\n                    [icon]=\"selected.icon\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                  />\r\n                  <div class=\"min-w-0\">\r\n                    <div class=\"text-md truncate font-semibold\">\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div class=\"truncate text-sm font-semibold text-gray-500\">\r\n                        {{ selected.subtitle }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n              @if (headerEnd(); as template) {\r\n                <div\r\n                  class=\"flex gap-2\"\r\n                  [class.w-full]=\"isResponsive()\"\r\n                  [class.flex-wrap]=\"isResponsive()\"\r\n                  [class.justify-end]=\"isResponsive()\"\r\n                >\r\n                  <ng-container [ngTemplateOutlet]=\"template\" />\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Content Body -->\r\n            <div\r\n              class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n            >\r\n              <ng-content />\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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',

package/fesm2022/masterteam-components-client-page.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-client-page.mjs","sources":["../../../../packages/masterteam/components/client-page/client-page.ts","../../../../packages/masterteam/components/client-page/client-page.html","../../../../packages/masterteam/components/client-page/masterteam-components-client-page.ts"],"sourcesContent":["import {\r\n  Component,\r\n  contentChild,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  linkedSignal,\r\n  model,\r\n  OnDestroy,\r\n  output,\r\n  PLATFORM_ID,\r\n  signal,\r\n  TemplateRef,\r\n} from '@angular/core';\r\nimport { isPlatformBrowser, 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 implements OnDestroy {\r\n  private readonly platformId = inject(PLATFORM_ID);\r\n  private mediaQueryList: MediaQueryList | null = null;\r\n\r\n  /** Icon for the left sidebar header */\r\n  readonly menuIcon = input<string>();\r\n\r\n  /** Title for the left sidebar header */\r\n  readonly menuTitle = input<string>();\r\n\r\n  /** List of menu items for the left sidebar */\r\n  readonly menuItems = input<ClientPageMenuItem[]>([]);\r\n\r\n  /** Whether menu items are loading */\r\n  readonly menuItemsLoading = input<boolean>(false);\r\n\r\n  /** 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    this.setupResponsiveBehavior();\r\n  }\r\n\r\n  /** Whether the divider/toggle area is being hovered */\r\n  readonly dividerHovered = signal(false);\r\n\r\n  /** Whether the viewport is at or below the responsive breakpoint */\r\n  readonly isResponsive = signal(false);\r\n\r\n  /** Whether the responsive top navigation is expanded */\r\n  readonly responsiveMenuExpanded = signal(false);\r\n\r\n  /** Whether the menu section is currently visible */\r\n  readonly showSidebarMenu = computed(() =>\r\n    this.isResponsive() ? this.responsiveMenuExpanded() : !this.collapsed(),\r\n  );\r\n\r\n  /** Sidebar width reacts to collapsed + hover */\r\n  readonly sidebarWidth = computed(() => {\r\n    if (this.isResponsive()) {\r\n      return '100%';\r\n    }\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.isResponsive()\r\n      ? this.responsiveMenuExpanded()\r\n        ? 'arrow.chevron-up'\r\n        : 'arrow.chevron-down'\r\n      : this.collapsed()\r\n        ? 'arrow.chevron-right'\r\n        : 'arrow.chevron-left',\r\n  );\r\n\r\n  /** Accessible label for the toggle button */\r\n  readonly toggleAriaLabel = computed(() =>\r\n    this.isResponsive()\r\n      ? this.responsiveMenuExpanded()\r\n        ? 'Collapse menu'\r\n        : 'Expand menu'\r\n      : this.collapsed()\r\n        ? 'Expand sidebar'\r\n        : 'Collapse sidebar',\r\n  );\r\n\r\n  toggleCollapsed(): void {\r\n    if (this.isResponsive()) {\r\n      this.responsiveMenuExpanded.update((expanded) => !expanded);\r\n      return;\r\n    }\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    if (this.isResponsive()) {\r\n      this.responsiveMenuExpanded.set(false);\r\n    }\r\n    this.menuItemClick.emit(item);\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (!this.mediaQueryList) {\r\n      return;\r\n    }\r\n\r\n    if (typeof this.mediaQueryList.removeEventListener === 'function') {\r\n      this.mediaQueryList.removeEventListener(\r\n        'change',\r\n        this.handleResponsiveBreakpointChange,\r\n      );\r\n      return;\r\n    }\r\n\r\n    this.mediaQueryList.removeListener(this.handleResponsiveBreakpointChange);\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 readonly handleResponsiveBreakpointChange = (\r\n    event: MediaQueryListEvent,\r\n  ): void => {\r\n    this.syncResponsiveState(event.matches);\r\n  };\r\n\r\n  private setupResponsiveBehavior(): void {\r\n    if (\r\n      !isPlatformBrowser(this.platformId) ||\r\n      typeof window.matchMedia !== 'function'\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    this.mediaQueryList = window.matchMedia('(max-width: 1024px)');\r\n    this.syncResponsiveState(this.mediaQueryList.matches);\r\n\r\n    if (typeof this.mediaQueryList.addEventListener === 'function') {\r\n      this.mediaQueryList.addEventListener(\r\n        'change',\r\n        this.handleResponsiveBreakpointChange,\r\n      );\r\n      return;\r\n    }\r\n\r\n    this.mediaQueryList.addListener(this.handleResponsiveBreakpointChange);\r\n  }\r\n\r\n  private syncResponsiveState(isResponsive: boolean): void {\r\n    const wasResponsive = this.isResponsive();\r\n    this.isResponsive.set(isResponsive);\r\n    this.dividerHovered.set(false);\r\n\r\n    if (wasResponsive !== isResponsive) {\r\n      this.responsiveMenuExpanded.set(false);\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\" [class.flex-col]=\"isResponsive()\">\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\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-2\">\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=\"min-w-0 truncate font-semibold\">\r\n                {{ menuTitle() }}\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          @if (isResponsive()) {\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"toggleCollapsed()\"\r\n              class=\"ml-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-primary-600 active:scale-95 active:bg-gray-100\"\r\n              [attr.aria-label]=\"toggleAriaLabel()\"\r\n            >\r\n              <mt-icon [icon]=\"toggleIcon()\" class=\"text-sm\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (showSidebarMenu()) {\r\n          <!-- Menu Items -->\r\n          <div\r\n            class=\"min-h-0 overflow-hidden\"\r\n            [class.flex-1]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"isResponsive() ? '22rem' : null\"\r\n          >\r\n            <mt-client-page-menu\r\n              class=\"h-full\"\r\n              [menuItems]=\"menuItems()\"\r\n              [selectedItem]=\"selectedItem()\"\r\n              [loading]=\"menuItemsLoading()\"\r\n              (menuItemClick)=\"selectItem($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Vertical Divider with Toggle Button -->\r\n      @if (!isResponsive()) {\r\n        <div\r\n          class=\"relative w-px flex-shrink-0\"\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 left-1/2 z-10 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 group\"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"text-xs text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\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              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n            >\r\n              <div class=\"flex min-w-0 items-center gap-3\">\r\n                @if (selectedItem(); as selected) {\r\n                  <mt-avatar\r\n                    [style]=\"getAvatarStyle(selected.color)\"\r\n                    [icon]=\"selected.icon\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                  />\r\n                  <div class=\"min-w-0\">\r\n                    <div class=\"text-md truncate font-semibold\">\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div class=\"truncate text-sm font-semibold text-gray-500\">\r\n                        {{ selected.subtitle }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n              @if (headerEnd(); as template) {\r\n                <div\r\n                  class=\"flex gap-2\"\r\n                  [class.w-full]=\"isResponsive()\"\r\n                  [class.flex-wrap]=\"isResponsive()\"\r\n                  [class.justify-end]=\"isResponsive()\"\r\n                >\r\n                  <ng-container [ngTemplateOutlet]=\"template\" />\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Content Body -->\r\n            <div\r\n              class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n            >\r\n              <ng-content />\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </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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"}
+{"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  inject,\r\n  input,\r\n  linkedSignal,\r\n  model,\r\n  OnDestroy,\r\n  output,\r\n  PLATFORM_ID,\r\n  signal,\r\n  TemplateRef,\r\n} from '@angular/core';\r\nimport { isPlatformBrowser, 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 implements OnDestroy {\r\n  private readonly platformId = inject(PLATFORM_ID);\r\n  private mediaQueryList: MediaQueryList | null = null;\r\n\r\n  /** Icon for the left sidebar header */\r\n  readonly menuIcon = input<string>();\r\n\r\n  /** Title for the left sidebar header */\r\n  readonly menuTitle = input<string>();\r\n\r\n  /** List of menu items for the left sidebar */\r\n  readonly menuItems = input<ClientPageMenuItem[]>([]);\r\n\r\n  /** Whether menu items are loading */\r\n  readonly menuItemsLoading = input<boolean>(false);\r\n\r\n  /** 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    this.setupResponsiveBehavior();\r\n  }\r\n\r\n  /** Whether the divider/toggle area is being hovered */\r\n  readonly dividerHovered = signal(false);\r\n\r\n  /** Whether the viewport is at or below the responsive breakpoint */\r\n  readonly isResponsive = signal(false);\r\n\r\n  /** Whether the responsive top navigation is expanded */\r\n  readonly responsiveMenuExpanded = signal(false);\r\n\r\n  /** Whether the menu section is currently visible */\r\n  readonly showSidebarMenu = computed(() =>\r\n    this.isResponsive() ? this.responsiveMenuExpanded() : !this.collapsed(),\r\n  );\r\n\r\n  /** Sidebar width reacts to collapsed + hover */\r\n  readonly sidebarWidth = computed(() => {\r\n    if (this.isResponsive()) {\r\n      return '100%';\r\n    }\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.isResponsive()\r\n      ? this.responsiveMenuExpanded()\r\n        ? 'arrow.chevron-up'\r\n        : 'arrow.chevron-down'\r\n      : this.collapsed()\r\n        ? 'arrow.chevron-right'\r\n        : 'arrow.chevron-left',\r\n  );\r\n\r\n  /** Accessible label for the toggle button */\r\n  readonly toggleAriaLabel = computed(() =>\r\n    this.isResponsive()\r\n      ? this.responsiveMenuExpanded()\r\n        ? 'Collapse menu'\r\n        : 'Expand menu'\r\n      : this.collapsed()\r\n        ? 'Expand sidebar'\r\n        : 'Collapse sidebar',\r\n  );\r\n\r\n  toggleCollapsed(): void {\r\n    if (this.isResponsive()) {\r\n      this.responsiveMenuExpanded.update((expanded) => !expanded);\r\n      return;\r\n    }\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    if (this.isResponsive()) {\r\n      this.responsiveMenuExpanded.set(false);\r\n    }\r\n    this.menuItemClick.emit(item);\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (!this.mediaQueryList) {\r\n      return;\r\n    }\r\n\r\n    if (typeof this.mediaQueryList.removeEventListener === 'function') {\r\n      this.mediaQueryList.removeEventListener(\r\n        'change',\r\n        this.handleResponsiveBreakpointChange,\r\n      );\r\n      return;\r\n    }\r\n\r\n    this.mediaQueryList.removeListener(this.handleResponsiveBreakpointChange);\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 readonly handleResponsiveBreakpointChange = (\r\n    event: MediaQueryListEvent,\r\n  ): void => {\r\n    this.syncResponsiveState(event.matches);\r\n  };\r\n\r\n  private setupResponsiveBehavior(): void {\r\n    if (\r\n      !isPlatformBrowser(this.platformId) ||\r\n      typeof window.matchMedia !== 'function'\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    this.mediaQueryList = window.matchMedia('(max-width: 1024px)');\r\n    this.syncResponsiveState(this.mediaQueryList.matches);\r\n\r\n    if (typeof this.mediaQueryList.addEventListener === 'function') {\r\n      this.mediaQueryList.addEventListener(\r\n        'change',\r\n        this.handleResponsiveBreakpointChange,\r\n      );\r\n      return;\r\n    }\r\n\r\n    this.mediaQueryList.addListener(this.handleResponsiveBreakpointChange);\r\n  }\r\n\r\n  private syncResponsiveState(isResponsive: boolean): void {\r\n    const wasResponsive = this.isResponsive();\r\n    this.isResponsive.set(isResponsive);\r\n    this.dividerHovered.set(false);\r\n\r\n    if (wasResponsive !== isResponsive) {\r\n      this.responsiveMenuExpanded.set(false);\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\" [class.flex-col]=\"isResponsive()\">\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\"\r\n          [class.whitespace-nowrap]=\"!isResponsive()\"\r\n        >\r\n          <div class=\"flex min-w-0 items-center gap-2\">\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=\"min-w-0 truncate font-semibold\">\r\n                {{ menuTitle() }}\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          @if (isResponsive()) {\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"toggleCollapsed()\"\r\n              class=\"ml-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-primary-600 active:scale-95 active:bg-gray-100\"\r\n              [attr.aria-label]=\"toggleAriaLabel()\"\r\n            >\r\n              <mt-icon [icon]=\"toggleIcon()\" class=\"text-sm\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (showSidebarMenu()) {\r\n          <!-- Menu Items -->\r\n          <div\r\n            class=\"min-h-0 overflow-hidden\"\r\n            [class.flex-1]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"isResponsive() ? '22rem' : null\"\r\n          >\r\n            <mt-client-page-menu\r\n              class=\"h-full\"\r\n              [menuItems]=\"menuItems()\"\r\n              [selectedItem]=\"selectedItem()\"\r\n              [loading]=\"menuItemsLoading()\"\r\n              (menuItemClick)=\"selectItem($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Vertical Divider with Toggle Button -->\r\n      @if (!isResponsive()) {\r\n        <div\r\n          class=\"relative w-px flex-shrink-0\"\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 left-1/2 z-10 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow-sm transition-all duration-200 ease-in-out hover:scale-125 hover:bg-gray-50 hover:shadow-md active:scale-95 active:bg-gray-100 group\"\r\n            [attr.aria-label]=\"toggleAriaLabel()\"\r\n          >\r\n            <mt-icon\r\n              [icon]=\"toggleIcon()\"\r\n              class=\"text-xs text-gray-500 transition-all duration-200 group-hover:animate-pulse group-hover:text-primary-600\"\r\n            />\r\n          </button>\r\n        </div>\r\n      }\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              [class.flex-col]=\"isResponsive()\"\r\n              [class.items-start]=\"isResponsive()\"\r\n              [class.gap-3]=\"isResponsive()\"\r\n            >\r\n              <div class=\"flex min-w-0 items-center gap-3\">\r\n                @if (selectedItem(); as selected) {\r\n                  <mt-avatar\r\n                    [style]=\"getAvatarStyle(selected.color)\"\r\n                    [icon]=\"selected.icon\"\r\n                    shape=\"square\"\r\n                    size=\"large\"\r\n                  />\r\n                  <div class=\"min-w-0\">\r\n                    <div class=\"text-md truncate font-semibold\">\r\n                      {{ selected.title }}\r\n                    </div>\r\n                    @if (selected.subtitle) {\r\n                      <div class=\"truncate text-sm font-semibold text-gray-500\">\r\n                        {{ selected.subtitle }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n              @if (headerEnd(); as template) {\r\n                <div\r\n                  class=\"flex gap-2\"\r\n                  [class.w-full]=\"isResponsive()\"\r\n                  [class.flex-wrap]=\"isResponsive()\"\r\n                  [class.justify-end]=\"isResponsive()\"\r\n                >\r\n                  <ng-container [ngTemplateOutlet]=\"template\" />\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Content Body -->\r\n            <div\r\n              class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-5\"\r\n            >\r\n              <ng-content />\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</mt-card>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAiCa,UAAU,CAAA;AACJ,IAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;IACzC,cAAc,GAA0B,IAAI;;IAG3C,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;IAG1B,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;AAG3B,IAAA,SAAS,GAAG,KAAK,CAAuB,EAAE,gFAAC;;AAG3C,IAAA,gBAAgB,GAAG,KAAK,CAAU,KAAK,uFAAC;;IAGxC,UAAU,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;;AAG5B,IAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;;AAGjC,IAAA,SAAS,GAAG,YAAY,CAAmB,qBAAqB,gFAAC;;IAGjE,aAAa,GAAG,MAAM,EAAsB;;IAGpC,WAAW,GAAG,YAAY,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;;AAG3D,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACpC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;QAC9B,IAAI,GAAG,EAAE;YACP,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI;QACnE;AACA,QAAA,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI;AACzB,IAAA,CAAC,mFAAC;;IAGM,cAAc,GAAG,KAAK;AAE9B,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE;AAChC,YAAA,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AAChC,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;YAC/B;AACF,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,uBAAuB,EAAE;IAChC;;AAGS,IAAA,cAAc,GAAG,MAAM,CAAC,KAAK,qFAAC;;AAG9B,IAAA,YAAY,GAAG,MAAM,CAAC,KAAK,mFAAC;;AAG5B,IAAA,sBAAsB,GAAG,MAAM,CAAC,KAAK,6FAAC;;IAGtC,eAAe,GAAG,QAAQ,CAAC,MAClC,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACxE;;AAGQ,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACpC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;AACvB,YAAA,OAAO,MAAM;QACf;AACA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,OAAO,IAAI,CAAC,cAAc,EAAE,GAAG,MAAM,GAAG,KAAK;QAC/C;AACA,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE,GAAG,OAAO,GAAG,KAAK;AAChD,IAAA,CAAC,mFAAC;;IAGO,UAAU,GAAG,QAAQ,CAAC,MAC7B,IAAI,CAAC,YAAY;AACf,UAAE,IAAI,CAAC,sBAAsB;AAC3B,cAAE;AACF,cAAE;AACJ,UAAE,IAAI,CAAC,SAAS;AACd,cAAE;cACA,oBAAoB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC3B;;IAGQ,eAAe,GAAG,QAAQ,CAAC,MAClC,IAAI,CAAC,YAAY;AACf,UAAE,IAAI,CAAC,sBAAsB;AAC3B,cAAE;AACF,cAAE;AACJ,UAAE,IAAI,CAAC,SAAS;AACd,cAAE;cACA,kBAAkB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACzB;IAED,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;AACvB,YAAA,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,CAAC,QAAQ,CAAC;YAC3D;QACF;AACA,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAClC;AAEA,IAAA,UAAU,CAAC,IAAwB,EAAA;QACjC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;AACvB,YAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC;QACxC;AACA,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;IAC/B;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB;QACF;QAEA,IAAI,OAAO,IAAI,CAAC,cAAc,CAAC,mBAAmB,KAAK,UAAU,EAAE;YACjE,IAAI,CAAC,cAAc,CAAC,mBAAmB,CACrC,QAAQ,EACR,IAAI,CAAC,gCAAgC,CACtC;YACD;QACF;QAEA,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,IAAI,CAAC,gCAAgC,CAAC;IAC3E;AAEA,IAAA,cAAc,CAAC,KAAa,EAAA;AAC1B,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACzB,OAAO;gBACL,uBAAuB,EAAE,KAAK,GAAG,IAAI;AACrC,gBAAA,kBAAkB,EAAE,KAAK;aAC1B;QACH;QACA,OAAO;YACL,uBAAuB,EAAE,CAAA,QAAA,EAAW,KAAK,CAAA,KAAA,CAAO;YAChD,kBAAkB,EAAE,CAAA,QAAA,EAAW,KAAK,CAAA,KAAA,CAAO;SAC5C;IACH;AAEiB,IAAA,gCAAgC,GAAG,CAClD,KAA0B,KAClB;AACR,QAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC;AACzC,IAAA,CAAC;IAEO,uBAAuB,GAAA;AAC7B,QAAA,IACE,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;AACnC,YAAA,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,EACvC;YACA;QACF;QAEA,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,qBAAqB,CAAC;QAC9D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;QAErD,IAAI,OAAO,IAAI,CAAC,cAAc,CAAC,gBAAgB,KAAK,UAAU,EAAE;YAC9D,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAClC,QAAQ,EACR,IAAI,CAAC,gCAAgC,CACtC;YACD;QACF;QAEA,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,gCAAgC,CAAC;IACxE;AAEQ,IAAA,mBAAmB,CAAC,YAAqB,EAAA;AAC/C,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE;AACzC,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC;AACnC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;AAE9B,QAAA,IAAI,aAAa,KAAK,YAAY,EAAE;AAClC,YAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC;QACxC;IACF;uGAxLW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCvB,64KAqIA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1GY,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,YAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,SAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAMnD,UAAU,EAAA,UAAA,EAAA,CAAA;kBATtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,CAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAEzD;AACJ,wBAAA,KAAK,EAAE,cAAc;AACtB,qBAAA,EAAA,QAAA,EAAA,64KAAA,EAAA;8uBAyBmD,qBAAqB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AExD3E;;AAEG;;;;"}