cloud-ide-layout 1.0.102 → 1.0.105

package/fesm2022/{cloud-ide-layout-drawer-theme.component-p3f5b-1-.mjs → cloud-ide-layout-drawer-theme.component-Cht8K9ql.mjs}

@@ -4,7 +4,7 @@ import { inject, PLATFORM_ID, Inject, Component } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { CideSelectComponent, CideEleButtonComponent } from 'cloud-ide-element';
-import { A as AppStateHelperService, s as setCSSVariable, d as CideLytThemeService } from './cloud-ide-layout-cloud-ide-layout-zxDOzv0V.mjs';
+import { A as AppStateHelperService, s as setCSSVariable, d as CideLytThemeService } from './cloud-ide-layout-cloud-ide-layout-BamR8RAT.mjs';
 import _, { cloneDeep, isEqual } from 'lodash';
 
 class CideLytDrawerThemeComponent {
@@ -301,4 +301,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }] }] });
 
 export { CideLytDrawerThemeComponent };
-//# sourceMappingURL=cloud-ide-layout-drawer-theme.component-p3f5b-1-.mjs.map
+//# sourceMappingURL=cloud-ide-layout-drawer-theme.component-Cht8K9ql.mjs.map

package/fesm2022/{cloud-ide-layout-drawer-theme.component-p3f5b-1-.mjs.map → cloud-ide-layout-drawer-theme.component-Cht8K9ql.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cloud-ide-layout-drawer-theme.component-p3f5b-1-.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.ts","../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.html"],"sourcesContent":["import { NgFor, NgIf } from '@angular/common';\nimport { NgClass } from '@angular/common';\nimport { Component, OnInit, PLATFORM_ID, Inject, inject } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CideSelectComponent, SelectOption, CideEleButtonComponent } from 'cloud-ide-element';\nimport { CideLytThemeService, Theme, setCSSVariable } from '../../../services/theme/theme.service';\nimport type { MSystemThemeUserPreferencesRequest, SystemThemesListControllerRespoonse, SystemThemeUserPreferencesControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { SystemThemeControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { ICoreSyth, ICoreSyoth, ICoreSyupth } from 'cloud-ide-lms-model';\nimport { isEqual, cloneDeep } from 'lodash';\nimport _ from 'lodash';\nimport { AppStateHelperService } from '../../../services/app-state';\n\ninterface ThemeColor {\n  label: string;\n  varName: string;\n  value: string;\n}\n\ninterface TypographySetting {\n  label: string;\n  varName: string;\n  value: string;\n  type: 'number' | 'text';\n  min?: number;\n  max?: number;\n}\n\ntype ThemeGroup = {\n  label: string;\n  items: Array<{\n    label: string;\n    varName: string;\n    value: string;\n    type: 'number' | 'text';\n    min?: number;\n    max?: number;\n  }>;\n};\n\n@Component({\n  selector: 'cide-lyt-drawer-theme',\n  standalone: true,\n  imports: [FormsModule, NgFor, NgIf, NgClass, CideSelectComponent, CideEleButtonComponent],\n  templateUrl: './drawer-theme.component.html',\n  styleUrl: './drawer-theme.component.scss'\n})\nexport class CideLytDrawerThemeComponent implements OnInit {\n  private readonly appState = inject(AppStateHelperService);\n  // Preset themes\n  presetThemes: { value: string, label: string, theme: ICoreSyth }[] = [];\n  selectedTheme = '';\n  isLoadingThemes = false;\n  themeLoadError = '';\n  mergedTheme: { [key: string]: string } = {};\n  isRTL = false;\n  originalThemeGroupValues: ThemeGroup[] = [];\n  originalApiThemeValues: { [key: string]: string } = {}; // Store original API values\n\n  themeGroups: ThemeGroup[] = [\n    {\n      label: 'Brand Colors',\n      items: [\n        { label: 'Primary', varName: '--cide-theme-color-brand-primary', value: '#4f46e5', type: 'text' },\n        { label: 'Accent', varName: '--cide-theme-color-brand-accent', value: '#4338ca', type: 'text' },\n        { label: 'Separator', varName: '--cide-theme-color-brand-separator', value: '#e5e7eb', type: 'text' }\n      ]\n    },\n    {\n      label: 'Text Colors',\n      items: [\n        { label: 'Body Text', varName: '--cide-theme-color-text-body', value: '#374151', type: 'text' },\n        { label: 'Heading Text', varName: '--cide-theme-color-text-heading', value: '#111827', type: 'text' },\n        { label: 'Link Text', varName: '--cide-theme-color-text-link', value: '#3b82f6', type: 'text' },\n        { label: 'Muted Text', varName: '--cide-theme-color-text-muted', value: '#6b7280', type: 'text' }\n      ]\n    },\n    {\n      label: 'Background Colors',\n      items: [\n        { label: 'Body Background', varName: '--cide-theme-color-background-body', value: '#ffffff', type: 'text' }\n      ]\n    },\n    {\n      label: 'Layout Dimensions',\n      items: [\n        { label: 'Stack Wrapper Width', varName: '--cide-lyt-stack-wrapper-width', value: '60', type: 'number', min: 20, max: 120 }\n      ]\n    },\n    {\n      label: 'Font Sizes',\n      items: [\n        { label: 'XXXL Font Size', varName: '--cide-theme-font-size-xxxl', value: '3.052', type: 'number', min: 1, max: 10 },\n        { label: 'XXL Font Size', varName: '--cide-theme-font-size-xxl', value: '2.441', type: 'number', min: 1, max: 10 },\n        { label: 'XL Font Size', varName: '--cide-theme-font-size-xl', value: '1.953', type: 'number', min: 1, max: 10 },\n        { label: 'LG Font Size', varName: '--cide-theme-font-size-lg', value: '1.563', type: 'number', min: 1, max: 10 },\n        { label: 'MD Font Size', varName: '--cide-theme-font-size-md', value: '1.25', type: 'number', min: 1, max: 10 },\n        { label: 'Paragraph Font Size', varName: '--cide-theme-font-size-p', value: '1', type: 'number', min: 0.5, max: 5 },\n        { label: 'SM Font Size', varName: '--cide-theme-font-size-sm', value: '0.9', type: 'number', min: 0.5, max: 5 },\n        { label: 'XS Font Size', varName: '--cide-theme-font-size-xs', value: '0.8', type: 'number', min: 0.5, max: 5 }\n      ]\n    },\n    {\n      label: 'Line Heights',\n      items: [\n        { label: 'Body Line Height', varName: '--cide-theme-line-height-body', value: '1.6', type: 'number', min: 1, max: 3 },\n        { label: 'Heading Line Height', varName: '--cide-theme-line-height-heading', value: '1.2', type: 'number', min: 1, max: 3 }\n      ]\n    }\n  ];\n\n  constructor(\n    private themeService: CideLytThemeService,\n    @Inject(PLATFORM_ID) private platformId: object\n  ) { }\n\n  ngOnInit(): void {\n    // Modern Angular v20 pattern: Use Signals directly\n    this.selectedTheme = this.themeService.selectedTheme();\n\n    // fetch the system themes list\n    this.isLoadingThemes = true;\n    this.themeService.fetchSystemThemesList().subscribe({\n      next: (res: SystemThemesListControllerRespoonse) => {\n        const themes: ICoreSyth[] = res?.data?.core_system_themes || [];\n        this.presetThemes = themes.map((theme: ICoreSyth) => ({\n          value: theme._id || '',\n          label: theme.syth_theme_name || theme.syth_theme_id || '',\n          theme\n        }));\n        this.isLoadingThemes = false;\n        // If user has no theme set, select and apply the default theme\n        if (!this.selectedTheme) {\n          const defaultTheme = this.presetThemes.find(t => t.theme.syth_is_default);\n          if (defaultTheme) {\n            this.selectedTheme = defaultTheme.value;\n            // Apply the default theme as CSS variables\n            if (defaultTheme.theme.syth_properties) {\n              Object.entries(defaultTheme.theme.syth_properties).forEach(([varName, value]) => {\n                this.updateVar(varName, value as string);\n              });\n            }\n          }\n        }\n      },\n      error: () => {\n        this.themeLoadError = 'Failed to load themes';\n        this.isLoadingThemes = false;\n      }\n    });\n    this.loadAndApplyUserTheme();\n  }\n\n  loadAndApplyUserTheme(): void {\n    this.themeService.loadTheme().subscribe({\n      next: (res: SystemThemeControllerRespoonse) => {\n        const base: ICoreSyth | undefined = res?.data?.core_system_themes;\n        const org: ICoreSyoth | undefined = res?.data?.core_system_organization_themes;\n        const user: ICoreSyupth | undefined = res?.data?.core_system_theme_user_preferences;\n        // Start with base theme properties\n        let merged = { ...(base?.syth_properties || {}) };\n        // Override with org overrides\n        if (org?.syoth_overrides) {\n          merged = { ...merged, ...org.syoth_overrides };\n        }\n        // Override with user overrides\n        if (user?.syupth_overrides) {\n          merged = { ...merged, ...user.syupth_overrides };\n        }\n        this.mergedTheme = merged;\n\n        // Store original API values for reset functionality\n        this.originalApiThemeValues = { ...merged };\n\n        // Apply merged theme as CSS variables\n        Object.entries(this.mergedTheme).forEach(([varName, value]) => {\n          this.updateVar(varName, value as string);\n        });\n\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = merged[item.varName] || merged[key] || item.value;\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      },\n      error: () => {\n        // handle error if needed\n      }\n    });\n  }\n\n  // Update CSS variable in real time\n  updateVar(varName: string, value: string) {\n    // You can use either the utility function directly or the service method\n    setCSSVariable(varName, value, this.platformId);\n    // Alternative: this.themeService.updateCSSVariable(varName, value);\n  }\n\n  onThemeModelChange(value: string | number | string[]): void {\n    this.selectedTheme = value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected) {\n      this.onThemeChange({ value: this.selectedTheme, label: selected.label });\n    }\n  }\n\n  onThemeChange(event: SelectOption) {\n    this.selectedTheme = event.value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected && selected.theme && selected.theme.syth_properties) {\n      // here we will check the theme selected by organization is same if yes then overide also for user preferences\n      if (this.themeService.selectedTheme() === selected.theme._id) {\n        this.loadAndApplyUserTheme();\n      } else {\n        // Store original API values for the selected theme\n        this.originalApiThemeValues = _.cloneDeep(selected.theme.syth_properties);\n\n        // Update all group values from the selected theme\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = selected.theme.syth_properties[item.varName] ||\n              selected.theme.syth_properties[key] ||\n              item.value;\n\n            this.updateVar(item.varName, item.value);\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      }\n    }\n  }\n\n  onReset() {\n    // Restore all values from the original API values\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        // Get the original API value\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key] ||\n          item.value;\n\n        // Update the item value\n        item.value = originalValue;\n\n        // Apply the CSS variable\n        this.updateVar(item.varName, item.value);\n\n        if (key.includes('font_size') || key.includes('line_height')) {\n          item.value = parseFloat(item.value) as unknown as string;\n        }\n      }\n    }\n\n    // Update the originalThemeGroupValues to reflect the reset state\n    this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n  }\n\n  onSave() {\n    // Collect all current values\n    const themeVars: Theme = {\n\n    };\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        themeVars[item.varName?.replaceAll('-', '_')] = item.value;\n      }\n    }\n\n    const systemThemePreferences: MSystemThemeUserPreferencesRequest = {\n      syupth_overrides: {\n        ...themeVars\n      },\n      syupth_system_theme_id_syth: this.selectedTheme, // LATER: need to upadate LATER\n      syupth_user_id_user: this.appState.currentUser()?._id || '', // LATER: need to get user id from user\n      syupth_entity_id_syen: this.appState.getActiveEntityId() || '', // LATER: need to get entity id from user\n      syth_theme_id: \"\" // need to upadate LATER\n    };\n\n    // TODO: Send themeVars to backend or emit event by designConfigRoutesUrl?.systemThemeUserPreferences\n    this.themeService.saveSystemThemeUserPreferences(systemThemePreferences).subscribe({\n      next: (res: SystemThemeUserPreferencesControllerRespoonse) => {\n        console.log('Theme saved:', res);\n        // Modern Angular v20 pattern: Update Signal through service method\n        // Note: The theme service should provide a method to update the selected theme\n        // For now, we'll just log the change since the service doesn't expose a setter\n        console.log('Theme selected:', this.selectedTheme);\n      },\n      error: (error) => {\n        console.error('Error saving theme:', error);\n      }\n    });\n  }\n\n  hasUnsavedChanges(): boolean {\n    // chec selected theme is different\n    if (this.themeService.selectedTheme() !== this.selectedTheme) {\n      return true;\n    }\n    // check the theme groups are different\n    return !isEqual(this.themeGroups, this.originalThemeGroupValues);\n  }\n\n  /**\n   * Check if current values differ from the original API values\n   * This is useful for determining if reset should be enabled\n   */\n  hasChangesFromOriginal(): boolean {\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key];\n\n        if (originalValue !== undefined && item.value !== originalValue) {\n          return true;\n        }\n      }\n    }\n    return false;\n  }\n\n  onColorChange(event: Event, color: ThemeColor) {\n    const input = event.target as HTMLInputElement;\n    color.value = input.value;\n    this.updateVar(color.varName, color.value);\n  }\n\n  onTypographyChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    this.updateVar(setting.varName, setting.type === 'number' ? setting.value : setting.value);\n  }\n\n  onLayoutChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    // For layout dimensions, append 'px' unit to the value\n    this.updateVar(setting.varName, setting.value + 'px');\n  }\n\n  onDirectionToggle(event: Event) {\n    this.isRTL = (event.target as HTMLInputElement).checked;\n    document.documentElement.dir = this.isRTL ? 'rtl' : 'ltr';\n  }\n}\n","<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\n  <!-- STICKY HEADER SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-top-0 tw-border-b tw-border-gray-200 tw-z-10 tw-flex-shrink-0\">\n    <!-- DYNAMIC HEADING -->\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">Preset Theme</h6>\n    </div>\n  </div>\n\n  <!-- SCROLLABLE CONTENT AREA -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-scroll-smooth tw-p-2 tw-flex tw-flex-col tw-gap-5 tw-text-sm tw-pb-3 theme-scroll-container\">\n    <!-- Preset Theme -->\n    <section>\n      <cide-ele-select id=\"theme-selector\" [ngModel]=\"selectedTheme\" (ngModelChange)=\"onThemeModelChange($event)\"\n        [options]=\"presetThemes\" [size]=\"'sm'\"></cide-ele-select>\n    </section>\n\n    <!-- Direction Toggle -->\n    <section>\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-2\">\n        <h2 class=\"tw-text-md tw-font-semibold tw-text-gray-800\">Text Direction</h2>\n        <div class=\"tw-flex tw-items-center tw-gap-1\">\n          <span class=\"tw-text-xs tw-text-gray-500\">LTR</span>\n          <label for=\"direction-toggle\" class=\"tw-relative tw-inline-block tw-w-9 tw-h-5\">\n            <input type=\"checkbox\" id=\"direction-toggle\" class=\"tw-opacity-0 tw-w-0 tw-h-0\" [(ngModel)]=\"isRTL\"\n              (change)=\"onDirectionToggle($event)\">\n            <span\n              class=\"tw-absolute tw-cursor-pointer tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-bg-gray-300 tw-rounded-full tw-transition-colors checked:tw-bg-blue-500 before:tw-absolute before:tw-content-[''] before:tw-h-4 before:tw-w-4 before:tw-left-0.5 before:tw-bottom-0.5 before:tw-bg-white before:tw-rounded-full before:tw-transition-transform checked:before:tw-translate-x-4\"></span>\n          </label>\n          <span class=\"tw-text-xs tw-text-gray-500\">RTL</span>\n        </div>\n      </div>\n    </section>\n\n    <!-- Theme Property Groups (Brand, Text, Background, Font Sizes, Line Heights) -->\n    <section *ngFor=\"let group of themeGroups\" class=\"theme-section\">\n      <h2 class=\"tw-text-md tw-font-semibold tw-mb-2 tw-text-gray-800\">{{ group.label }}</h2>\n      <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-gap-x-4\">\n        <div *ngFor=\"let item of group.items\"\n          class=\"tw-flex tw-items-center tw-gap-2 tw-p-1 tw-rounded-lg tw-bg-gray-50\"\n          [ngClass]=\"{'tw-flex-col tw-items-stretch': (group.label === 'Font Sizes' || group.label === 'Line Heights' || group.label === 'Layout Dimensions')}\">\n          <!-- Font Sizes: label on top, input in middle, unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Font Sizes'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.001\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">rem</span>\n            </div>\n          </ng-container>\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Font Sizes' && group.label !== 'Line Heights' && group.label !== 'Layout Dimensions'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>"],"names":[],"mappings":";;;;;;;;;MA+Ca,2BAA2B,CAAA;AAiE5B,IAAA,YAAA;AACqB,IAAA,UAAA;AAjEd,IAAA,QAAQ,GAAG,MAAM,CAAC,qBAAqB,CAAC;;IAEzD,YAAY,GAAyD,EAAE;IACvE,aAAa,GAAG,EAAE;IAClB,eAAe,GAAG,KAAK;IACvB,cAAc,GAAG,EAAE;IACnB,WAAW,GAA8B,EAAE;IAC3C,KAAK,GAAG,KAAK;IACb,wBAAwB,GAAiB,EAAE;AAC3C,IAAA,sBAAsB,GAA8B,EAAE,CAAC;AAEvD,IAAA,WAAW,GAAiB;AAC1B,QAAA;AACE,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,KAAK,EAAE;AACL,gBAAA,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,kCAAkC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;AACjG,gBAAA,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;AAC/F,gBAAA,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,oCAAoC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM;AACpG;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,aAAa;AACpB,YAAA,KAAK,EAAE;AACL,gBAAA,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,8BAA8B,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;AAC/F,gBAAA,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;AACrG,gBAAA,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,8BAA8B,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE;AAC/F,gBAAA,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,+BAA+B,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM;AAChG;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,mBAAmB;AAC1B,YAAA,KAAK,EAAE;AACL,gBAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,oCAAoC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM;AAC1G;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,mBAAmB;AAC1B,YAAA,KAAK,EAAE;gBACL,EAAE,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAE,gCAAgC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG;AAC1H;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,KAAK,EAAE;gBACL,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,6BAA6B,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;gBACpH,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,4BAA4B,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;gBAClH,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,2BAA2B,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;gBAChH,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,2BAA2B,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;gBAChH,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,2BAA2B,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;gBAC/G,EAAE,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAE,0BAA0B,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE;gBACnH,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE;gBAC/G,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC9G;AACF,SAAA;AACD,QAAA;AACE,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,KAAK,EAAE;gBACL,EAAE,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,+BAA+B,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE;gBACrH,EAAE,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAE,kCAAkC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;AAC1H;AACF;KACF;IAED,WAAA,CACU,YAAiC,EACZ,UAAkB,EAAA;QADvC,IAAA,CAAA,YAAY,GAAZ,YAAY;QACS,IAAA,CAAA,UAAU,GAAV,UAAU;;IAGzC,QAAQ,GAAA;;QAEN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;;AAGtD,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC,SAAS,CAAC;AAClD,YAAA,IAAI,EAAE,CAAC,GAAwC,KAAI;gBACjD,MAAM,MAAM,GAAgB,GAAG,EAAE,IAAI,EAAE,kBAAkB,IAAI,EAAE;AAC/D,gBAAA,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAgB,MAAM;AACpD,oBAAA,KAAK,EAAE,KAAK,CAAC,GAAG,IAAI,EAAE;oBACtB,KAAK,EAAE,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,aAAa,IAAI,EAAE;oBACzD;AACD,iBAAA,CAAC,CAAC;AACH,gBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;AAE5B,gBAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACvB,oBAAA,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC;oBACzE,IAAI,YAAY,EAAE;AAChB,wBAAA,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,KAAK;;AAEvC,wBAAA,IAAI,YAAY,CAAC,KAAK,CAAC,eAAe,EAAE;AACtC,4BAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,KAAI;AAC9E,gCAAA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAe,CAAC;AAC1C,6BAAC,CAAC;;;;aAIT;YACD,KAAK,EAAE,MAAK;AACV,gBAAA,IAAI,CAAC,cAAc,GAAG,uBAAuB;AAC7C,gBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;AAE/B,SAAA,CAAC;QACF,IAAI,CAAC,qBAAqB,EAAE;;IAG9B,qBAAqB,GAAA;AACnB,QAAA,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,SAAS,CAAC;AACtC,YAAA,IAAI,EAAE,CAAC,GAAmC,KAAI;AAC5C,gBAAA,MAAM,IAAI,GAA0B,GAAG,EAAE,IAAI,EAAE,kBAAkB;AACjE,gBAAA,MAAM,GAAG,GAA2B,GAAG,EAAE,IAAI,EAAE,+BAA+B;AAC9E,gBAAA,MAAM,IAAI,GAA4B,GAAG,EAAE,IAAI,EAAE,kCAAkC;;AAEnF,gBAAA,IAAI,MAAM,GAAG,EAAE,IAAI,IAAI,EAAE,eAAe,IAAI,EAAE,CAAC,EAAE;;AAEjD,gBAAA,IAAI,GAAG,EAAE,eAAe,EAAE;oBACxB,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,GAAG,CAAC,eAAe,EAAE;;;AAGhD,gBAAA,IAAI,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE;;AAElD,gBAAA,IAAI,CAAC,WAAW,GAAG,MAAM;;AAGzB,gBAAA,IAAI,CAAC,sBAAsB,GAAG,EAAE,GAAG,MAAM,EAAE;;AAG3C,gBAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,KAAI;AAC5D,oBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAe,CAAC;AAC1C,iBAAC,CAAC;AAEF,gBAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE;AACpC,oBAAA,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AAC9B,wBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;AAC3C,wBAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK;AAE9D,wBAAA,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;4BAC5D,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAsB;;;;;gBAK9D,IAAI,CAAC,wBAAwB,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;aAC5D;YACD,KAAK,EAAE,MAAK;;;AAGb,SAAA,CAAC;;;IAIJ,SAAS,CAAC,OAAe,EAAE,KAAa,EAAA;;QAEtC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;;;AAIjD,IAAA,kBAAkB,CAAC,KAAiC,EAAA;AAClD,QAAA,IAAI,CAAC,aAAa,GAAG,KAAe;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC;QAC5E,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC;;;AAI5E,IAAA,aAAa,CAAC,KAAmB,EAAA;AAC/B,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAe;QAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC;AAC5E,QAAA,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,eAAe,EAAE;;AAEhE,YAAA,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE;gBAC5D,IAAI,CAAC,qBAAqB,EAAE;;iBACvB;;AAEL,gBAAA,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC;;AAGzE,gBAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE;AACpC,oBAAA,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AAC9B,wBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;AAC3C,wBAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;AACvD,4BAAA,QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC;4BACnC,IAAI,CAAC,KAAK;wBAEZ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;AAExC,wBAAA,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;4BAC5D,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAsB;;;;;gBAK9D,IAAI,CAAC,wBAAwB,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;;;;IAKjE,OAAO,GAAA;;AAEL,QAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE;AACpC,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AAC9B,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;;gBAE3C,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7D,oBAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC;oBAChC,IAAI,CAAC,KAAK;;AAGZ,gBAAA,IAAI,CAAC,KAAK,GAAG,aAAa;;gBAG1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;AAExC,gBAAA,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;oBAC5D,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAsB;;;;;QAM9D,IAAI,CAAC,wBAAwB,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG7D,MAAM,GAAA;;QAEJ,MAAM,SAAS,GAAU,EAExB;AACD,QAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE;AACpC,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AAC9B,gBAAA,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK;;;AAI9D,QAAA,MAAM,sBAAsB,GAAuC;AACjE,YAAA,gBAAgB,EAAE;AAChB,gBAAA,GAAG;AACJ,aAAA;AACD,YAAA,2BAA2B,EAAE,IAAI,CAAC,aAAa;AAC/C,YAAA,mBAAmB,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,GAAG,IAAI,EAAE;YAC3D,qBAAqB,EAAE,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,IAAI,EAAE;YAC9D,aAAa,EAAE,EAAE;SAClB;;QAGD,IAAI,CAAC,YAAY,CAAC,8BAA8B,CAAC,sBAAsB,CAAC,CAAC,SAAS,CAAC;AACjF,YAAA,IAAI,EAAE,CAAC,GAAkD,KAAI;AAC3D,gBAAA,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,GAAG,CAAC;;;;gBAIhC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,aAAa,CAAC;aACnD;AACD,YAAA,KAAK,EAAE,CAAC,KAAK,KAAI;AACf,gBAAA,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC;;AAE9C,SAAA,CAAC;;IAGJ,iBAAiB,GAAA;;QAEf,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,IAAI,CAAC,aAAa,EAAE;AAC5D,YAAA,OAAO,IAAI;;;QAGb,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,wBAAwB,CAAC;;AAGlE;;;AAGG;IACH,sBAAsB,GAAA;AACpB,QAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE;AACpC,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AAC9B,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;gBAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7D,oBAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC;gBAElC,IAAI,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,EAAE;AAC/D,oBAAA,OAAO,IAAI;;;;AAIjB,QAAA,OAAO,KAAK;;IAGd,aAAa,CAAC,KAAY,EAAE,KAAiB,EAAA;AAC3C,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;;IAG5C,kBAAkB,CAAC,KAAY,EAAE,OAA0B,EAAA;AACzD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;QAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,KAAK,QAAQ,GAAG,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;;IAG5F,cAAc,CAAC,KAAY,EAAE,OAA0B,EAAA;AACrD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;;AAE3B,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;;AAGvD,IAAA,iBAAiB,CAAC,KAAY,EAAA;QAC5B,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO;AACvD,QAAA,QAAQ,CAAC,eAAe,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK;;AArThD,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,kDAkE5B,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAlEV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/CxC,khRA+HM,EAAA,MAAA,EAAA,CAAA,+iDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDpFM,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,iGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,uGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gHAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gHAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,mBAAmB,4ZAAE,sBAAsB,EAAA,QAAA,EAAA,0DAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,UAAA,EAAA,IAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,YAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAI7E,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAPvC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,UAAA,EACrB,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,CAAC,EAAA,QAAA,EAAA,khRAAA,EAAA,MAAA,EAAA,CAAA,+iDAAA,CAAA,EAAA;;0BAsEtF,MAAM;2BAAC,WAAW;;;;;"}
+{"version":3,"file":"cloud-ide-layout-drawer-theme.component-Cht8K9ql.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.ts","../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.html"],"sourcesContent":["import { NgFor, NgIf } from '@angular/common';\nimport { NgClass } from '@angular/common';\nimport { Component, OnInit, PLATFORM_ID, Inject, inject } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CideSelectComponent, SelectOption, CideEleButtonComponent } from 'cloud-ide-element';\nimport { CideLytThemeService, Theme, setCSSVariable } from '../../../services/theme/theme.service';\nimport type { MSystemThemeUserPreferencesRequest, SystemThemesListControllerRespoonse, SystemThemeUserPreferencesControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { SystemThemeControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { ICoreSyth, ICoreSyoth, ICoreSyupth } from 'cloud-ide-lms-model';\nimport { isEqual, cloneDeep } from 'lodash';\nimport _ from 'lodash';\nimport { AppStateHelperService } from '../../../services/app-state';\n\ninterface ThemeColor {\n  label: string;\n  varName: string;\n  value: string;\n}\n\ninterface TypographySetting {\n  label: string;\n  varName: string;\n  value: string;\n  type: 'number' | 'text';\n  min?: number;\n  max?: number;\n}\n\ntype ThemeGroup = {\n  label: string;\n  items: Array<{\n    label: string;\n    varName: string;\n    value: string;\n    type: 'number' | 'text';\n    min?: number;\n    max?: number;\n  }>;\n};\n\n@Component({\n  selector: 'cide-lyt-drawer-theme',\n  standalone: true,\n  imports: [FormsModule, NgFor, NgIf, NgClass, CideSelectComponent, CideEleButtonComponent],\n  templateUrl: './drawer-theme.component.html',\n  styleUrl: './drawer-theme.component.scss'\n})\nexport class CideLytDrawerThemeComponent implements OnInit {\n  private readonly appState = inject(AppStateHelperService);\n  // Preset themes\n  presetThemes: { value: string, label: string, theme: ICoreSyth }[] = [];\n  selectedTheme = '';\n  isLoadingThemes = false;\n  themeLoadError = '';\n  mergedTheme: { [key: string]: string } = {};\n  isRTL = false;\n  originalThemeGroupValues: ThemeGroup[] = [];\n  originalApiThemeValues: { [key: string]: string } = {}; // Store original API values\n\n  themeGroups: ThemeGroup[] = [\n    {\n      label: 'Brand Colors',\n      items: [\n        { label: 'Primary', varName: '--cide-theme-color-brand-primary', value: '#4f46e5', type: 'text' },\n        { label: 'Accent', varName: '--cide-theme-color-brand-accent', value: '#4338ca', type: 'text' },\n        { label: 'Separator', varName: '--cide-theme-color-brand-separator', value: '#e5e7eb', type: 'text' }\n      ]\n    },\n    {\n      label: 'Text Colors',\n      items: [\n        { label: 'Body Text', varName: '--cide-theme-color-text-body', value: '#374151', type: 'text' },\n        { label: 'Heading Text', varName: '--cide-theme-color-text-heading', value: '#111827', type: 'text' },\n        { label: 'Link Text', varName: '--cide-theme-color-text-link', value: '#3b82f6', type: 'text' },\n        { label: 'Muted Text', varName: '--cide-theme-color-text-muted', value: '#6b7280', type: 'text' }\n      ]\n    },\n    {\n      label: 'Background Colors',\n      items: [\n        { label: 'Body Background', varName: '--cide-theme-color-background-body', value: '#ffffff', type: 'text' }\n      ]\n    },\n    {\n      label: 'Layout Dimensions',\n      items: [\n        { label: 'Stack Wrapper Width', varName: '--cide-lyt-stack-wrapper-width', value: '60', type: 'number', min: 20, max: 120 }\n      ]\n    },\n    {\n      label: 'Font Sizes',\n      items: [\n        { label: 'XXXL Font Size', varName: '--cide-theme-font-size-xxxl', value: '3.052', type: 'number', min: 1, max: 10 },\n        { label: 'XXL Font Size', varName: '--cide-theme-font-size-xxl', value: '2.441', type: 'number', min: 1, max: 10 },\n        { label: 'XL Font Size', varName: '--cide-theme-font-size-xl', value: '1.953', type: 'number', min: 1, max: 10 },\n        { label: 'LG Font Size', varName: '--cide-theme-font-size-lg', value: '1.563', type: 'number', min: 1, max: 10 },\n        { label: 'MD Font Size', varName: '--cide-theme-font-size-md', value: '1.25', type: 'number', min: 1, max: 10 },\n        { label: 'Paragraph Font Size', varName: '--cide-theme-font-size-p', value: '1', type: 'number', min: 0.5, max: 5 },\n        { label: 'SM Font Size', varName: '--cide-theme-font-size-sm', value: '0.9', type: 'number', min: 0.5, max: 5 },\n        { label: 'XS Font Size', varName: '--cide-theme-font-size-xs', value: '0.8', type: 'number', min: 0.5, max: 5 }\n      ]\n    },\n    {\n      label: 'Line Heights',\n      items: [\n        { label: 'Body Line Height', varName: '--cide-theme-line-height-body', value: '1.6', type: 'number', min: 1, max: 3 },\n        { label: 'Heading Line Height', varName: '--cide-theme-line-height-heading', value: '1.2', type: 'number', min: 1, max: 3 }\n      ]\n    }\n  ];\n\n  constructor(\n    private themeService: CideLytThemeService,\n    @Inject(PLATFORM_ID) private platformId: object\n  ) { }\n\n  ngOnInit(): void {\n    // Modern Angular v20 pattern: Use Signals directly\n    this.selectedTheme = this.themeService.selectedTheme();\n\n    // fetch the system themes list\n    this.isLoadingThemes = true;\n    this.themeService.fetchSystemThemesList().subscribe({\n      next: (res: SystemThemesListControllerRespoonse) => {\n        const themes: ICoreSyth[] = res?.data?.core_system_themes || [];\n        this.presetThemes = themes.map((theme: ICoreSyth) => ({\n          value: theme._id || '',\n          label: theme.syth_theme_name || theme.syth_theme_id || '',\n          theme\n        }));\n        this.isLoadingThemes = false;\n        // If user has no theme set, select and apply the default theme\n        if (!this.selectedTheme) {\n          const defaultTheme = this.presetThemes.find(t => t.theme.syth_is_default);\n          if (defaultTheme) {\n            this.selectedTheme = defaultTheme.value;\n            // Apply the default theme as CSS variables\n            if (defaultTheme.theme.syth_properties) {\n              Object.entries(defaultTheme.theme.syth_properties).forEach(([varName, value]) => {\n                this.updateVar(varName, value as string);\n              });\n            }\n          }\n        }\n      },\n      error: () => {\n        this.themeLoadError = 'Failed to load themes';\n        this.isLoadingThemes = false;\n      }\n    });\n    this.loadAndApplyUserTheme();\n  }\n\n  loadAndApplyUserTheme(): void {\n    this.themeService.loadTheme().subscribe({\n      next: (res: SystemThemeControllerRespoonse) => {\n        const base: ICoreSyth | undefined = res?.data?.core_system_themes;\n        const org: ICoreSyoth | undefined = res?.data?.core_system_organization_themes;\n        const user: ICoreSyupth | undefined = res?.data?.core_system_theme_user_preferences;\n        // Start with base theme properties\n        let merged = { ...(base?.syth_properties || {}) };\n        // Override with org overrides\n        if (org?.syoth_overrides) {\n          merged = { ...merged, ...org.syoth_overrides };\n        }\n        // Override with user overrides\n        if (user?.syupth_overrides) {\n          merged = { ...merged, ...user.syupth_overrides };\n        }\n        this.mergedTheme = merged;\n\n        // Store original API values for reset functionality\n        this.originalApiThemeValues = { ...merged };\n\n        // Apply merged theme as CSS variables\n        Object.entries(this.mergedTheme).forEach(([varName, value]) => {\n          this.updateVar(varName, value as string);\n        });\n\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = merged[item.varName] || merged[key] || item.value;\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      },\n      error: () => {\n        // handle error if needed\n      }\n    });\n  }\n\n  // Update CSS variable in real time\n  updateVar(varName: string, value: string) {\n    // You can use either the utility function directly or the service method\n    setCSSVariable(varName, value, this.platformId);\n    // Alternative: this.themeService.updateCSSVariable(varName, value);\n  }\n\n  onThemeModelChange(value: string | number | string[]): void {\n    this.selectedTheme = value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected) {\n      this.onThemeChange({ value: this.selectedTheme, label: selected.label });\n    }\n  }\n\n  onThemeChange(event: SelectOption) {\n    this.selectedTheme = event.value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected && selected.theme && selected.theme.syth_properties) {\n      // here we will check the theme selected by organization is same if yes then overide also for user preferences\n      if (this.themeService.selectedTheme() === selected.theme._id) {\n        this.loadAndApplyUserTheme();\n      } else {\n        // Store original API values for the selected theme\n        this.originalApiThemeValues = _.cloneDeep(selected.theme.syth_properties);\n\n        // Update all group values from the selected theme\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = selected.theme.syth_properties[item.varName] ||\n              selected.theme.syth_properties[key] ||\n              item.value;\n\n            this.updateVar(item.varName, item.value);\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      }\n    }\n  }\n\n  onReset() {\n    // Restore all values from the original API values\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        // Get the original API value\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key] ||\n          item.value;\n\n        // Update the item value\n        item.value = originalValue;\n\n        // Apply the CSS variable\n        this.updateVar(item.varName, item.value);\n\n        if (key.includes('font_size') || key.includes('line_height')) {\n          item.value = parseFloat(item.value) as unknown as string;\n        }\n      }\n    }\n\n    // Update the originalThemeGroupValues to reflect the reset state\n    this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n  }\n\n  onSave() {\n    // Collect all current values\n    const themeVars: Theme = {\n\n    };\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        themeVars[item.varName?.replaceAll('-', '_')] = item.value;\n      }\n    }\n\n    const systemThemePreferences: MSystemThemeUserPreferencesRequest = {\n      syupth_overrides: {\n        ...themeVars\n      },\n      syupth_system_theme_id_syth: this.selectedTheme, // LATER: need to upadate LATER\n      syupth_user_id_user: this.appState.currentUser()?._id || '', // LATER: need to get user id from user\n      syupth_entity_id_syen: this.appState.getActiveEntityId() || '', // LATER: need to get entity id from user\n      syth_theme_id: \"\" // need to upadate LATER\n    };\n\n    // TODO: Send themeVars to backend or emit event by designConfigRoutesUrl?.systemThemeUserPreferences\n    this.themeService.saveSystemThemeUserPreferences(systemThemePreferences).subscribe({\n      next: (res: SystemThemeUserPreferencesControllerRespoonse) => {\n        console.log('Theme saved:', res);\n        // Modern Angular v20 pattern: Update Signal through service method\n        // Note: The theme service should provide a method to update the selected theme\n        // For now, we'll just log the change since the service doesn't expose a setter\n        console.log('Theme selected:', this.selectedTheme);\n      },\n      error: (error) => {\n        console.error('Error saving theme:', error);\n      }\n    });\n  }\n\n  hasUnsavedChanges(): boolean {\n    // chec selected theme is different\n    if (this.themeService.selectedTheme() !== this.selectedTheme) {\n      return true;\n    }\n    // check the theme groups are different\n    return !isEqual(this.themeGroups, this.originalThemeGroupValues);\n  }\n\n  /**\n   * Check if current values differ from the original API values\n   * This is useful for determining if reset should be enabled\n   */\n  hasChangesFromOriginal(): boolean {\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key];\n\n        if (originalValue !== undefined && item.value !== originalValue) {\n          return true;\n        }\n      }\n    }\n    return false;\n  }\n\n  onColorChange(event: Event, color: ThemeColor) {\n    const input = event.target as HTMLInputElement;\n    color.value = input.value;\n    this.updateVar(color.varName, color.value);\n  }\n\n  onTypographyChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    this.updateVar(setting.varName, setting.type === 'number' ? setting.value : setting.value);\n  }\n\n  onLayoutChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    // For layout dimensions, append 'px' unit to the value\n    this.updateVar(setting.varName, setting.value + 'px');\n  }\n\n  onDirectionToggle(event: Event) {\n    this.isRTL = (event.target as HTMLInputElement).checked;\n    document.documentElement.dir = this.isRTL ? 'rtl' : 'ltr';\n  }\n}\n","<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\n  <!-- STICKY HEADER SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-top-0 tw-border-b tw-border-gray-200 tw-z-10 tw-flex-shrink-0\">\n    <!-- DYNAMIC HEADING -->\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">Preset Theme</h6>\n    </div>\n  </div>\n\n  <!-- SCROLLABLE CONTENT AREA -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-scroll-smooth tw-p-2 tw-flex tw-flex-col tw-gap-5 tw-text-sm tw-pb-3 theme-scroll-container\">\n    <!-- Preset Theme -->\n    <section>\n      <cide-ele-select id=\"theme-selector\" [ngModel]=\"selectedTheme\" (ngModelChange)=\"onThemeModelChange($event)\"\n        [options]=\"presetThemes\" [size]=\"'sm'\"></cide-ele-select>\n    </section>\n\n    <!-- Direction Toggle -->\n    <section>\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-2\">\n        <h2 class=\"tw-text-md tw-font-semibold tw-text-gray-800\">Text Direction</h2>\n        <div class=\"tw-flex tw-items-center tw-gap-1\">\n          <span class=\"tw-text-xs tw-text-gray-500\">LTR</span>\n          <label for=\"direction-toggle\" class=\"tw-relative tw-inline-block tw-w-9 tw-h-5\">\n            <input type=\"checkbox\" id=\"direction-toggle\" class=\"tw-opacity-0 tw-w-0 tw-h-0\" [(ngModel)]=\"isRTL\"\n              (change)=\"onDirectionToggle($event)\">\n            <span\n              class=\"tw-absolute tw-cursor-pointer tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-bg-gray-300 tw-rounded-full tw-transition-colors checked:tw-bg-blue-500 before:tw-absolute before:tw-content-[''] before:tw-h-4 before:tw-w-4 before:tw-left-0.5 before:tw-bottom-0.5 before:tw-bg-white before:tw-rounded-full before:tw-transition-transform checked:before:tw-translate-x-4\"></span>\n          </label>\n          <span class=\"tw-text-xs tw-text-gray-500\">RTL</span>\n        </div>\n      </div>\n    </section>\n\n    <!-- Theme Property Groups (Brand, Text, Background, Font Sizes, Line Heights) -->\n    <section *ngFor=\"let group of themeGroups\" class=\"theme-section\">\n      <h2 class=\"tw-text-md tw-font-semibold tw-mb-2 tw-text-gray-800\">{{ group.label }}</h2>\n      <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-gap-x-4\">\n        <div *ngFor=\"let item of group.items\"\n          class=\"tw-flex tw-items-center tw-gap-2 tw-p-1 tw-rounded-lg tw-bg-gray-50\"\n          [ngClass]=\"{'tw-flex-col tw-items-stretch': (group.label === 'Font Sizes' || group.label === 'Line Heights' || group.label === 'Layout Dimensions')}\">\n          <!-- Font Sizes: label on top, input in middle, unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Font Sizes'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.001\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">rem</span>\n            </div>\n          </ng-container>\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Font Sizes' && group.label !== 'Line Heights' && group.label !== 'Layout Dimensions'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>"],"names":[],"mappings":"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"}

package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-Dkey1f9h.mjs → cloud-ide-layout-floating-entity-selection.component-CfkiqZHY.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, inject, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CideEleFloatingContainerService, CideEleButtonComponent, CideIconComponent } from 'cloud-ide-element';
-import { e as AppStateService } from './cloud-ide-layout-cloud-ide-layout-zxDOzv0V.mjs';
+import { e as AppStateService } from './cloud-ide-layout-cloud-ide-layout-BamR8RAT.mjs';
 import { CideSharedOrgStructureComponent } from 'cloud-ide-shared';
 
 class CideLytFloatingEntitySelectionComponent {
@@ -125,4 +125,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
         }] });
 
 export { CideLytFloatingEntitySelectionComponent };
-//# sourceMappingURL=cloud-ide-layout-floating-entity-selection.component-Dkey1f9h.mjs.map
+//# sourceMappingURL=cloud-ide-layout-floating-entity-selection.component-CfkiqZHY.mjs.map

package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-Dkey1f9h.mjs.map → cloud-ide-layout-floating-entity-selection.component-CfkiqZHY.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cloud-ide-layout-floating-entity-selection.component-Dkey1f9h.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/components/floating-entity-selection/floating-entity-selection.component.ts"],"sourcesContent":["import { Component, OnInit, inject, signal, computed, ChangeDetectionStrategy, input } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { CideEleButtonComponent } from 'cloud-ide-element';\r\nimport { CideIconComponent } from 'cloud-ide-element';\r\nimport { AppStateService } from '../../services/app-state/app-state.service';\r\nimport { CideEleFloatingContainerService } from 'cloud-ide-element';\r\nimport { CideSharedOrgStructureComponent } from 'cloud-ide-shared';\r\nimport { CoreSystemEntityListResponse } from 'cloud-ide-lms-model';\r\n\r\n@Component({\r\n  selector: 'cide-lyt-floating-entity-selection',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [\r\n    CommonModule,\r\n    CideEleButtonComponent,\r\n    CideIconComponent,\r\n    CideSharedOrgStructureComponent\r\n  ],\r\n  template: `\r\n    <!-- Entity Selection Content using Org Structure Component -->\r\n    <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n      <!-- Header -->\r\n      <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-4 tw-py-3 tw-flex-shrink-0\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600\">account_tree</cide-ele-icon>\r\n            <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Structure</h3>\r\n          </div>\r\n          @if (mode() === 'selection') {\r\n          <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n                      </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Org Structure Component -->\r\n      <div class=\"tw-flex-1 tw-overflow-hidden\">\r\n        <cide-shared-org-structure\r\n          [allowSwitching]=\"allowSwitching()\"\r\n          [showActions]=\"showActions()\"\r\n          [mode]=\"mode()\"\r\n          (entityClick)=\"onEntityClick($event)\"\r\n          (entitySelect)=\"onEntitySelect($event)\"\r\n          (entityView)=\"onEntityView($event)\">\r\n        </cide-shared-org-structure>\r\n      </div>\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    .tw-dashed {\r\n      border-style: dashed;\r\n    }\r\n    .tw-bg-gray-300 {\r\n      background-color: #d1d5db;\r\n    }\r\n    \r\n    /* Level-based styling for entity cards */\r\n    .level-0 {\r\n      border-top-color: #3b82f6 !important; /* Blue */\r\n    }\r\n    .level-1 {\r\n      border-top-color: #f59e0b !important; /* Amber */\r\n    }\r\n    .level-2 {\r\n      border-top-color: #10b981 !important; /* Emerald */\r\n    }\r\n    .level-3 {\r\n      border-top-color: #8b5cf6 !important; /* Violet */\r\n    }\r\n    .level-4 {\r\n      border-top-color: #ef4444 !important; /* Red */\r\n    }\r\n    .level-5 {\r\n      border-top-color: #06b6d4 !important; /* Cyan */\r\n    }\r\n    \r\n    /* Connection line styling */\r\n    .connection-line-compact {\r\n      pointer-events: none;\r\n    }\r\n  `]\r\n})\r\nexport class CideLytFloatingEntitySelectionComponent implements OnInit {\r\n  // Input parameters for configuration\r\n  allowSwitching = input<boolean>(true); // Allow entity switching (default: true)\r\n  showActions = input<boolean>(true); // Show action buttons (default: true)\r\n  mode = input<'selection' | 'view'>('selection'); // Mode: selection or view-only\r\n\r\n  // Service injections\r\n  private appStateService = inject(AppStateService);\r\n  private floatingContainerService = inject(CideEleFloatingContainerService);\r\n\r\n  ngOnInit() {\r\n    // No initialization needed - shared org structure component handles everything\r\n  }\r\n\r\n  /**\r\n   * Handle entity click event from org structure\r\n   */\r\n  onEntityClick(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity clicked:', entity);\r\n    // This is just a click event, no action needed unless specific handling is required\r\n  }\r\n\r\n  /**\r\n   * Handle entity select event from org structure (for switching)\r\n   */\r\n  onEntitySelect(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity selected for switching:', entity);\r\n    this.appStateService.setActiveEntity(entity);\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Handle entity view event from org structure (for viewing)\r\n   */\r\n  onEntityView(entity: any): void {\r\n    console.log('👁️ Entity viewed:', entity);\r\n    // Handle view-only mode - could show entity details or navigate\r\n    // This can be customized based on your needs\r\n  }\r\n\r\n  /**\r\n   * Cancel selection\r\n   */\r\n  onCancel(): void {\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Close the floating container\r\n   */\r\n  private closeContainer(): void {\r\n    this.floatingContainerService.hideAll();\r\n  }\r\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"cloud-ide-layout-floating-entity-selection.component-CfkiqZHY.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/components/floating-entity-selection/floating-entity-selection.component.ts"],"sourcesContent":["import { Component, OnInit, inject, signal, computed, ChangeDetectionStrategy, input } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { CideEleButtonComponent } from 'cloud-ide-element';\r\nimport { CideIconComponent } from 'cloud-ide-element';\r\nimport { AppStateService } from '../../services/app-state/app-state.service';\r\nimport { CideEleFloatingContainerService } from 'cloud-ide-element';\r\nimport { CideSharedOrgStructureComponent } from 'cloud-ide-shared';\r\nimport { CoreSystemEntityListResponse } from 'cloud-ide-lms-model';\r\n\r\n@Component({\r\n  selector: 'cide-lyt-floating-entity-selection',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [\r\n    CommonModule,\r\n    CideEleButtonComponent,\r\n    CideIconComponent,\r\n    CideSharedOrgStructureComponent\r\n  ],\r\n  template: `\r\n    <!-- Entity Selection Content using Org Structure Component -->\r\n    <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n      <!-- Header -->\r\n      <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-4 tw-py-3 tw-flex-shrink-0\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600\">account_tree</cide-ele-icon>\r\n            <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Structure</h3>\r\n          </div>\r\n          @if (mode() === 'selection') {\r\n          <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n                      </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Org Structure Component -->\r\n      <div class=\"tw-flex-1 tw-overflow-hidden\">\r\n        <cide-shared-org-structure\r\n          [allowSwitching]=\"allowSwitching()\"\r\n          [showActions]=\"showActions()\"\r\n          [mode]=\"mode()\"\r\n          (entityClick)=\"onEntityClick($event)\"\r\n          (entitySelect)=\"onEntitySelect($event)\"\r\n          (entityView)=\"onEntityView($event)\">\r\n        </cide-shared-org-structure>\r\n      </div>\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    .tw-dashed {\r\n      border-style: dashed;\r\n    }\r\n    .tw-bg-gray-300 {\r\n      background-color: #d1d5db;\r\n    }\r\n    \r\n    /* Level-based styling for entity cards */\r\n    .level-0 {\r\n      border-top-color: #3b82f6 !important; /* Blue */\r\n    }\r\n    .level-1 {\r\n      border-top-color: #f59e0b !important; /* Amber */\r\n    }\r\n    .level-2 {\r\n      border-top-color: #10b981 !important; /* Emerald */\r\n    }\r\n    .level-3 {\r\n      border-top-color: #8b5cf6 !important; /* Violet */\r\n    }\r\n    .level-4 {\r\n      border-top-color: #ef4444 !important; /* Red */\r\n    }\r\n    .level-5 {\r\n      border-top-color: #06b6d4 !important; /* Cyan */\r\n    }\r\n    \r\n    /* Connection line styling */\r\n    .connection-line-compact {\r\n      pointer-events: none;\r\n    }\r\n  `]\r\n})\r\nexport class CideLytFloatingEntitySelectionComponent implements OnInit {\r\n  // Input parameters for configuration\r\n  allowSwitching = input<boolean>(true); // Allow entity switching (default: true)\r\n  showActions = input<boolean>(true); // Show action buttons (default: true)\r\n  mode = input<'selection' | 'view'>('selection'); // Mode: selection or view-only\r\n\r\n  // Service injections\r\n  private appStateService = inject(AppStateService);\r\n  private floatingContainerService = inject(CideEleFloatingContainerService);\r\n\r\n  ngOnInit() {\r\n    // No initialization needed - shared org structure component handles everything\r\n  }\r\n\r\n  /**\r\n   * Handle entity click event from org structure\r\n   */\r\n  onEntityClick(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity clicked:', entity);\r\n    // This is just a click event, no action needed unless specific handling is required\r\n  }\r\n\r\n  /**\r\n   * Handle entity select event from org structure (for switching)\r\n   */\r\n  onEntitySelect(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity selected for switching:', entity);\r\n    this.appStateService.setActiveEntity(entity);\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Handle entity view event from org structure (for viewing)\r\n   */\r\n  onEntityView(entity: any): void {\r\n    console.log('👁️ Entity viewed:', entity);\r\n    // Handle view-only mode - could show entity details or navigate\r\n    // This can be customized based on your needs\r\n  }\r\n\r\n  /**\r\n   * Cancel selection\r\n   */\r\n  onCancel(): void {\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Close the floating container\r\n   */\r\n  private closeContainer(): void {\r\n    this.floatingContainerService.hideAll();\r\n  }\r\n}"],"names":[],"mappings":"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"}

package/fesm2022/{cloud-ide-layout-home-wrapper.component-HyS9eAWw.mjs → cloud-ide-layout-home-wrapper.component-BHRtEqmU.mjs}

@@ -1,6 +1,6 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { C as CideLytSharedWrapperComponent, a as CideLytSidebarService, A as AppStateHelperService, b as CideLytRequestService } from './cloud-ide-layout-cloud-ide-layout-zxDOzv0V.mjs';
+import { C as CideLytSharedWrapperComponent, a as CideLytSidebarService, A as AppStateHelperService, b as CideLytRequestService } from './cloud-ide-layout-cloud-ide-layout-BamR8RAT.mjs';
 import * as i0 from '@angular/core';
 import { input, inject, Renderer2, ChangeDetectorRef, ViewChild, Component } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -199,4 +199,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }] } });
 
 export { CideLytHomeWrapperComponent };
-//# sourceMappingURL=cloud-ide-layout-home-wrapper.component-HyS9eAWw.mjs.map
+//# sourceMappingURL=cloud-ide-layout-home-wrapper.component-BHRtEqmU.mjs.map

package/fesm2022/{cloud-ide-layout-home-wrapper.component-HyS9eAWw.mjs.map → cloud-ide-layout-home-wrapper.component-BHRtEqmU.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cloud-ide-layout-home-wrapper.component-HyS9eAWw.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/layout/home/home-wrapper/home-wrapper.component.ts","../../../projects/cloud-ide-layout/src/lib/layout/home/home-wrapper/home-wrapper.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { CideLytSharedWrapperComponent, CideLytSharedWrapperSetupParam } from '../../shared/shared-wrapper/shared-wrapper.component';\r\nimport { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Renderer2, inject, ChangeDetectorRef, Signal, signal, input } from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { CideLytSidebarService } from '../../sidebar/sidebar.service';\r\nimport { menuResponseData } from 'cloud-ide-lms-model';\r\nimport { CideIconComponent } from 'cloud-ide-element';\r\nimport { TooltipDirective } from 'cloud-ide-element';\r\nimport { CideLytRequestService } from '../../request/request.service';\r\nimport { AppStateHelperService } from '../../../services/app-state/app-state-helper.service';\r\nimport { Router } from '@angular/router';\r\n\r\n// --- Interfaces for our data structures ---\r\ninterface CardItem {\r\n  text?: string;\r\n  title?: string;\r\n  subtext?: string;\r\n  details?: string;\r\n  subject?: string;\r\n  grade?: string;\r\n  color?: string;\r\n  name?: string;\r\n  officeHours?: string;\r\n  messageLink?: string;\r\n  appointmentLink?: string;\r\n  professor?: string;\r\n  colorTheme?: string;\r\n  date?: { month: string; day: string };\r\n  themeColor?: string;\r\n  topic?: string;\r\n  forum?: string;\r\n  lastPost?: string;\r\n  iconSVG?: string;\r\n  safeIconSVG?: SafeHtml;\r\n}\r\n\r\ninterface CardStat {\r\n  label: string;\r\n  value: string;\r\n  gradient?: string;\r\n  valueClass?: string;\r\n}\r\n\r\ninterface Card {\r\n  id: string;\r\n  title: string;\r\n  type: string;\r\n  colSpan: string;\r\n  accentColor: string;\r\n  urgentText?: string;\r\n  insightTag?: string;\r\n  items?: CardItem[];\r\n  stats?: CardStat[];\r\n  progress?: string;\r\n  description?: string;\r\n  link?: { text: string; href: string };\r\n}\r\n\r\ninterface ModulesSectionConfig {\r\n  title: string;\r\n  viewAllLinkText: string;\r\n  viewAllLinkHref: string;\r\n  showViewAllLink: boolean;\r\n}\r\n\r\n@Component({\r\n  selector: 'cide-lyt-home-wrapper',\r\n  imports: [CommonModule, CideIconComponent, TooltipDirective],\r\n  templateUrl: './home-wrapper.component.html',\r\n  styleUrl: './home-wrapper.component.css',\r\n  styles: [`\r\n    :host {\r\n      height: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      overflow-y: auto;\r\n    }\r\n  `]\r\n})\r\nexport class CideLytHomeWrapperComponent extends CideLytSharedWrapperComponent implements OnInit, AfterViewInit {\r\n  public override shared_wrapper_setup_param = input<Partial<CideLytSharedWrapperSetupParam>>({\r\n    sypg_page_code: \"cide_lyt_home\"\r\n  });\r\n\r\n  private readonly sidebarService = inject(CideLytSidebarService);\r\n  private readonly sanitizer = inject(DomSanitizer);\r\n  private readonly renderer = inject(Renderer2);\r\n  private readonly cdr = inject(ChangeDetectorRef);\r\n  protected override appState = inject(AppStateHelperService);\r\n  protected override router = inject(Router);\r\n\r\n  private moduleStylePresets = [\r\n    { accentColor: \"#8B5CF6\" }, // purple\r\n    { accentColor: \"#EC4899\" }, // pink\r\n    { accentColor: \"#14B8A6\" }, // teal\r\n    { accentColor: \"#0EA5E9\" }, // sky\r\n    { accentColor: \"#F59E42\" }, // orange\r\n    { accentColor: \"#6366F1\" }, // indigo\r\n    { accentColor: \"#22C55E\" }, // green\r\n    { accentColor: \"#EF4444\" }, // red\r\n    { accentColor: \"#F59E0B\" }, // amber\r\n    { accentColor: \"#10B981\" }, // emerald\r\n    { accentColor: \"#06B6D4\" }, // cyan\r\n    { accentColor: \"#6B7280\" }, // gray\r\n    { accentColor: \"#8B5CF6\" }, // violet (same as purple for fallback)\r\n    { accentColor: \"#D946EF\" }  // fuchsia\r\n  ];\r\n\r\n  constructor(private requestService: CideLytRequestService) {\r\n    super();\r\n    // Sanitize SVG icons in the hardcoded cardsData\r\n    this.cardsData = this.cardsData.map(card => ({\r\n      ...card,\r\n      items: card.items?.map(item => ({\r\n        ...item,\r\n        safeIconSVG: item.iconSVG ? this.sanitizer.bypassSecurityTrustHtml(item.iconSVG) : undefined\r\n      }))\r\n    }));\r\n  }\r\n\r\n  @ViewChild('modulesContainer') modulesContainerRef!: ElementRef<HTMLDivElement>;\r\n  @ViewChild('scrollPrevModuleBtn') scrollPrevModuleBtnRef!: ElementRef<HTMLButtonElement>;\r\n  @ViewChild('scrollNextModuleBtn') scrollNextModuleBtnRef!: ElementRef<HTMLButtonElement>;\r\n  @ViewChild('cardsContainerEl') cardsContainerElRef!: ElementRef<HTMLDivElement>;\r\n\r\n  modulesSectionConfig: ModulesSectionConfig = {\r\n    title: \"Subscribed Modules\",\r\n    viewAllLinkText: \"View All Modules &rarr;\",\r\n    viewAllLinkHref: \"#all-modules\",\r\n    showViewAllLink: true\r\n  };\r\n\r\n  modulesData: (menuResponseData & { accentColor?: string; pillCount?: number })[] = [];\r\n  draggedItem: HTMLElement | null = null;\r\n  placeholder: HTMLElement | null = null;\r\n\r\n  override ngOnInit(): void {\r\n    super.ngOnInit?.();\r\n    this.loadModules();\r\n  }\r\n\r\n  openModule(module: menuResponseData) {\r\n    console.log(module, \"module\");\r\n    // Set the active module in app state - this will trigger sidebar updates\r\n    this.appState.setActiveModule(module);\r\n\r\n    // Navigate to the module route\r\n    // this.requestService.addTab(module.syme_title, `/control-panel/${module.syme_path}`);\r\n    this.router.navigate([`/control-panel/${module.syme_path}`]);\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    this.setupModuleScroller();\r\n    this.setupDragAndDrop();\r\n  }\r\n\r\n  private loadModules(): void {\r\n    this.sidebarService?.getSidebarMenues({ syme_type: \"module\", sort: 'asc', syme_title: \"\" })?.subscribe({\r\n      next: (res) => {\r\n        const fetchedApiModules = res?.data || [];\r\n        this.modulesData = fetchedApiModules.map((item: menuResponseData, index: number) => {\r\n          const stylePreset = this.moduleStylePresets[index % this.moduleStylePresets.length];\r\n          const insightCount = item.syme_ping_count || 0;\r\n          return {\r\n            ...item,\r\n            accentColor: stylePreset.accentColor, // UI-only property\r\n            pillCount: insightCount, // UI-only property\r\n          };\r\n        });\r\n        this.cdr.detectChanges();\r\n      },\r\n      error: (err) => {\r\n        console.error('Error loading sidebar modules:', err);\r\n        this.modulesData = [];\r\n      }\r\n    });\r\n  }\r\n\r\n  cardsData: Card[] = [\r\n    { id: \"card1\", title: \"Key Deadlines\", type: \"deadlines\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"purple\", urgentText: \"Urgent\", items: [{ text: \"Midterm Paper: PHIL201\", subtext: \"Due: Tomorrow, 11:59 PM\" }, { text: \"Lab Report: CHEM110\", subtext: \"Due: In 3 days\" }], link: { text: \"View All Deadlines &rarr;\", href: \"#\" } },\r\n    { id: \"card2\", title: \"Recent Grades\", type: \"grades\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"green\", items: [{ subject: \"PHYS101 Quiz 3\", grade: \"A-\", color: \"tw-text-green-600\" }, { subject: \"ENGL220 Essay\", grade: \"B+\", color: \"tw-text-yellow-600\" }], link: { text: \"Full Gradebook &rarr;\", href: \"#\" } },\r\n    { id: \"card7\", title: \"Study Streak: 12 Days!\", type: \"studyStreak\", colSpan: \"md:tw-col-span-2 xl:tw-col-span-1\", accentColor: \"yellow\", progress: \"80%\", description: \"Keep the momentum going!\" },\r\n    { id: \"card6\", title: \"Campus Events\", type: \"events\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-2\", accentColor: \"sky\", items: [{ date: { month: \"JUL\", day: \"10\" }, title: \"Workshop: AI Ethics\", details: \"Tech Hub, 3:00 PM - 5:00 PM\", themeColor: \"tw-bg-sky-500\" }, { date: { month: \"JUL\", day: \"12\" }, title: \"Student Union Mixer\", details: \"Quad, 7:00 PM onwards\", themeColor: \"tw-bg-red-500\" }], link: { text: \"Full Events Calendar &rarr;\", href: \"#\" } },\r\n    { id: \"card8\", title: \"Quick Stats\", type: \"quickStats\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"indigo\", stats: [{ label: \"Course Completion\", value: \"75%\", gradient: \"tw-from-green-400 tw-to-blue-500\" }, { label: \"Pending Assignments\", value: \"3\", valueClass: \"tw-text-2xl tw-font-bold tw-text-yellow-500\" }] },\r\n    { id: \"card4\", title: \"Campus News & Updates\", type: \"news\", colSpan: \"md:tw-col-span-2 xl:tw-col-span-3\", accentColor: \"blue\", items: [{ title: \"Annual Career Fair: Next Wednesday!\", details: \"Main Hall, 10 AM - 4 PM\" }, { title: 'Guest Lecture: \"AI in Modern Society\"', details: \"Speaker: Dr. Eva Rostova. July 18th\" }], link: { text: \"All News &rarr;\", href: \"#\" } },\r\n    { id: \"card9\", title: \"Discussion Forums\", type: \"discussions\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-2\", accentColor: \"emerald\", insightTag: \"3 Hot Topics\", items: [{ topic: \"Debate: Future of Renewable Energy\", forum: \"ENV101 Forum\", lastPost: \"5 mins ago\" }, { topic: \"Help with CS210 Algorithm\", forum: \"CS Study Group\", lastPost: \"23 mins ago\" }], link: { text: \"Go to Forums &rarr;\", href: \"#\" } },\r\n    { id: \"card5\", title: \"My Courses\", type: \"courses\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"pink\", items: [{ name: \"ECON101: Microeconomics\", professor: \"Prof. Sharma\", colorTheme: \"pink\" }, { name: \"CS210: Data Structures\", professor: \"Dr. Carter\", colorTheme: \"indigo\" }], link: { text: \"Course Catalog &rarr;\", href: \"#\" } }\r\n  ];\r\n\r\n  setupModuleScroller(): void {\r\n    const modulesContainer = this.modulesContainerRef?.nativeElement;\r\n    const scrollPrevBtn = this.scrollPrevModuleBtnRef?.nativeElement;\r\n    const scrollNextBtn = this.scrollNextModuleBtnRef?.nativeElement;\r\n    if (modulesContainer && scrollPrevBtn && scrollNextBtn) {\r\n      const scrollAmount = 256;\r\n      const updateArrowStates = () => {\r\n        if (!modulesContainer) return;\r\n        scrollPrevBtn.disabled = modulesContainer.scrollLeft <= 0;\r\n        scrollNextBtn.disabled = modulesContainer.scrollLeft + modulesContainer.clientWidth >= modulesContainer.scrollWidth - 1;\r\n      };\r\n      this.renderer.listen(scrollPrevBtn, 'click', () => modulesContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));\r\n      this.renderer.listen(scrollNextBtn, 'click', () => modulesContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' }));\r\n      this.renderer.listen(modulesContainer, 'scroll', updateArrowStates);\r\n      new ResizeObserver(updateArrowStates).observe(modulesContainer);\r\n      setTimeout(updateArrowStates, 100);\r\n      // Remove preventDefault for wheel/touchmove to allow mouse/touch scrolling\r\n    }\r\n  }\r\n\r\n  setupDragAndDrop(): void {\r\n    const cardsContainer = this.cardsContainerElRef?.nativeElement;\r\n    if (!cardsContainer) return;\r\n    this.placeholder = this.renderer.createElement('div');\r\n    this.renderer.addClass(this.placeholder!, 'drag-over-placeholder');\r\n    this.renderer.listen(cardsContainer, 'dragstart', (e: DragEvent) => {\r\n      const target = e.target as HTMLElement;\r\n      if (target.classList.contains('dashboard-card')) {\r\n        this.draggedItem = target;\r\n        // Modern ES2022+ pattern: Use microtask for immediate execution\r\n        Promise.resolve().then(() => this.renderer.addClass(target, 'dragging'));\r\n        e.dataTransfer?.setData('text/plain', target.id || 'draggable-card');\r\n        if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';\r\n      }\r\n    });\r\n    this.renderer.listen(cardsContainer, 'dragend', () => {\r\n      if (this.draggedItem) this.renderer.removeClass(this.draggedItem, 'dragging');\r\n      if (this.placeholder?.parentNode) this.renderer.removeChild(this.placeholder.parentNode, this.placeholder);\r\n      this.draggedItem = null;\r\n    });\r\n    this.renderer.listen(cardsContainer, 'dragover', (e: DragEvent) => {\r\n      e.preventDefault();\r\n      if (!this.draggedItem) return;\r\n      const target = (e.target as HTMLElement).closest('.dashboard-card') as HTMLElement | null;\r\n      if (target && target !== this.draggedItem) {\r\n        const rect = target.getBoundingClientRect();\r\n        const offsetY = e.clientY - rect.top;\r\n        if (offsetY > rect.height / 2) {\r\n          this.renderer.insertBefore(cardsContainer, this.placeholder!, target.nextSibling);\r\n        } else {\r\n          this.renderer.insertBefore(cardsContainer, this.placeholder!, target);\r\n        }\r\n      }\r\n    });\r\n    this.renderer.listen(cardsContainer, 'drop', (e: DragEvent) => {\r\n      e.preventDefault();\r\n      if (this.draggedItem && this.placeholder?.parentNode) {\r\n        this.renderer.insertBefore(this.placeholder.parentNode, this.draggedItem, this.placeholder);\r\n      }\r\n      if (this.placeholder?.parentNode) this.renderer.removeChild(this.placeholder.parentNode, this.placeholder);\r\n      if (this.draggedItem) this.renderer.removeClass(this.draggedItem, 'dragging');\r\n      this.draggedItem = null;\r\n    });\r\n  }\r\n}\r\n","<div class=\"tw-p-4 sm:tw-p-6 md:tw-p-8 tw-max-w-full tw-mx-auto\">\r\n    <header class=\"tw-mb-8 md:tw-mb-10\">\r\n        <h1\r\n            class=\"tw-text-3xl sm:tw-text-4xl tw-font-bold tw-text-transparent tw-bg-clip-text tw-bg-gradient-to-r tw-from-purple-600 tw-via-pink-500 tw-to-orange-500\">\r\n            Welcome, {{ appState.getUserName() || 'User' }}!\r\n        </h1>\r\n        <p class=\"tw-text-sm tw-text-gray-500 tw-mt-1\">Your central hub for all things college.</p>\r\n        <p *ngIf=\"appState.getUserEmail()\" class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">{{ appState.getUserEmail() }}</p>\r\n    </header>\r\n\r\n    <div class=\"tw-mb-8 md:tw-mb-10\">\r\n        <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-5\">\r\n            <h2 class=\"tw-text-xl tw-font-bold tw-text-gray-700\">{{ modulesSectionConfig.title }}</h2>\r\n            <a *ngIf=\"modulesSectionConfig.showViewAllLink\" [href]=\"modulesSectionConfig.viewAllLinkHref\"\r\n                class=\"tw-text-sm tw-font-medium tw-text-purple-600 hover:tw-text-purple-800 hover:tw-underline tw-transition-colors\">\r\n                {{ modulesSectionConfig.viewAllLinkText }}\r\n            </a>\r\n        </div>\r\n        <div class=\"tw-relative group/modules tw-max-w-full\">\r\n            <button #scrollPrevModuleBtn aria-label=\"Scroll previous modules\"\r\n                class=\"tw-absolute tw--left-4 tw-z-50 tw-p-2 tw-bg-white/90 tw-bg-opacity-90 tw-backdrop-blur-sm tw-rounded-full tw-shadow-lg hover:tw-bg-gray-100 tw-transition-all tw-opacity-100 md:group-hover/modules:tw-opacity-100 disabled:tw-opacity-30 disabled:tw-cursor-not-allowed tw-pointer-events-auto\"\r\n                style=\"top: 2.875rem;\">\r\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\r\n                </svg>\r\n            </button>\r\n\r\n            <div #modulesContainer\r\n                class=\"tw-flex tw-space-x-4 tw-pb-6 tw-overflow-x-auto tw-overflow-y-visible tw-scroll-smooth tw-snap-x tw-snap-mandatory hide-scrollbar\"\r\n                style=\"touch-action: none; pointer-events: auto;\">\r\n                <a *ngFor=\"let module of modulesData\" \r\n                   (click)=\"openModule(module)\"\r\n                   (keydown.enter)=\"openModule(module)\"\r\n                   (keydown.space)=\"openModule(module)\"\r\n                   class=\"module-card tw-relative tw-overflow-hidden group tw-flex-shrink-0 tw-w-60 tw-h-28 tw-bg-white tw-border tw-border-gray-200/80 tw-rounded-xl tw-p-3 tw-shadow-md hover:tw-shadow-xl tw-transition-all tw-duration-300 tw-ease-out tw-flex tw-items-center tw-space-x-4 tw-snap-start\"\r\n                   [style.--accent-color]=\"module.accentColor\" \r\n                   tabindex=\"0\"\r\n                   role=\"button\"\r\n                   [attr.aria-label]=\"'Open module: ' + module.syme_title\">\r\n                    <div class=\"tw-relative tw-flex-shrink-0\">\r\n                        <div class=\"tw-w-16 tw-h-16 tw-rounded-lg tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-300 group-hover:tw-scale-105\"\r\n                            [style.backgroundColor]=\"module?.accentColor + '22'\">\r\n                            <!-- icon rendering here if needed -->\r\n                            <cide-ele-icon class=\"mpro-icon-field\" type=\"none\">{{module?.syme_icon}}</cide-ele-icon>\r\n                        </div>\r\n                        <div *ngIf=\"(module?.pillCount || 0) > 0\" class=\"tw-absolute tw--top-1.5 tw--right-1.5\">\r\n                            <span\r\n                                class=\"tw-flex tw-h-5 tw-w-5 tw-items-center tw-justify-center tw-rounded-full tw-text-white tw-text-xs tw-font-bold tw-ring-2 tw-ring-white\"\r\n                                [style.backgroundColor]=\"module?.accentColor\">{{module?.pillCount}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tw-flex tw-flex-col tw-flex-grow tw-min-w-0\">\r\n                        <h4 class=\"tw-font-semibold tw-text-xs tw-text-gray-800 tw-truncate line-clamp-1\" cideEleTooltip\r\n                            [cideEleTooltip]=\"module.syme_title\" [tooltipDelay]=\"300\" [tooltipPlacement]=\"'top'\">\r\n                            {{module?.syme_title}}\r\n                        </h4>\r\n                        <p\r\n                            class=\"tw-text-xs tw-text-gray-400 tw-mt-0.5 tw-overflow-hidden tw-text-ellipsis tw-line-clamp-2 tw-text-justify min-h-[2.5rem]\">\r\n                            {{module?.syme_desc}}\r\n                        </p>\r\n                    </div>\r\n                </a>\r\n            </div>\r\n\r\n            <button #scrollNextModuleBtn aria-label=\"Scroll next modules\"\r\n                class=\"tw-absolute tw--right-4 tw-z-50 tw-p-2 tw-bg-white/90 tw-bg-opacity-90 tw-backdrop-blur-sm tw-rounded-full tw-shadow-lg hover:tw-bg-gray-100 tw-transition-all tw-opacity-100 md:group-hover/modules:tw-opacity-100 disabled:tw-opacity-30 disabled:tw-cursor-not-allowed tw-pointer-events-auto\"\r\n                style=\"top: 2.875rem;\">\r\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <main class=\"tw--mt-8 md:tw--mt-10\">\r\n        <div #cardsContainerEl class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-5\">\r\n            <div *ngFor=\"let card of cardsData\" draggable=\"true\" [id]=\"card.id\"\r\n                class=\"dashboard-card tw-bg-white tw-border tw-border-gray-200/70 tw-rounded-xl tw-p-4 tw-shadow-lg hover:tw-shadow-xl hover:tw--translate-y-0.5 tw-transition-all tw-cursor-grab\"\r\n                [ngClass]=\"card.colSpan || 'tw-col-span-1'\">\r\n\r\n                <div *ngIf=\"card.type !== 'studyStreak' && card.type !== 'quickStats'\"\r\n                    class=\"tw-flex tw-justify-between tw-items-center tw-mb-3\">\r\n                    <h3 class=\"tw-text-md tw-font-semibold\" [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">\r\n                        {{card.title}}</h3>\r\n                    <span *ngIf=\"card.urgentText\"\r\n                        class=\"tw-text-xs tw-bg-red-100 tw-text-red-700 tw-px-2.5 tw-py-1 tw-rounded-full tw-font-semibold\">{{card.urgentText}}</span>\r\n                    <span *ngIf=\"card.insightTag\" class=\"tw-text-xs tw-px-2.5 tw-py-1 tw-rounded-full tw-font-semibold\"\r\n                        [ngClass]=\"'tw-bg-' + card.accentColor + '-100 tw-text-' + card.accentColor + '-700'\">{{card.insightTag}}</span>\r\n                </div>\r\n\r\n                <div class=\"card-content-area tw-space-y-3 tw-text-sm tw-pr-1\">\r\n                    <ng-container [ngSwitch]=\"card.type\">\r\n                        <ul *ngSwitchCase=\"'deadlines'\">\r\n                            <li *ngFor=\"let item of card.items\"\r\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <div>\r\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.text}}</p>\r\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.subtext}}</p>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'news'\">\r\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <p class=\"tw-font-medium tw-text-gray-800\">{{item.title}}</p>\r\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'grades'\">\r\n                            <li *ngFor=\"let item of card.items\"\r\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <span class=\"tw-text-gray-700\">{{item.subject}}</span><span class=\"tw-font-bold\"\r\n                                    [ngClass]=\"item.color\">{{item.grade}}</span>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'professorConnect'\">\r\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <p class=\"tw-font-medium tw-text-gray-700\">{{item.name}}</p>\r\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.officeHours}}</p><a\r\n                                    *ngIf=\"item.messageLink\" [href]=\"item.messageLink\"\r\n                                    class=\"tw-text-xs hover:tw-underline\"\r\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Send Message</a><a\r\n                                    *ngIf=\"item.appointmentLink\" [href]=\"item.appointmentLink\"\r\n                                    class=\"tw-text-xs hover:tw-underline tw-ml-2\"\r\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Book Appointment</a>\r\n                            </li>\r\n                        </ul>\r\n                        <div *ngSwitchCase=\"'courses'\" class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-2.5\"><a\r\n                                *ngFor=\"let item of card.items\" href=\"#\"\r\n                                class=\"tw-block tw-p-2.5 tw-rounded-lg tw-transition-all group tw-ring-1\"\r\n                                [ngClass]=\"'tw-bg-' + item.colorTheme + '-50/70 hover:tw-bg-' + item.colorTheme + '-100/80 tw-ring-' + item.colorTheme + '-200/70 hover:tw-ring-' + item.colorTheme + '-300'\">\r\n                                <p class=\"tw-font-semibold group-hover:tw-text-{{item.colorTheme}}-800\"\r\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-700'\">{{item.name}}</p>\r\n                                <p class=\"tw-text-xs group-hover:tw-text-{{item.colorTheme}}-600 tw-mt-0.5\"\r\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-500'\">{{item.professor}}</p>\r\n                            </a></div>\r\n                        <ul *ngSwitchCase=\"'events'\">\r\n                            <li *ngFor=\"let item of card.items\"\r\n                                class=\"tw-flex tw-items-start tw-space-x-2.5 tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <div class=\"tw-text-white tw-text-xs tw-font-bold tw-p-2 tw-rounded-md tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-12 tw-h-12 tw-flex-shrink-0 tw-shadow\"\r\n                                    [ngClass]=\"item.themeColor\"><span>{{item.date?.month}}</span><span\r\n                                        class=\"tw-text-sm\">{{item.date?.day}}</span></div>\r\n                                <div>\r\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.title}}</p>\r\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                        <div *ngSwitchCase=\"'studyStreak'\"\r\n                            class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center tw-flex-grow tw-p-4\">\r\n                            <svg class=\"tw-w-12 tw-h-12 tw-mb-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\r\n                                fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                                    d=\"M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7.014A8.003 8.003 0 0122 12c0 3-1 7-6.657 7.343A7.975 7.975 0 0117.657 18.657z\">\r\n                                </path>\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                                    d=\"M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z\"></path>\r\n                            </svg>\r\n                            <h3 class=\"tw-text-md tw-font-semibold tw-mb-1\"\r\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">{{card.title}}</h3>\r\n                            <p class=\"tw-text-xs tw-text-gray-500\">{{card.description}}</p>\r\n                            <div class=\"tw-mt-3 tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-1.5\">\r\n                                <div class=\"tw-h-1.5 tw-rounded-full\" [ngClass]=\"'tw-bg-' + card.accentColor + '-500'\"\r\n                                    [style.width]=\"card.progress\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'quickStats'\" class=\"tw-space-y-3.5 tw-flex-grow\">\r\n                            <h2 class=\"tw-text-md tw-font-semibold tw-mb-3 tw-border-b tw-border-gray-200/80 tw-pb-2\"\r\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">{{card.title}}</h2>\r\n                            <div *ngFor=\"let stat of card.stats\" class=\"tw-text-sm\">\r\n                                <div *ngIf=\"stat.gradient\" class=\"tw-text-sm\">\r\n                                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-0.5\">\r\n                                        <p class=\"tw-text-gray-600 tw-font-medium\">{{stat.label}}</p>\r\n                                        <p class=\"tw-text-xs tw-text-green-600 tw-font-semibold\">{{stat.value}}</p>\r\n                                    </div>\r\n                                    <div class=\"tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-2\">\r\n                                        <div class=\"tw-h-2 tw-rounded-full\" [ngClass]=\"stat.gradient\"\r\n                                            [style.width]=\"stat.value\"></div>\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"!stat.gradient\">\r\n                                    <p class=\"tw-text-gray-600 tw-font-medium tw-mb-0.5\">{{stat.label}}</p>\r\n                                    <p [ngClass]=\"stat.valueClass || ''\">{{stat.value}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <ul *ngSwitchCase=\"'discussions'\">\r\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <a href=\"#\" class=\"tw-block group\">\r\n                                    <p class=\"tw-font-medium tw-text-gray-700\"\r\n                                        [ngClass]=\"'group-hover:tw-text-' + card.accentColor + '-700'\">{{item.topic}}\r\n                                    </p>\r\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.forum}} - Last post: {{item.lastPost}}\r\n                                    </p>\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'quickLinks'\">\r\n                            <li *ngFor=\"let item of card.items\"><a href=\"#\"\r\n                                    class=\"tw-flex tw-items-center tw-p-2 tw-rounded-lg tw-text-gray-700 tw-transition-colors\"\r\n                                    [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70 hover:tw-text-' + card.accentColor + '-700'\"><svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mr-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\r\n                                        fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\r\n                                        [innerHTML]=\"item.safeIconSVG\"></svg>{{item.text}}</a></li>\r\n                        </ul>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <a *ngIf=\"card.link\" [href]=\"card.link.href\"\r\n                    class=\"tw-mt-auto tw-pt-3 tw-text-xs tw-font-medium tw-w-full tw-text-left hover:tw-underline\"\r\n                    [ngClass]=\"'tw-text-' + card.accentColor + '-600 hover:tw-text-' + card.accentColor + '-800'\">\r\n                    {{card.link.text}}\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </main>\r\n</div>"],"names":["i1.CideLytRequestService","i2"],"mappings":"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"}
+{"version":3,"file":"cloud-ide-layout-home-wrapper.component-BHRtEqmU.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/layout/home/home-wrapper/home-wrapper.component.ts","../../../projects/cloud-ide-layout/src/lib/layout/home/home-wrapper/home-wrapper.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { CideLytSharedWrapperComponent, CideLytSharedWrapperSetupParam } from '../../shared/shared-wrapper/shared-wrapper.component';\r\nimport { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Renderer2, inject, ChangeDetectorRef, Signal, signal, input } from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { CideLytSidebarService } from '../../sidebar/sidebar.service';\r\nimport { menuResponseData } from 'cloud-ide-lms-model';\r\nimport { CideIconComponent } from 'cloud-ide-element';\r\nimport { TooltipDirective } from 'cloud-ide-element';\r\nimport { CideLytRequestService } from '../../request/request.service';\r\nimport { AppStateHelperService } from '../../../services/app-state/app-state-helper.service';\r\nimport { Router } from '@angular/router';\r\n\r\n// --- Interfaces for our data structures ---\r\ninterface CardItem {\r\n  text?: string;\r\n  title?: string;\r\n  subtext?: string;\r\n  details?: string;\r\n  subject?: string;\r\n  grade?: string;\r\n  color?: string;\r\n  name?: string;\r\n  officeHours?: string;\r\n  messageLink?: string;\r\n  appointmentLink?: string;\r\n  professor?: string;\r\n  colorTheme?: string;\r\n  date?: { month: string; day: string };\r\n  themeColor?: string;\r\n  topic?: string;\r\n  forum?: string;\r\n  lastPost?: string;\r\n  iconSVG?: string;\r\n  safeIconSVG?: SafeHtml;\r\n}\r\n\r\ninterface CardStat {\r\n  label: string;\r\n  value: string;\r\n  gradient?: string;\r\n  valueClass?: string;\r\n}\r\n\r\ninterface Card {\r\n  id: string;\r\n  title: string;\r\n  type: string;\r\n  colSpan: string;\r\n  accentColor: string;\r\n  urgentText?: string;\r\n  insightTag?: string;\r\n  items?: CardItem[];\r\n  stats?: CardStat[];\r\n  progress?: string;\r\n  description?: string;\r\n  link?: { text: string; href: string };\r\n}\r\n\r\ninterface ModulesSectionConfig {\r\n  title: string;\r\n  viewAllLinkText: string;\r\n  viewAllLinkHref: string;\r\n  showViewAllLink: boolean;\r\n}\r\n\r\n@Component({\r\n  selector: 'cide-lyt-home-wrapper',\r\n  imports: [CommonModule, CideIconComponent, TooltipDirective],\r\n  templateUrl: './home-wrapper.component.html',\r\n  styleUrl: './home-wrapper.component.css',\r\n  styles: [`\r\n    :host {\r\n      height: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      overflow-y: auto;\r\n    }\r\n  `]\r\n})\r\nexport class CideLytHomeWrapperComponent extends CideLytSharedWrapperComponent implements OnInit, AfterViewInit {\r\n  public override shared_wrapper_setup_param = input<Partial<CideLytSharedWrapperSetupParam>>({\r\n    sypg_page_code: \"cide_lyt_home\"\r\n  });\r\n\r\n  private readonly sidebarService = inject(CideLytSidebarService);\r\n  private readonly sanitizer = inject(DomSanitizer);\r\n  private readonly renderer = inject(Renderer2);\r\n  private readonly cdr = inject(ChangeDetectorRef);\r\n  protected override appState = inject(AppStateHelperService);\r\n  protected override router = inject(Router);\r\n\r\n  private moduleStylePresets = [\r\n    { accentColor: \"#8B5CF6\" }, // purple\r\n    { accentColor: \"#EC4899\" }, // pink\r\n    { accentColor: \"#14B8A6\" }, // teal\r\n    { accentColor: \"#0EA5E9\" }, // sky\r\n    { accentColor: \"#F59E42\" }, // orange\r\n    { accentColor: \"#6366F1\" }, // indigo\r\n    { accentColor: \"#22C55E\" }, // green\r\n    { accentColor: \"#EF4444\" }, // red\r\n    { accentColor: \"#F59E0B\" }, // amber\r\n    { accentColor: \"#10B981\" }, // emerald\r\n    { accentColor: \"#06B6D4\" }, // cyan\r\n    { accentColor: \"#6B7280\" }, // gray\r\n    { accentColor: \"#8B5CF6\" }, // violet (same as purple for fallback)\r\n    { accentColor: \"#D946EF\" }  // fuchsia\r\n  ];\r\n\r\n  constructor(private requestService: CideLytRequestService) {\r\n    super();\r\n    // Sanitize SVG icons in the hardcoded cardsData\r\n    this.cardsData = this.cardsData.map(card => ({\r\n      ...card,\r\n      items: card.items?.map(item => ({\r\n        ...item,\r\n        safeIconSVG: item.iconSVG ? this.sanitizer.bypassSecurityTrustHtml(item.iconSVG) : undefined\r\n      }))\r\n    }));\r\n  }\r\n\r\n  @ViewChild('modulesContainer') modulesContainerRef!: ElementRef<HTMLDivElement>;\r\n  @ViewChild('scrollPrevModuleBtn') scrollPrevModuleBtnRef!: ElementRef<HTMLButtonElement>;\r\n  @ViewChild('scrollNextModuleBtn') scrollNextModuleBtnRef!: ElementRef<HTMLButtonElement>;\r\n  @ViewChild('cardsContainerEl') cardsContainerElRef!: ElementRef<HTMLDivElement>;\r\n\r\n  modulesSectionConfig: ModulesSectionConfig = {\r\n    title: \"Subscribed Modules\",\r\n    viewAllLinkText: \"View All Modules &rarr;\",\r\n    viewAllLinkHref: \"#all-modules\",\r\n    showViewAllLink: true\r\n  };\r\n\r\n  modulesData: (menuResponseData & { accentColor?: string; pillCount?: number })[] = [];\r\n  draggedItem: HTMLElement | null = null;\r\n  placeholder: HTMLElement | null = null;\r\n\r\n  override ngOnInit(): void {\r\n    super.ngOnInit?.();\r\n    this.loadModules();\r\n  }\r\n\r\n  openModule(module: menuResponseData) {\r\n    console.log(module, \"module\");\r\n    // Set the active module in app state - this will trigger sidebar updates\r\n    this.appState.setActiveModule(module);\r\n\r\n    // Navigate to the module route\r\n    // this.requestService.addTab(module.syme_title, `/control-panel/${module.syme_path}`);\r\n    this.router.navigate([`/control-panel/${module.syme_path}`]);\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    this.setupModuleScroller();\r\n    this.setupDragAndDrop();\r\n  }\r\n\r\n  private loadModules(): void {\r\n    this.sidebarService?.getSidebarMenues({ syme_type: \"module\", sort: 'asc', syme_title: \"\" })?.subscribe({\r\n      next: (res) => {\r\n        const fetchedApiModules = res?.data || [];\r\n        this.modulesData = fetchedApiModules.map((item: menuResponseData, index: number) => {\r\n          const stylePreset = this.moduleStylePresets[index % this.moduleStylePresets.length];\r\n          const insightCount = item.syme_ping_count || 0;\r\n          return {\r\n            ...item,\r\n            accentColor: stylePreset.accentColor, // UI-only property\r\n            pillCount: insightCount, // UI-only property\r\n          };\r\n        });\r\n        this.cdr.detectChanges();\r\n      },\r\n      error: (err) => {\r\n        console.error('Error loading sidebar modules:', err);\r\n        this.modulesData = [];\r\n      }\r\n    });\r\n  }\r\n\r\n  cardsData: Card[] = [\r\n    { id: \"card1\", title: \"Key Deadlines\", type: \"deadlines\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"purple\", urgentText: \"Urgent\", items: [{ text: \"Midterm Paper: PHIL201\", subtext: \"Due: Tomorrow, 11:59 PM\" }, { text: \"Lab Report: CHEM110\", subtext: \"Due: In 3 days\" }], link: { text: \"View All Deadlines &rarr;\", href: \"#\" } },\r\n    { id: \"card2\", title: \"Recent Grades\", type: \"grades\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"green\", items: [{ subject: \"PHYS101 Quiz 3\", grade: \"A-\", color: \"tw-text-green-600\" }, { subject: \"ENGL220 Essay\", grade: \"B+\", color: \"tw-text-yellow-600\" }], link: { text: \"Full Gradebook &rarr;\", href: \"#\" } },\r\n    { id: \"card7\", title: \"Study Streak: 12 Days!\", type: \"studyStreak\", colSpan: \"md:tw-col-span-2 xl:tw-col-span-1\", accentColor: \"yellow\", progress: \"80%\", description: \"Keep the momentum going!\" },\r\n    { id: \"card6\", title: \"Campus Events\", type: \"events\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-2\", accentColor: \"sky\", items: [{ date: { month: \"JUL\", day: \"10\" }, title: \"Workshop: AI Ethics\", details: \"Tech Hub, 3:00 PM - 5:00 PM\", themeColor: \"tw-bg-sky-500\" }, { date: { month: \"JUL\", day: \"12\" }, title: \"Student Union Mixer\", details: \"Quad, 7:00 PM onwards\", themeColor: \"tw-bg-red-500\" }], link: { text: \"Full Events Calendar &rarr;\", href: \"#\" } },\r\n    { id: \"card8\", title: \"Quick Stats\", type: \"quickStats\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"indigo\", stats: [{ label: \"Course Completion\", value: \"75%\", gradient: \"tw-from-green-400 tw-to-blue-500\" }, { label: \"Pending Assignments\", value: \"3\", valueClass: \"tw-text-2xl tw-font-bold tw-text-yellow-500\" }] },\r\n    { id: \"card4\", title: \"Campus News & Updates\", type: \"news\", colSpan: \"md:tw-col-span-2 xl:tw-col-span-3\", accentColor: \"blue\", items: [{ title: \"Annual Career Fair: Next Wednesday!\", details: \"Main Hall, 10 AM - 4 PM\" }, { title: 'Guest Lecture: \"AI in Modern Society\"', details: \"Speaker: Dr. Eva Rostova. July 18th\" }], link: { text: \"All News &rarr;\", href: \"#\" } },\r\n    { id: \"card9\", title: \"Discussion Forums\", type: \"discussions\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-2\", accentColor: \"emerald\", insightTag: \"3 Hot Topics\", items: [{ topic: \"Debate: Future of Renewable Energy\", forum: \"ENV101 Forum\", lastPost: \"5 mins ago\" }, { topic: \"Help with CS210 Algorithm\", forum: \"CS Study Group\", lastPost: \"23 mins ago\" }], link: { text: \"Go to Forums &rarr;\", href: \"#\" } },\r\n    { id: \"card5\", title: \"My Courses\", type: \"courses\", colSpan: \"md:tw-col-span-1 xl:tw-col-span-1\", accentColor: \"pink\", items: [{ name: \"ECON101: Microeconomics\", professor: \"Prof. Sharma\", colorTheme: \"pink\" }, { name: \"CS210: Data Structures\", professor: \"Dr. Carter\", colorTheme: \"indigo\" }], link: { text: \"Course Catalog &rarr;\", href: \"#\" } }\r\n  ];\r\n\r\n  setupModuleScroller(): void {\r\n    const modulesContainer = this.modulesContainerRef?.nativeElement;\r\n    const scrollPrevBtn = this.scrollPrevModuleBtnRef?.nativeElement;\r\n    const scrollNextBtn = this.scrollNextModuleBtnRef?.nativeElement;\r\n    if (modulesContainer && scrollPrevBtn && scrollNextBtn) {\r\n      const scrollAmount = 256;\r\n      const updateArrowStates = () => {\r\n        if (!modulesContainer) return;\r\n        scrollPrevBtn.disabled = modulesContainer.scrollLeft <= 0;\r\n        scrollNextBtn.disabled = modulesContainer.scrollLeft + modulesContainer.clientWidth >= modulesContainer.scrollWidth - 1;\r\n      };\r\n      this.renderer.listen(scrollPrevBtn, 'click', () => modulesContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));\r\n      this.renderer.listen(scrollNextBtn, 'click', () => modulesContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' }));\r\n      this.renderer.listen(modulesContainer, 'scroll', updateArrowStates);\r\n      new ResizeObserver(updateArrowStates).observe(modulesContainer);\r\n      setTimeout(updateArrowStates, 100);\r\n      // Remove preventDefault for wheel/touchmove to allow mouse/touch scrolling\r\n    }\r\n  }\r\n\r\n  setupDragAndDrop(): void {\r\n    const cardsContainer = this.cardsContainerElRef?.nativeElement;\r\n    if (!cardsContainer) return;\r\n    this.placeholder = this.renderer.createElement('div');\r\n    this.renderer.addClass(this.placeholder!, 'drag-over-placeholder');\r\n    this.renderer.listen(cardsContainer, 'dragstart', (e: DragEvent) => {\r\n      const target = e.target as HTMLElement;\r\n      if (target.classList.contains('dashboard-card')) {\r\n        this.draggedItem = target;\r\n        // Modern ES2022+ pattern: Use microtask for immediate execution\r\n        Promise.resolve().then(() => this.renderer.addClass(target, 'dragging'));\r\n        e.dataTransfer?.setData('text/plain', target.id || 'draggable-card');\r\n        if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';\r\n      }\r\n    });\r\n    this.renderer.listen(cardsContainer, 'dragend', () => {\r\n      if (this.draggedItem) this.renderer.removeClass(this.draggedItem, 'dragging');\r\n      if (this.placeholder?.parentNode) this.renderer.removeChild(this.placeholder.parentNode, this.placeholder);\r\n      this.draggedItem = null;\r\n    });\r\n    this.renderer.listen(cardsContainer, 'dragover', (e: DragEvent) => {\r\n      e.preventDefault();\r\n      if (!this.draggedItem) return;\r\n      const target = (e.target as HTMLElement).closest('.dashboard-card') as HTMLElement | null;\r\n      if (target && target !== this.draggedItem) {\r\n        const rect = target.getBoundingClientRect();\r\n        const offsetY = e.clientY - rect.top;\r\n        if (offsetY > rect.height / 2) {\r\n          this.renderer.insertBefore(cardsContainer, this.placeholder!, target.nextSibling);\r\n        } else {\r\n          this.renderer.insertBefore(cardsContainer, this.placeholder!, target);\r\n        }\r\n      }\r\n    });\r\n    this.renderer.listen(cardsContainer, 'drop', (e: DragEvent) => {\r\n      e.preventDefault();\r\n      if (this.draggedItem && this.placeholder?.parentNode) {\r\n        this.renderer.insertBefore(this.placeholder.parentNode, this.draggedItem, this.placeholder);\r\n      }\r\n      if (this.placeholder?.parentNode) this.renderer.removeChild(this.placeholder.parentNode, this.placeholder);\r\n      if (this.draggedItem) this.renderer.removeClass(this.draggedItem, 'dragging');\r\n      this.draggedItem = null;\r\n    });\r\n  }\r\n}\r\n","<div class=\"tw-p-4 sm:tw-p-6 md:tw-p-8 tw-max-w-full tw-mx-auto\">\r\n    <header class=\"tw-mb-8 md:tw-mb-10\">\r\n        <h1\r\n            class=\"tw-text-3xl sm:tw-text-4xl tw-font-bold tw-text-transparent tw-bg-clip-text tw-bg-gradient-to-r tw-from-purple-600 tw-via-pink-500 tw-to-orange-500\">\r\n            Welcome, {{ appState.getUserName() || 'User' }}!\r\n        </h1>\r\n        <p class=\"tw-text-sm tw-text-gray-500 tw-mt-1\">Your central hub for all things college.</p>\r\n        <p *ngIf=\"appState.getUserEmail()\" class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">{{ appState.getUserEmail() }}</p>\r\n    </header>\r\n\r\n    <div class=\"tw-mb-8 md:tw-mb-10\">\r\n        <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-5\">\r\n            <h2 class=\"tw-text-xl tw-font-bold tw-text-gray-700\">{{ modulesSectionConfig.title }}</h2>\r\n            <a *ngIf=\"modulesSectionConfig.showViewAllLink\" [href]=\"modulesSectionConfig.viewAllLinkHref\"\r\n                class=\"tw-text-sm tw-font-medium tw-text-purple-600 hover:tw-text-purple-800 hover:tw-underline tw-transition-colors\">\r\n                {{ modulesSectionConfig.viewAllLinkText }}\r\n            </a>\r\n        </div>\r\n        <div class=\"tw-relative group/modules tw-max-w-full\">\r\n            <button #scrollPrevModuleBtn aria-label=\"Scroll previous modules\"\r\n                class=\"tw-absolute tw--left-4 tw-z-50 tw-p-2 tw-bg-white/90 tw-bg-opacity-90 tw-backdrop-blur-sm tw-rounded-full tw-shadow-lg hover:tw-bg-gray-100 tw-transition-all tw-opacity-100 md:group-hover/modules:tw-opacity-100 disabled:tw-opacity-30 disabled:tw-cursor-not-allowed tw-pointer-events-auto\"\r\n                style=\"top: 2.875rem;\">\r\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\r\n                </svg>\r\n            </button>\r\n\r\n            <div #modulesContainer\r\n                class=\"tw-flex tw-space-x-4 tw-pb-6 tw-overflow-x-auto tw-overflow-y-visible tw-scroll-smooth tw-snap-x tw-snap-mandatory hide-scrollbar\"\r\n                style=\"touch-action: none; pointer-events: auto;\">\r\n                <a *ngFor=\"let module of modulesData\" \r\n                   (click)=\"openModule(module)\"\r\n                   (keydown.enter)=\"openModule(module)\"\r\n                   (keydown.space)=\"openModule(module)\"\r\n                   class=\"module-card tw-relative tw-overflow-hidden group tw-flex-shrink-0 tw-w-60 tw-h-28 tw-bg-white tw-border tw-border-gray-200/80 tw-rounded-xl tw-p-3 tw-shadow-md hover:tw-shadow-xl tw-transition-all tw-duration-300 tw-ease-out tw-flex tw-items-center tw-space-x-4 tw-snap-start\"\r\n                   [style.--accent-color]=\"module.accentColor\" \r\n                   tabindex=\"0\"\r\n                   role=\"button\"\r\n                   [attr.aria-label]=\"'Open module: ' + module.syme_title\">\r\n                    <div class=\"tw-relative tw-flex-shrink-0\">\r\n                        <div class=\"tw-w-16 tw-h-16 tw-rounded-lg tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-300 group-hover:tw-scale-105\"\r\n                            [style.backgroundColor]=\"module?.accentColor + '22'\">\r\n                            <!-- icon rendering here if needed -->\r\n                            <cide-ele-icon class=\"mpro-icon-field\" type=\"none\">{{module?.syme_icon}}</cide-ele-icon>\r\n                        </div>\r\n                        <div *ngIf=\"(module?.pillCount || 0) > 0\" class=\"tw-absolute tw--top-1.5 tw--right-1.5\">\r\n                            <span\r\n                                class=\"tw-flex tw-h-5 tw-w-5 tw-items-center tw-justify-center tw-rounded-full tw-text-white tw-text-xs tw-font-bold tw-ring-2 tw-ring-white\"\r\n                                [style.backgroundColor]=\"module?.accentColor\">{{module?.pillCount}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tw-flex tw-flex-col tw-flex-grow tw-min-w-0\">\r\n                        <h4 class=\"tw-font-semibold tw-text-xs tw-text-gray-800 tw-truncate line-clamp-1\" cideEleTooltip\r\n                            [cideEleTooltip]=\"module.syme_title\" [tooltipDelay]=\"300\" [tooltipPlacement]=\"'top'\">\r\n                            {{module?.syme_title}}\r\n                        </h4>\r\n                        <p\r\n                            class=\"tw-text-xs tw-text-gray-400 tw-mt-0.5 tw-overflow-hidden tw-text-ellipsis tw-line-clamp-2 tw-text-justify min-h-[2.5rem]\">\r\n                            {{module?.syme_desc}}\r\n                        </p>\r\n                    </div>\r\n                </a>\r\n            </div>\r\n\r\n            <button #scrollNextModuleBtn aria-label=\"Scroll next modules\"\r\n                class=\"tw-absolute tw--right-4 tw-z-50 tw-p-2 tw-bg-white/90 tw-bg-opacity-90 tw-backdrop-blur-sm tw-rounded-full tw-shadow-lg hover:tw-bg-gray-100 tw-transition-all tw-opacity-100 md:group-hover/modules:tw-opacity-100 disabled:tw-opacity-30 disabled:tw-cursor-not-allowed tw-pointer-events-auto\"\r\n                style=\"top: 2.875rem;\">\r\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <main class=\"tw--mt-8 md:tw--mt-10\">\r\n        <div #cardsContainerEl class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-5\">\r\n            <div *ngFor=\"let card of cardsData\" draggable=\"true\" [id]=\"card.id\"\r\n                class=\"dashboard-card tw-bg-white tw-border tw-border-gray-200/70 tw-rounded-xl tw-p-4 tw-shadow-lg hover:tw-shadow-xl hover:tw--translate-y-0.5 tw-transition-all tw-cursor-grab\"\r\n                [ngClass]=\"card.colSpan || 'tw-col-span-1'\">\r\n\r\n                <div *ngIf=\"card.type !== 'studyStreak' && card.type !== 'quickStats'\"\r\n                    class=\"tw-flex tw-justify-between tw-items-center tw-mb-3\">\r\n                    <h3 class=\"tw-text-md tw-font-semibold\" [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">\r\n                        {{card.title}}</h3>\r\n                    <span *ngIf=\"card.urgentText\"\r\n                        class=\"tw-text-xs tw-bg-red-100 tw-text-red-700 tw-px-2.5 tw-py-1 tw-rounded-full tw-font-semibold\">{{card.urgentText}}</span>\r\n                    <span *ngIf=\"card.insightTag\" class=\"tw-text-xs tw-px-2.5 tw-py-1 tw-rounded-full tw-font-semibold\"\r\n                        [ngClass]=\"'tw-bg-' + card.accentColor + '-100 tw-text-' + card.accentColor + '-700'\">{{card.insightTag}}</span>\r\n                </div>\r\n\r\n                <div class=\"card-content-area tw-space-y-3 tw-text-sm tw-pr-1\">\r\n                    <ng-container [ngSwitch]=\"card.type\">\r\n                        <ul *ngSwitchCase=\"'deadlines'\">\r\n                            <li *ngFor=\"let item of card.items\"\r\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <div>\r\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.text}}</p>\r\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.subtext}}</p>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'news'\">\r\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <p class=\"tw-font-medium tw-text-gray-800\">{{item.title}}</p>\r\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'grades'\">\r\n                            <li *ngFor=\"let item of card.items\"\r\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <span class=\"tw-text-gray-700\">{{item.subject}}</span><span class=\"tw-font-bold\"\r\n                                    [ngClass]=\"item.color\">{{item.grade}}</span>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'professorConnect'\">\r\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <p class=\"tw-font-medium tw-text-gray-700\">{{item.name}}</p>\r\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.officeHours}}</p><a\r\n                                    *ngIf=\"item.messageLink\" [href]=\"item.messageLink\"\r\n                                    class=\"tw-text-xs hover:tw-underline\"\r\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Send Message</a><a\r\n                                    *ngIf=\"item.appointmentLink\" [href]=\"item.appointmentLink\"\r\n                                    class=\"tw-text-xs hover:tw-underline tw-ml-2\"\r\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Book Appointment</a>\r\n                            </li>\r\n                        </ul>\r\n                        <div *ngSwitchCase=\"'courses'\" class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-2.5\"><a\r\n                                *ngFor=\"let item of card.items\" href=\"#\"\r\n                                class=\"tw-block tw-p-2.5 tw-rounded-lg tw-transition-all group tw-ring-1\"\r\n                                [ngClass]=\"'tw-bg-' + item.colorTheme + '-50/70 hover:tw-bg-' + item.colorTheme + '-100/80 tw-ring-' + item.colorTheme + '-200/70 hover:tw-ring-' + item.colorTheme + '-300'\">\r\n                                <p class=\"tw-font-semibold group-hover:tw-text-{{item.colorTheme}}-800\"\r\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-700'\">{{item.name}}</p>\r\n                                <p class=\"tw-text-xs group-hover:tw-text-{{item.colorTheme}}-600 tw-mt-0.5\"\r\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-500'\">{{item.professor}}</p>\r\n                            </a></div>\r\n                        <ul *ngSwitchCase=\"'events'\">\r\n                            <li *ngFor=\"let item of card.items\"\r\n                                class=\"tw-flex tw-items-start tw-space-x-2.5 tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <div class=\"tw-text-white tw-text-xs tw-font-bold tw-p-2 tw-rounded-md tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-12 tw-h-12 tw-flex-shrink-0 tw-shadow\"\r\n                                    [ngClass]=\"item.themeColor\"><span>{{item.date?.month}}</span><span\r\n                                        class=\"tw-text-sm\">{{item.date?.day}}</span></div>\r\n                                <div>\r\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.title}}</p>\r\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                        <div *ngSwitchCase=\"'studyStreak'\"\r\n                            class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center tw-flex-grow tw-p-4\">\r\n                            <svg class=\"tw-w-12 tw-h-12 tw-mb-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\r\n                                fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                                    d=\"M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7.014A8.003 8.003 0 0122 12c0 3-1 7-6.657 7.343A7.975 7.975 0 0117.657 18.657z\">\r\n                                </path>\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                                    d=\"M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z\"></path>\r\n                            </svg>\r\n                            <h3 class=\"tw-text-md tw-font-semibold tw-mb-1\"\r\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">{{card.title}}</h3>\r\n                            <p class=\"tw-text-xs tw-text-gray-500\">{{card.description}}</p>\r\n                            <div class=\"tw-mt-3 tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-1.5\">\r\n                                <div class=\"tw-h-1.5 tw-rounded-full\" [ngClass]=\"'tw-bg-' + card.accentColor + '-500'\"\r\n                                    [style.width]=\"card.progress\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngSwitchCase=\"'quickStats'\" class=\"tw-space-y-3.5 tw-flex-grow\">\r\n                            <h2 class=\"tw-text-md tw-font-semibold tw-mb-3 tw-border-b tw-border-gray-200/80 tw-pb-2\"\r\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">{{card.title}}</h2>\r\n                            <div *ngFor=\"let stat of card.stats\" class=\"tw-text-sm\">\r\n                                <div *ngIf=\"stat.gradient\" class=\"tw-text-sm\">\r\n                                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-0.5\">\r\n                                        <p class=\"tw-text-gray-600 tw-font-medium\">{{stat.label}}</p>\r\n                                        <p class=\"tw-text-xs tw-text-green-600 tw-font-semibold\">{{stat.value}}</p>\r\n                                    </div>\r\n                                    <div class=\"tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-2\">\r\n                                        <div class=\"tw-h-2 tw-rounded-full\" [ngClass]=\"stat.gradient\"\r\n                                            [style.width]=\"stat.value\"></div>\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"!stat.gradient\">\r\n                                    <p class=\"tw-text-gray-600 tw-font-medium tw-mb-0.5\">{{stat.label}}</p>\r\n                                    <p [ngClass]=\"stat.valueClass || ''\">{{stat.value}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <ul *ngSwitchCase=\"'discussions'\">\r\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\r\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\r\n                                <a href=\"#\" class=\"tw-block group\">\r\n                                    <p class=\"tw-font-medium tw-text-gray-700\"\r\n                                        [ngClass]=\"'group-hover:tw-text-' + card.accentColor + '-700'\">{{item.topic}}\r\n                                    </p>\r\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.forum}} - Last post: {{item.lastPost}}\r\n                                    </p>\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                        <ul *ngSwitchCase=\"'quickLinks'\">\r\n                            <li *ngFor=\"let item of card.items\"><a href=\"#\"\r\n                                    class=\"tw-flex tw-items-center tw-p-2 tw-rounded-lg tw-text-gray-700 tw-transition-colors\"\r\n                                    [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70 hover:tw-text-' + card.accentColor + '-700'\"><svg\r\n                                        class=\"tw-w-4 tw-h-4 tw-mr-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\r\n                                        fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\r\n                                        [innerHTML]=\"item.safeIconSVG\"></svg>{{item.text}}</a></li>\r\n                        </ul>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <a *ngIf=\"card.link\" [href]=\"card.link.href\"\r\n                    class=\"tw-mt-auto tw-pt-3 tw-text-xs tw-font-medium tw-w-full tw-text-left hover:tw-underline\"\r\n                    [ngClass]=\"'tw-text-' + card.accentColor + '-600 hover:tw-text-' + card.accentColor + '-800'\">\r\n                    {{card.link.text}}\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </main>\r\n</div>"],"names":["i1.CideLytRequestService","i2"],"mappings":"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"}

package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-B9f218TW.mjs → cloud-ide-layout-sidedrawer-notes.component-CBaWZcFe.mjs}

@@ -9,7 +9,7 @@ import { cidePath, hostManagerRoutesUrl, coreRoutesUrl } from 'cloud-ide-lms-mod
 import { of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { CideInputComponent, CideEleButtonComponent, CideTextareaComponent } from 'cloud-ide-element';
-import { c as CideLytSidedrawerService, A as AppStateHelperService } from './cloud-ide-layout-cloud-ide-layout-zxDOzv0V.mjs';
+import { c as CideLytSidedrawerService, A as AppStateHelperService } from './cloud-ide-layout-cloud-ide-layout-BamR8RAT.mjs';
 
 class CideLytDrawerNotesService {
     // Modern Angular v20 dependency injection pattern
@@ -245,7 +245,7 @@ class CideLytSidedrawerNotesComponent extends CideLytDrawerBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerNotesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytSidedrawerNotesComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-notes", usesInheritance: true, ngImport: i0, template: "<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\r\n  <!-- FIXED HEADER SECTION (ABSOLUTE POSITIONED) -->\r\n  <div class=\"tw-bg-white tw-border-b tw-border-gray-200\">\r\n    <!-- DYNAMIC HEADING -->\r\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\r\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">\r\n        {{ isFormVisible ? (isEditing ? 'Edit Note' : 'Add a New Note') : 'Notes' }}\r\n      </h6>\r\n      <button *ngIf=\"!isFormVisible\" (click)=\"showAddForm()\" cideEleButton variant=\"primary\"\r\n        class=\"tw-p-2 !tw-w-7 !tw-px-0 !tw-rounded-full tw-animate-pulse\" title=\"Add New Note\">\r\n        <!-- Using inline SVG for the plus icon for simplicity -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ADD NOTE FORM (ANIMATED WRAPPER) -->\r\n    <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out tw-animate-fade-in\" [class.tw-opacity-100]=\"isFormVisible\"\r\n      [class.tw-opacity-0]=\"!isFormVisible\" [class.tw-max-h-0]=\"!isFormVisible\">\r\n      <form [formGroup]=\"noteForm\" (ngSubmit)=\"onSubmit()\" class=\"tw-p-3 tw-space-y-4\" *ngIf=\"isFormVisible\">\r\n        <!-- Title Input -->\r\n        <cide-ele-input name=\"sypn_title\" formControlName=\"sypn_title\" placeholder=\"Note Title\" label=\"Note Title\"\r\n          [required]=\"true\" [type]=\"'text'\" class=\"tw-w-full tw-transition-all tw-duration-200 focus:tw-scale-[1.02]\"></cide-ele-input>\r\n\r\n        <!-- Description Textarea -->\r\n        <cide-ele-textarea placeholder=\"What's on your mind? (Optional)\" id=\"sypn_desc\" formControlName=\"sypn_desc\"\r\n          rows=\"4\" label=\"Description\" class=\"tw-transition-all tw-duration-200 focus:tw-scale-[1.02]\"></cide-ele-textarea>\r\n\r\n        <!-- Toggle Switches -->\r\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_page_specific\" label=\"Page Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_user_specific\" label=\"User Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_entity_specific\" label=\"Entity Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_theme_specific\" label=\"Theme Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-space-x-3 tw-pt-4\">\r\n          <button cideEleButton size=\"xs\" variant=\"primary\" type=\"submit\" [disabled]=\"noteForm.invalid\">\r\n            {{ isEditing ? 'Update Note' : 'Add Note' }}\r\n          </button>\r\n          <button cideEleButton size=\"xs\" variant=\"secondary\" type=\"button\"\r\n            (click)=\"isEditing ? cancelEdit() : hideAddForm()\">\r\n            {{ isEditing ? 'Cancel Edit' : 'Cancel' }}\r\n          </button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- SCROLLABLE NOTES SECTION (BELOW FIXED HEADER) -->\r\n  <div class=\"tw-overflow-y-auto tw-scroll-smooth notes-scroll-container\">\r\n    <!-- Modern Angular v20 pattern: Use Signals directly -->\r\n    <div class=\"\" *ngIf=\"notes() as notes; else loading\">\r\n      <!-- Show notes if the array is not empty -->\r\n      <div *ngIf=\"notes.length > 0; else noNotes\">\r\n        <div *ngFor=\"let note of notes; let i = index\"\r\n          class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-p-4 tw-shadow-sm hover:tw-shadow-md tw-transition-all tw-duration-300 tw-ease-in-out tw-relative tw-transform hover:tw-translate-y-[-2px] hover:tw-shadow-lg\"\r\n          (mouseenter)=\"onNoteHover(i)\" (mouseleave)=\"onNoteLeave()\">\r\n          <!-- Edit Button (visible on hover) -->\r\n          <button (click)=\"startEdit(note)\" [class.tw-opacity-100]=\"hoveredNoteIndex === i\"\r\n            [class.tw-opacity-0]=\"hoveredNoteIndex !== i\"\r\n            class=\"tw-absolute tw-top-2 tw-right-2 tw-transition-all tw-duration-200 tw-p-1 tw-rounded tw-bg-gray-100 hover:tw-bg-gray-200 hover:tw-scale-110 tw-z-10\"\r\n            title=\"Edit Note\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\r\n              <path d=\"m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\r\n            </svg>\r\n          </button>\r\n\r\n          <h6 class=\"tw-font-medium tw-text-gray-900 tw-mb-2 tw-pr-8\">{{ note.sypn_title }}</h6>\r\n          <p class=\"tw-text-gray-600 tw-text-sm tw-mb-3\">{{ note.sypn_desc }}</p>\r\n          <div class=\"tw-flex tw-flex-wrap tw-gap-2\">\r\n            <span *ngIf=\"note.sypn_is_page_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-blue-100 tw-text-blue-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-blue-200\">Page Specific</span>\r\n            <span *ngIf=\"note.sypn_is_user_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-green-200\">User Specific</span>\r\n            <span *ngIf=\"note.sypn_is_entity_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-purple-100 tw-text-purple-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-purple-200\">Entity\r\n              Specific</span>\r\n            <span *ngIf=\"note.sypn_is_theme_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-orange-100 tw-text-orange-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-orange-200\">Theme\r\n              Specific</span>\r\n          </div>\r\n          <!-- <p class=\"note-date\">{{ note.createdAt | date:'short' }}</p> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Template to show when there are no notes -->\r\n    <ng-template #noNotes>\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-8 tw-text-center\">\r\n        <div class=\"tw-w-12 tw-h-12 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-4 tw-animate-bounce\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"tw-text-gray-400\">\r\n            <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\r\n            <polyline points=\"14,2 14,8 20,8\"></polyline>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>\r\n            <polyline points=\"10,9 9,9 8,9\"></polyline>\r\n          </svg>\r\n        </div>\r\n        <p class=\"tw-text-gray-500 tw-mb-2\">No notes found.</p>\r\n        <p class=\"tw-text-sm tw-text-gray-400\">Click the '+' to add one!</p>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Template to show while notes are loading -->\r\n    <ng-template #loading>\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-8\">\r\n        <div class=\"tw-w-8 tw-h-8 tw-border-4 tw-border-blue-200 tw-border-t-blue-600 tw-rounded-full tw-animate-spin tw-mb-4\"></div>\r\n        <p class=\"tw-text-gray-500 tw-text-sm\">Loading notes...</p>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytSidedrawerNotesComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-notes", usesInheritance: true, ngImport: i0, template: "<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\r\n  <!-- FIXED HEADER SECTION (ABSOLUTE POSITIONED) -->\r\n  <div class=\"tw-bg-white tw-border-b tw-border-gray-200\">\r\n    <!-- DYNAMIC HEADING -->\r\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\r\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">\r\n        {{ isFormVisible ? (isEditing ? 'Edit Note' : 'Add a New Note') : 'Notes' }}\r\n      </h6>\r\n      <button *ngIf=\"!isFormVisible\" (click)=\"showAddForm()\" cideEleButton variant=\"primary\"\r\n        class=\"tw-p-2 !tw-w-7 !tw-px-0 !tw-rounded-full tw-animate-pulse\" title=\"Add New Note\">\r\n        <!-- Using inline SVG for the plus icon for simplicity -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- ADD NOTE FORM (ANIMATED WRAPPER) -->\r\n    <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out tw-animate-fade-in\" [class.tw-opacity-100]=\"isFormVisible\"\r\n      [class.tw-opacity-0]=\"!isFormVisible\" [class.tw-max-h-0]=\"!isFormVisible\">\r\n      <form [formGroup]=\"noteForm\" (ngSubmit)=\"onSubmit()\" class=\"tw-p-3 tw-space-y-4\" *ngIf=\"isFormVisible\">\r\n        <!-- Title Input -->\r\n        <cide-ele-input name=\"sypn_title\" formControlName=\"sypn_title\" placeholder=\"Note Title\" label=\"Note Title\"\r\n          [required]=\"true\" [type]=\"'text'\" class=\"tw-w-full tw-transition-all tw-duration-200 focus:tw-scale-[1.02]\"></cide-ele-input>\r\n\r\n        <!-- Description Textarea -->\r\n        <cide-ele-textarea placeholder=\"What's on your mind? (Optional)\" id=\"sypn_desc\" formControlName=\"sypn_desc\"\r\n          rows=\"4\" label=\"Description\" class=\"tw-transition-all tw-duration-200 focus:tw-scale-[1.02]\"></cide-ele-textarea>\r\n\r\n        <!-- Toggle Switches -->\r\n        <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_page_specific\" label=\"Page Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_user_specific\" label=\"User Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_entity_specific\" label=\"Entity Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n\r\n          <cide-ele-input [type]=\"'checkbox'\" formControlName=\"sypn_is_theme_specific\" label=\"Theme Specific\"\r\n            class=\"tw-flex tw-items-center tw-space-x-2\"></cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-space-x-3 tw-pt-4\">\r\n          <button cideEleButton size=\"xs\" variant=\"primary\" type=\"submit\" [disabled]=\"noteForm.invalid\">\r\n            {{ isEditing ? 'Update Note' : 'Add Note' }}\r\n          </button>\r\n          <button cideEleButton size=\"xs\" variant=\"secondary\" type=\"button\"\r\n            (click)=\"isEditing ? cancelEdit() : hideAddForm()\">\r\n            {{ isEditing ? 'Cancel Edit' : 'Cancel' }}\r\n          </button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- SCROLLABLE NOTES SECTION (BELOW FIXED HEADER) -->\r\n  <div class=\"tw-overflow-y-auto tw-scroll-smooth notes-scroll-container\">\r\n    <!-- Modern Angular v20 pattern: Use Signals directly -->\r\n    <div class=\"\" *ngIf=\"notes() as notes; else loading\">\r\n      <!-- Show notes if the array is not empty -->\r\n      <div *ngIf=\"notes.length > 0; else noNotes\">\r\n        <div *ngFor=\"let note of notes; let i = index\"\r\n          class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-p-4 tw-shadow-sm hover:tw-shadow-md tw-transition-all tw-duration-300 tw-ease-in-out tw-relative tw-transform hover:tw-translate-y-[-2px] hover:tw-shadow-lg\"\r\n          (mouseenter)=\"onNoteHover(i)\" (mouseleave)=\"onNoteLeave()\">\r\n          <!-- Edit Button (visible on hover) -->\r\n          <button (click)=\"startEdit(note)\" [class.tw-opacity-100]=\"hoveredNoteIndex === i\"\r\n            [class.tw-opacity-0]=\"hoveredNoteIndex !== i\"\r\n            class=\"tw-absolute tw-top-2 tw-right-2 tw-transition-all tw-duration-200 tw-p-1 tw-rounded tw-bg-gray-100 hover:tw-bg-gray-200 hover:tw-scale-110 tw-z-10\"\r\n            title=\"Edit Note\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path>\r\n              <path d=\"m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path>\r\n            </svg>\r\n          </button>\r\n\r\n          <h6 class=\"tw-font-medium tw-text-gray-900 tw-mb-2 tw-pr-8\">{{ note.sypn_title }}</h6>\r\n          <p class=\"tw-text-gray-600 tw-text-sm tw-mb-3\">{{ note.sypn_desc }}</p>\r\n          <div class=\"tw-flex tw-flex-wrap tw-gap-2\">\r\n            <span *ngIf=\"note.sypn_is_page_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-blue-100 tw-text-blue-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-blue-200\">Page Specific</span>\r\n            <span *ngIf=\"note.sypn_is_user_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-green-200\">User Specific</span>\r\n            <span *ngIf=\"note.sypn_is_entity_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-purple-100 tw-text-purple-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-purple-200\">Entity\r\n              Specific</span>\r\n            <span *ngIf=\"note.sypn_is_theme_specific\"\r\n              class=\"tw-px-2 tw-py-1 tw-bg-orange-100 tw-text-orange-800 tw-text-xs tw-rounded-full tw-transition-all tw-duration-200 hover:tw-scale-105 hover:tw-bg-orange-200\">Theme\r\n              Specific</span>\r\n          </div>\r\n          <!-- <p class=\"note-date\">{{ note.createdAt | date:'short' }}</p> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Template to show when there are no notes -->\r\n    <ng-template #noNotes>\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-8 tw-text-center\">\r\n        <div class=\"tw-w-12 tw-h-12 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-4 tw-animate-bounce\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"tw-text-gray-400\">\r\n            <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\r\n            <polyline points=\"14,2 14,8 20,8\"></polyline>\r\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>\r\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>\r\n            <polyline points=\"10,9 9,9 8,9\"></polyline>\r\n          </svg>\r\n        </div>\r\n        <p class=\"tw-text-gray-500 tw-mb-2\">No notes found.</p>\r\n        <p class=\"tw-text-sm tw-text-gray-400\">Click the '+' to add one!</p>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Template to show while notes are loading -->\r\n    <ng-template #loading>\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-8\">\r\n        <div class=\"tw-w-8 tw-h-8 tw-border-4 tw-border-blue-200 tw-border-t-blue-600 tw-rounded-full tw-animate-spin tw-mb-4\"></div>\r\n        <p class=\"tw-text-gray-500 tw-text-sm\">Loading notes...</p>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerNotesComponent, decorators: [{
             type: Component,
@@ -253,4 +253,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
         }] });
 
 export { CideLytSidedrawerNotesComponent };
-//# sourceMappingURL=cloud-ide-layout-sidedrawer-notes.component-B9f218TW.mjs.map
+//# sourceMappingURL=cloud-ide-layout-sidedrawer-notes.component-CBaWZcFe.mjs.map