cloud-ide-layout 1.0.166 → 1.0.168

package/fesm2022/cloud-ide-layout-drawer-theme.component-CzGTCVg9.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"cloud-ide-layout-drawer-theme.component-CzGTCVg9.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, store base value and append 'px' unit\n    const baseVarName = setting.varName + '-base';\n    this.updateVar(baseVarName, setting.value);\n    this.updateVar(setting.varName, setting.value + 'px');\n  }\n\n  onScaleChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    // For responsive scale, set as unitless number\n    this.updateVar(setting.varName, setting.value);\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          <!-- Responsive Scale: label on top, input in middle, unitless at bottom -->\n          <ng-container *ngIf=\"group.label === 'Responsive Scale'\">\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.01\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onScaleChange($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\">scale</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' && group.label !== 'Responsive Scale'\">\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":["i2"],"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;IACrC;IAEJ,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,4BAAA,CAAC,CAAC;wBACJ;oBACF;gBACF;YACF,CAAC;YACD,KAAK,EAAE,MAAK;AACV,gBAAA,IAAI,CAAC,cAAc,GAAG,uBAAuB;AAC7C,gBAAA,IAAI,CAAC,eAAe,GAAG,KAAK;YAC9B;AACD,SAAA,CAAC;QACF,IAAI,CAAC,qBAAqB,EAAE;IAC9B;IAEA,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;gBAChD;;AAEA,gBAAA,IAAI,IAAI,EAAE,gBAAgB,EAAE;oBAC1B,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE;gBAClD;AACA,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,gBAAA,CAAC,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;wBAC1D;oBACF;gBACF;;gBAEA,IAAI,CAAC,wBAAwB,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;YAC7D,CAAC;YACD,KAAK,EAAE,MAAK;;YAEZ;AACD,SAAA,CAAC;IACJ;;IAGA,SAAS,CAAC,OAAe,EAAE,KAAa,EAAA;;QAEtC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;;IAEjD;AAEA,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;QAC1E;IACF;AAEA,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;YAC9B;iBAAO;;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;wBAC1D;oBACF;gBACF;;gBAEA,IAAI,CAAC,wBAAwB,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;YAC7D;QACF;IACF;IAEA,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;gBAC1D;YACF;QACF;;QAGA,IAAI,CAAC,wBAAwB,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;IAC7D;IAEA,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;YAC5D;QACF;AAEA,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;YACpD,CAAC;AACD,YAAA,KAAK,EAAE,CAAC,KAAK,KAAI;AACf,gBAAA,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC;YAC7C;AACD,SAAA,CAAC;IACJ;IAEA,iBAAiB,GAAA;;QAEf,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,IAAI,CAAC,aAAa,EAAE;AAC5D,YAAA,OAAO,IAAI;QACb;;QAEA,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,wBAAwB,CAAC;IAClE;AAEA;;;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;gBACb;YACF;QACF;AACA,QAAA,OAAO,KAAK;IACd;IAEA,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;IAC5C;IAEA,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;IAC5F;IAEA,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,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,GAAG,OAAO;QAC7C,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC;AAC1C,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;IACvD;IAEA,aAAa,CAAC,KAAY,EAAE,OAA0B,EAAA;AACpD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;;QAE3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC;IAChD;AAEA,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;IAC3D;AA/TW,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,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,SAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/CxC,q8SA0IM,EAAA,MAAA,EAAA,CAAA,+iDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED/FM,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,iGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,uGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gHAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gHAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,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,uaAAE,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;;4FAI7E,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,q8SAAA,EAAA,MAAA,EAAA,CAAA,+iDAAA,CAAA,EAAA;;0BAsEtF,MAAM;2BAAC,WAAW;;;;;"}

package/fesm2022/cloud-ide-layout-home-wrapper.component-BR-ETlty.mjs

@@ -1,324 +0,0 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { C as CideLytSharedWrapperComponent, a as CideLytSidebarService, A as AppStateHelperService } from './cloud-ide-layout-cloud-ide-layout-BGVK8JFk.mjs';
-import * as i0 from '@angular/core';
-import { input, inject, Renderer2, ChangeDetectorRef, signal, computed, effect, ViewChild, Component } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { CideIconComponent, TooltipDirective, CideSpinnerComponent } from 'cloud-ide-element';
-import { Router } from '@angular/router';
-import { D as DashboardCardsService } from './cloud-ide-layout-dashboard-cards.service-BGaKcq7H.mjs';
-
-class CideLytHomeWrapperComponent extends CideLytSharedWrapperComponent {
-    shared_wrapper_setup_param = input({
-        sypg_page_code: "cide_lyt_home"
-    }, ...(ngDevMode ? [{ debugName: "shared_wrapper_setup_param" }] : []));
-    sidebarService = inject(CideLytSidebarService);
-    sanitizer = inject(DomSanitizer);
-    renderer = inject(Renderer2);
-    cdr = inject(ChangeDetectorRef);
-    appState = inject(AppStateHelperService);
-    router = inject(Router);
-    dashboardCardsService = inject(DashboardCardsService);
-    moduleStylePresets = [
-        { accentColor: "#8B5CF6" }, // purple
-        { accentColor: "#EC4899" }, // pink
-        { accentColor: "#14B8A6" }, // teal
-        { accentColor: "#0EA5E9" }, // sky
-        { accentColor: "#F59E42" }, // orange
-        { accentColor: "#6366F1" }, // indigo
-        { accentColor: "#22C55E" }, // green
-        { accentColor: "#EF4444" }, // red
-        { accentColor: "#F59E0B" }, // amber
-        { accentColor: "#10B981" }, // emerald
-        { accentColor: "#06B6D4" }, // cyan
-        { accentColor: "#6B7280" }, // gray
-        { accentColor: "#8B5CF6" }, // violet (same as purple for fallback)
-        { accentColor: "#D946EF" } // fuchsia
-    ];
-    modulesContainerRef;
-    scrollPrevModuleBtnRef;
-    scrollNextModuleBtnRef;
-    cardsContainerElRef;
-    modulesSectionConfig = {
-        title: "Subscribed Modules",
-        viewAllLinkText: "View All Modules →",
-        viewAllLinkHref: "#all-modules",
-        showViewAllLink: true
-    };
-    modulesData = [];
-    draggedItem = null;
-    placeholder = null;
-    // Loading states
-    isLoadingModules = signal(true, ...(ngDevMode ? [{ debugName: "isLoadingModules" }] : []));
-    isLoadingCards = signal(true, ...(ngDevMode ? [{ debugName: "isLoadingCards" }] : []));
-    // Computed signal for overall loading state
-    isLoading = computed(() => this.isLoadingModules() || this.isLoadingCards(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    // Track previous entity ID for change detection
-    previousEntityId = null;
-    // Flag to prevent multiple simultaneous API calls
-    isModuleLoadInProgress = false;
-    // Debounce timer for entity change
-    entityChangeDebounceTimer = null;
-    constructor() {
-        super();
-        // Sanitize SVG icons in the hardcoded cardsData
-        this.cardsData = this.cardsData.map(card => ({
-            ...card,
-            items: card.items?.map(item => ({
-                ...item,
-                safeIconSVG: item.iconSVG ? this.sanitizer.bypassSecurityTrustHtml(item.iconSVG) : undefined
-            }))
-        }));
-        // React to active entity changes - reload modules when entity changes
-        effect(() => {
-            const activeEntity = this.appState.activeEntity();
-            const currentEntityId = activeEntity?._id || null;
-            // Skip on initial load (when previousEntityId is null)
-            if (this.previousEntityId === null) {
-                this.previousEntityId = currentEntityId;
-                console.log('🏢 HOME: Entity change handler initialized with initial entity:', currentEntityId);
-                return;
-            }
-            // Only reload if entity actually changed and no load is in progress
-            if (this.previousEntityId !== currentEntityId && currentEntityId !== null && !this.isModuleLoadInProgress) {
-                console.log('🏢 HOME: Entity changed from', this.previousEntityId, 'to', currentEntityId, '- reloading modules');
-                this.previousEntityId = currentEntityId;
-                // Clear any existing debounce timer
-                if (this.entityChangeDebounceTimer) {
-                    clearTimeout(this.entityChangeDebounceTimer);
-                }
-                // Debounce the API call to prevent multiple rapid calls
-                this.entityChangeDebounceTimer = setTimeout(() => {
-                    // Reload modules when entity changes (menu API call)
-                    this.loadModules();
-                    this.entityChangeDebounceTimer = null;
-                }, 100); // 100ms debounce
-            }
-            else if (this.previousEntityId !== null && currentEntityId === null) {
-                // Entity was cleared
-                console.log('🏢 HOME: Entity cleared');
-                this.previousEntityId = null;
-                this.modulesData = [];
-                this.isLoadingModules.set(false);
-            }
-            else if (this.isModuleLoadInProgress) {
-                console.log('⏭️ HOME: Module load already in progress, skipping duplicate call');
-            }
-        });
-    }
-    ngOnInit() {
-        super.ngOnInit?.();
-        // Set loading states to true initially
-        this.isLoadingModules.set(true);
-        this.isLoadingCards.set(true);
-        this.loadModules();
-        this.loadDashboardCards();
-    }
-    openModule(module) {
-        console.log(module, "module");
-        // Set the active module in app state - this will trigger sidebar updates
-        this.appState.setActiveModule(module);
-        // Navigate to the module route
-        // this.requestService.addTab(module.syme_title, `/control-panel/${module.syme_path}`);
-        this.router.navigate([`/control-panel/${module.syme_path}`]);
-    }
-    ngAfterViewInit() {
-        this.setupModuleScroller();
-        this.setupDragAndDrop();
-    }
-    loadModules() {
-        // Prevent multiple simultaneous calls
-        if (this.isModuleLoadInProgress) {
-            console.log('⏭️ HOME: Module load already in progress, skipping duplicate call');
-            return;
-        }
-        this.isModuleLoadInProgress = true;
-        this.isLoadingModules.set(true);
-        this.sidebarService?.getSidebarMenues({
-            syme_type: "module",
-            sort: 'asc',
-            syme_title: ""
-        })?.subscribe({
-            next: (res) => {
-                const fetchedApiModules = res?.data || [];
-                this.modulesData = fetchedApiModules.map((item, index) => {
-                    const stylePreset = this.moduleStylePresets[index % this.moduleStylePresets.length];
-                    const insightCount = item.syme_ping_count || 0;
-                    return {
-                        ...item,
-                        accentColor: stylePreset.accentColor, // UI-only property
-                        pillCount: insightCount, // UI-only property
-                    };
-                });
-                this.isLoadingModules.set(false);
-                this.isModuleLoadInProgress = false;
-                this.cdr.detectChanges();
-            },
-            error: (err) => {
-                console.error('Error loading sidebar modules:', err);
-                this.modulesData = [];
-                this.isLoadingModules.set(false);
-                this.isModuleLoadInProgress = false;
-                this.cdr.detectChanges();
-            }
-        });
-    }
-    cardsData = [];
-    loadDashboardCards() {
-        this.isLoadingCards.set(true);
-        this.dashboardCardsService.getDashboardCardsList({}).subscribe({
-            next: (response) => {
-                if (response.success && response.data) {
-                    // Filter only visible cards
-                    const visibleCards = response.data.filter(card => card.cdc_visible !== false && card.cdc_isactive !== false);
-                    // Convert database cards to display format
-                    this.cardsData = visibleCards.map((card) => {
-                        const colSpanMap = {
-                            1: "md:tw-col-span-1 xl:tw-col-span-1",
-                            2: "md:tw-col-span-2 xl:tw-col-span-2",
-                            3: "md:tw-col-span-3 xl:tw-col-span-3",
-                            4: "md:tw-col-span-4 xl:tw-col-span-4"
-                        };
-                        return {
-                            id: card._id || `card-${Date.now()}`,
-                            title: card.cdc_title || 'Untitled Card',
-                            type: card.cdc_type || 'custom',
-                            colSpan: colSpanMap[card.cdc_position?.colspan || 1] || "md:tw-col-span-1 xl:tw-col-span-1",
-                            accentColor: card.cdc_color || 'blue',
-                            description: card.cdc_description,
-                            // You can extend this to load actual data from the API endpoint
-                            items: [],
-                            stats: []
-                        };
-                    });
-                    // Sort by position
-                    this.cardsData.sort((a, b) => {
-                        const cardA = visibleCards.find(c => c._id === a.id);
-                        const cardB = visibleCards.find(c => c._id === b.id);
-                        const posA = cardA?.cdc_position || { row: 999, col: 999 };
-                        const posB = cardB?.cdc_position || { row: 999, col: 999 };
-                        const rowA = posA.row ?? 999;
-                        const rowB = posB.row ?? 999;
-                        const colA = posA.col ?? 999;
-                        const colB = posB.col ?? 999;
-                        if (rowA !== rowB)
-                            return rowA - rowB;
-                        return colA - colB;
-                    });
-                    this.isLoadingCards.set(false);
-                    this.cdr.detectChanges();
-                }
-                else {
-                    this.isLoadingCards.set(false);
-                    this.loadDefaultCards();
-                }
-            },
-            error: (error) => {
-                console.error('Error loading dashboard cards:', error);
-                // Fallback to default cards if API fails
-                this.isLoadingCards.set(false);
-                this.loadDefaultCards();
-            }
-        });
-    }
-    loadDefaultCards() {
-        // Fallback default cards if database is empty or API fails
-        this.cardsData = [
-            { id: "card1", title: "Welcome", type: "custom", colSpan: "md:tw-col-span-2 xl:tw-col-span-3", accentColor: "blue", description: "Welcome to your dashboard" }
-        ];
-        this.cdr.detectChanges();
-    }
-    setupModuleScroller() {
-        const modulesContainer = this.modulesContainerRef?.nativeElement;
-        const scrollPrevBtn = this.scrollPrevModuleBtnRef?.nativeElement;
-        const scrollNextBtn = this.scrollNextModuleBtnRef?.nativeElement;
-        if (modulesContainer && scrollPrevBtn && scrollNextBtn) {
-            const scrollAmount = 256;
-            const updateArrowStates = () => {
-                if (!modulesContainer)
-                    return;
-                scrollPrevBtn.disabled = modulesContainer.scrollLeft <= 0;
-                scrollNextBtn.disabled = modulesContainer.scrollLeft + modulesContainer.clientWidth >= modulesContainer.scrollWidth - 1;
-            };
-            this.renderer.listen(scrollPrevBtn, 'click', () => modulesContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));
-            this.renderer.listen(scrollNextBtn, 'click', () => modulesContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' }));
-            this.renderer.listen(modulesContainer, 'scroll', updateArrowStates);
-            new ResizeObserver(updateArrowStates).observe(modulesContainer);
-            setTimeout(updateArrowStates, 100);
-            // Remove preventDefault for wheel/touchmove to allow mouse/touch scrolling
-        }
-    }
-    setupDragAndDrop() {
-        const cardsContainer = this.cardsContainerElRef?.nativeElement;
-        if (!cardsContainer)
-            return;
-        this.placeholder = this.renderer.createElement('div');
-        this.renderer.addClass(this.placeholder, 'drag-over-placeholder');
-        this.renderer.listen(cardsContainer, 'dragstart', (e) => {
-            const target = e.target;
-            if (target.classList.contains('dashboard-card')) {
-                this.draggedItem = target;
-                // Modern ES2022+ pattern: Use microtask for immediate execution
-                Promise.resolve().then(() => this.renderer.addClass(target, 'dragging'));
-                e.dataTransfer?.setData('text/plain', target.id || 'draggable-card');
-                if (e.dataTransfer)
-                    e.dataTransfer.effectAllowed = 'move';
-            }
-        });
-        this.renderer.listen(cardsContainer, 'dragend', () => {
-            if (this.draggedItem)
-                this.renderer.removeClass(this.draggedItem, 'dragging');
-            if (this.placeholder?.parentNode)
-                this.renderer.removeChild(this.placeholder.parentNode, this.placeholder);
-            this.draggedItem = null;
-        });
-        this.renderer.listen(cardsContainer, 'dragover', (e) => {
-            e.preventDefault();
-            if (!this.draggedItem)
-                return;
-            const target = e.target.closest('.dashboard-card');
-            if (target && target !== this.draggedItem) {
-                const rect = target.getBoundingClientRect();
-                const offsetY = e.clientY - rect.top;
-                if (offsetY > rect.height / 2) {
-                    this.renderer.insertBefore(cardsContainer, this.placeholder, target.nextSibling);
-                }
-                else {
-                    this.renderer.insertBefore(cardsContainer, this.placeholder, target);
-                }
-            }
-        });
-        this.renderer.listen(cardsContainer, 'drop', (e) => {
-            e.preventDefault();
-            if (this.draggedItem && this.placeholder?.parentNode) {
-                this.renderer.insertBefore(this.placeholder.parentNode, this.draggedItem, this.placeholder);
-            }
-            if (this.placeholder?.parentNode)
-                this.renderer.removeChild(this.placeholder.parentNode, this.placeholder);
-            if (this.draggedItem)
-                this.renderer.removeClass(this.draggedItem, 'dragging');
-            this.draggedItem = null;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytHomeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideLytHomeWrapperComponent, isStandalone: true, selector: "cide-lyt-home-wrapper", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "modulesContainerRef", first: true, predicate: ["modulesContainer"], descendants: true }, { propertyName: "scrollPrevModuleBtnRef", first: true, predicate: ["scrollPrevModuleBtn"], descendants: true }, { propertyName: "scrollNextModuleBtnRef", first: true, predicate: ["scrollNextModuleBtn"], descendants: true }, { propertyName: "cardsContainerElRef", first: true, predicate: ["cardsContainerEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Fullscreen Loader Overlay -->\n@if (isLoading()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-[9999] tw-backdrop-blur-sm tw-flex tw-items-center tw-justify-center\">\n    <div class=\"tw-text-center\">\n      <cide-ele-spinner size=\"sm\" type=\"spinner\"></cide-ele-spinner>\n      <p class=\"tw-mt-4 tw-text-gray-600 dark:tw-text-gray-300 tw-text-sm tw-font-medium\">Loading dashboard...</p>\n    </div>\n  </div>\n}\n\n<div class=\"tw-p-4 sm:tw-p-6 md:tw-p-8 tw-w-full\" [class.tw-opacity-0]=\"isLoading()\" [class.tw-transition-opacity]=\"!isLoading()\">\n    <header class=\"tw-mb-8 md:tw-mb-10\">\n        <h1\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\">\n            Welcome, {{ appState.getUserName() || 'User' }}!\n        </h1>\n        <p class=\"tw-text-sm tw-text-gray-500 tw-mt-1\">Your central hub for all things college.</p>\n        <p *ngIf=\"appState.getUserEmail()\" class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">{{ appState.getUserEmail() }}</p>\n    </header>\n\n    <div class=\"tw-mb-8 md:tw-mb-10\">\n        <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-5\">\n            <h2 class=\"tw-text-xl tw-font-bold tw-text-gray-700\">{{ modulesSectionConfig.title }}</h2>\n            <a *ngIf=\"modulesSectionConfig.showViewAllLink\" [href]=\"modulesSectionConfig.viewAllLinkHref\"\n                class=\"tw-text-sm tw-font-medium tw-text-purple-600 hover:tw-text-purple-800 hover:tw-underline tw-transition-colors\">\n                {{ modulesSectionConfig.viewAllLinkText }}\n            </a>\n        </div>\n        <div class=\"tw-relative group/modules tw-max-w-full\">\n            <button #scrollPrevModuleBtn aria-label=\"Scroll previous modules\"\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\"\n                style=\"top: 2.875rem;\">\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n                </svg>\n            </button>\n\n            <div #modulesContainer\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\"\n                style=\"touch-action: none; pointer-events: auto;\">\n                <a *ngFor=\"let module of modulesData\" \n                   (click)=\"openModule(module)\"\n                   (keydown.enter)=\"openModule(module)\"\n                   (keydown.space)=\"openModule(module)\"\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\"\n                   [style.--accent-color]=\"module.accentColor\" \n                   tabindex=\"0\"\n                   role=\"button\"\n                   [attr.aria-label]=\"'Open module: ' + module.syme_title\">\n                    <div class=\"tw-relative tw-flex-shrink-0\">\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\"\n                            [style.backgroundColor]=\"module?.accentColor + '22'\">\n                            <!-- icon rendering here if needed -->\n                            <cide-ele-icon class=\"mpro-icon-field\" type=\"none\">{{module?.syme_icon}}</cide-ele-icon>\n                        </div>\n                        <div *ngIf=\"(module?.pillCount || 0) > 0\" class=\"tw-absolute tw--top-1.5 tw--right-1.5\">\n                            <span\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\"\n                                [style.backgroundColor]=\"module?.accentColor\">{{module?.pillCount}}</span>\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-flex-col tw-flex-grow tw-min-w-0\">\n                        <h4 class=\"tw-font-semibold tw-text-xs tw-text-gray-800 tw-truncate line-clamp-1\" cideEleTooltip\n                            [cideEleTooltip]=\"module.syme_title\" [tooltipDelay]=\"300\" [tooltipPlacement]=\"'top'\">\n                            {{module?.syme_title}}\n                        </h4>\n                        <p\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]\">\n                            {{module?.syme_desc}}\n                        </p>\n                    </div>\n                </a>\n            </div>\n\n            <button #scrollNextModuleBtn aria-label=\"Scroll next modules\"\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\"\n                style=\"top: 2.875rem;\">\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <main class=\"tw--mt-8 md:tw--mt-10\">\n        <div #cardsContainerEl class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-5\">\n            <div *ngFor=\"let card of cardsData\" draggable=\"true\" [id]=\"card.id\"\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\"\n                [ngClass]=\"card.colSpan || 'tw-col-span-1'\">\n\n                <div *ngIf=\"card.type !== 'studyStreak' && card.type !== 'quickStats'\"\n                    class=\"tw-flex tw-justify-between tw-items-center tw-mb-3\">\n                    <h3 class=\"tw-text-md tw-font-semibold\" [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">\n                        {{card.title}}</h3>\n                    <span *ngIf=\"card.urgentText\"\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>\n                    <span *ngIf=\"card.insightTag\" class=\"tw-text-xs tw-px-2.5 tw-py-1 tw-rounded-full tw-font-semibold\"\n                        [ngClass]=\"'tw-bg-' + card.accentColor + '-100 tw-text-' + card.accentColor + '-700'\">{{card.insightTag}}</span>\n                </div>\n\n                <div class=\"card-content-area tw-space-y-3 tw-text-sm tw-pr-1\">\n                    <ng-container [ngSwitch]=\"card.type\">\n                        <ul *ngSwitchCase=\"'deadlines'\">\n                            <li *ngFor=\"let item of card.items\"\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <div>\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.text}}</p>\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.subtext}}</p>\n                                </div>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'news'\">\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <p class=\"tw-font-medium tw-text-gray-800\">{{item.title}}</p>\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'grades'\">\n                            <li *ngFor=\"let item of card.items\"\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <span class=\"tw-text-gray-700\">{{item.subject}}</span><span class=\"tw-font-bold\"\n                                    [ngClass]=\"item.color\">{{item.grade}}</span>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'professorConnect'\">\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <p class=\"tw-font-medium tw-text-gray-700\">{{item.name}}</p>\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.officeHours}}</p><a\n                                    *ngIf=\"item.messageLink\" [href]=\"item.messageLink\"\n                                    class=\"tw-text-xs hover:tw-underline\"\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Send Message</a><a\n                                    *ngIf=\"item.appointmentLink\" [href]=\"item.appointmentLink\"\n                                    class=\"tw-text-xs hover:tw-underline tw-ml-2\"\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Book Appointment</a>\n                            </li>\n                        </ul>\n                        <div *ngSwitchCase=\"'courses'\" class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-2.5\"><a\n                                *ngFor=\"let item of card.items\" href=\"#\"\n                                class=\"tw-block tw-p-2.5 tw-rounded-lg tw-transition-all group tw-ring-1\"\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'\">\n                                <p class=\"tw-font-semibold group-hover:tw-text-{{item.colorTheme}}-800\"\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-700'\">{{item.name}}</p>\n                                <p class=\"tw-text-xs group-hover:tw-text-{{item.colorTheme}}-600 tw-mt-0.5\"\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-500'\">{{item.professor}}</p>\n                            </a></div>\n                        <ul *ngSwitchCase=\"'events'\">\n                            <li *ngFor=\"let item of card.items\"\n                                class=\"tw-flex tw-items-start tw-space-x-2.5 tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\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\"\n                                    [ngClass]=\"item.themeColor\"><span>{{item.date?.month}}</span><span\n                                        class=\"tw-text-sm\">{{item.date?.day}}</span></div>\n                                <div>\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.title}}</p>\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\n                                </div>\n                            </li>\n                        </ul>\n                        <div *ngSwitchCase=\"'studyStreak'\"\n                            class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center tw-flex-grow tw-p-4\">\n                            <svg class=\"tw-w-12 tw-h-12 tw-mb-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\n                                fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\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\">\n                                </path>\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                    d=\"M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z\"></path>\n                            </svg>\n                            <h3 class=\"tw-text-md tw-font-semibold tw-mb-1\"\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">{{card.title}}</h3>\n                            <p class=\"tw-text-xs tw-text-gray-500\">{{card.description}}</p>\n                            <div class=\"tw-mt-3 tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-1.5\">\n                                <div class=\"tw-h-1.5 tw-rounded-full\" [ngClass]=\"'tw-bg-' + card.accentColor + '-500'\"\n                                    [style.width]=\"card.progress\"></div>\n                            </div>\n                        </div>\n                        <div *ngSwitchCase=\"'quickStats'\" class=\"tw-space-y-3.5 tw-flex-grow\">\n                            <h2 class=\"tw-text-md tw-font-semibold tw-mb-3 tw-border-b tw-border-gray-200/80 tw-pb-2\"\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">{{card.title}}</h2>\n                            <div *ngFor=\"let stat of card.stats\" class=\"tw-text-sm\">\n                                <div *ngIf=\"stat.gradient\" class=\"tw-text-sm\">\n                                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-0.5\">\n                                        <p class=\"tw-text-gray-600 tw-font-medium\">{{stat.label}}</p>\n                                        <p class=\"tw-text-xs tw-text-green-600 tw-font-semibold\">{{stat.value}}</p>\n                                    </div>\n                                    <div class=\"tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-2\">\n                                        <div class=\"tw-h-2 tw-rounded-full\" [ngClass]=\"stat.gradient\"\n                                            [style.width]=\"stat.value\"></div>\n                                    </div>\n                                </div>\n                                <div *ngIf=\"!stat.gradient\">\n                                    <p class=\"tw-text-gray-600 tw-font-medium tw-mb-0.5\">{{stat.label}}</p>\n                                    <p [ngClass]=\"stat.valueClass || ''\">{{stat.value}}</p>\n                                </div>\n                            </div>\n                        </div>\n                        <ul *ngSwitchCase=\"'discussions'\">\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <a href=\"#\" class=\"tw-block group\">\n                                    <p class=\"tw-font-medium tw-text-gray-700\"\n                                        [ngClass]=\"'group-hover:tw-text-' + card.accentColor + '-700'\">{{item.topic}}\n                                    </p>\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.forum}} - Last post: {{item.lastPost}}\n                                    </p>\n                                </a>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'quickLinks'\">\n                            <li *ngFor=\"let item of card.items\"><a href=\"#\"\n                                    class=\"tw-flex tw-items-center tw-p-2 tw-rounded-lg tw-text-gray-700 tw-transition-colors\"\n                                    [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70 hover:tw-text-' + card.accentColor + '-700'\"><svg\n                                        class=\"tw-w-4 tw-h-4 tw-mr-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\n                                        fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                                        [innerHTML]=\"item.safeIconSVG\"></svg>{{item.text}}</a></li>\n                        </ul>\n                    </ng-container>\n                </div>\n\n                <a *ngIf=\"card.link\" [href]=\"card.link.href\"\n                    class=\"tw-mt-auto tw-pt-3 tw-text-xs tw-font-medium tw-w-full tw-text-left hover:tw-underline\"\n                    [ngClass]=\"'tw-text-' + card.accentColor + '-600 hover:tw-text-' + card.accentColor + '-800'\">\n                    {{card.link.text}}\n                </a>\n            </div>\n        </div>\n    </main>\n</div>", styles: [".module-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background-color:var(--accent-color, transparent);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:scaleX(0);z-index:1}.module-card:hover:before{opacity:1;transform:scaleX(1)}.card-content-area::-webkit-scrollbar{width:6px}.card-content-area::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.card-content-area::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.card-content-area::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dashboard-card{overflow:hidden}.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbar::-webkit-scrollbar{display:none}\n", ":host{height:100%;display:flex;flex-direction:column;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytHomeWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cide-lyt-home-wrapper', imports: [CommonModule, CideIconComponent, TooltipDirective, CideSpinnerComponent], template: "<!-- Fullscreen Loader Overlay -->\n@if (isLoading()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-[9999] tw-backdrop-blur-sm tw-flex tw-items-center tw-justify-center\">\n    <div class=\"tw-text-center\">\n      <cide-ele-spinner size=\"sm\" type=\"spinner\"></cide-ele-spinner>\n      <p class=\"tw-mt-4 tw-text-gray-600 dark:tw-text-gray-300 tw-text-sm tw-font-medium\">Loading dashboard...</p>\n    </div>\n  </div>\n}\n\n<div class=\"tw-p-4 sm:tw-p-6 md:tw-p-8 tw-w-full\" [class.tw-opacity-0]=\"isLoading()\" [class.tw-transition-opacity]=\"!isLoading()\">\n    <header class=\"tw-mb-8 md:tw-mb-10\">\n        <h1\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\">\n            Welcome, {{ appState.getUserName() || 'User' }}!\n        </h1>\n        <p class=\"tw-text-sm tw-text-gray-500 tw-mt-1\">Your central hub for all things college.</p>\n        <p *ngIf=\"appState.getUserEmail()\" class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">{{ appState.getUserEmail() }}</p>\n    </header>\n\n    <div class=\"tw-mb-8 md:tw-mb-10\">\n        <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-5\">\n            <h2 class=\"tw-text-xl tw-font-bold tw-text-gray-700\">{{ modulesSectionConfig.title }}</h2>\n            <a *ngIf=\"modulesSectionConfig.showViewAllLink\" [href]=\"modulesSectionConfig.viewAllLinkHref\"\n                class=\"tw-text-sm tw-font-medium tw-text-purple-600 hover:tw-text-purple-800 hover:tw-underline tw-transition-colors\">\n                {{ modulesSectionConfig.viewAllLinkText }}\n            </a>\n        </div>\n        <div class=\"tw-relative group/modules tw-max-w-full\">\n            <button #scrollPrevModuleBtn aria-label=\"Scroll previous modules\"\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\"\n                style=\"top: 2.875rem;\">\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n                </svg>\n            </button>\n\n            <div #modulesContainer\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\"\n                style=\"touch-action: none; pointer-events: auto;\">\n                <a *ngFor=\"let module of modulesData\" \n                   (click)=\"openModule(module)\"\n                   (keydown.enter)=\"openModule(module)\"\n                   (keydown.space)=\"openModule(module)\"\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\"\n                   [style.--accent-color]=\"module.accentColor\" \n                   tabindex=\"0\"\n                   role=\"button\"\n                   [attr.aria-label]=\"'Open module: ' + module.syme_title\">\n                    <div class=\"tw-relative tw-flex-shrink-0\">\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\"\n                            [style.backgroundColor]=\"module?.accentColor + '22'\">\n                            <!-- icon rendering here if needed -->\n                            <cide-ele-icon class=\"mpro-icon-field\" type=\"none\">{{module?.syme_icon}}</cide-ele-icon>\n                        </div>\n                        <div *ngIf=\"(module?.pillCount || 0) > 0\" class=\"tw-absolute tw--top-1.5 tw--right-1.5\">\n                            <span\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\"\n                                [style.backgroundColor]=\"module?.accentColor\">{{module?.pillCount}}</span>\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-flex-col tw-flex-grow tw-min-w-0\">\n                        <h4 class=\"tw-font-semibold tw-text-xs tw-text-gray-800 tw-truncate line-clamp-1\" cideEleTooltip\n                            [cideEleTooltip]=\"module.syme_title\" [tooltipDelay]=\"300\" [tooltipPlacement]=\"'top'\">\n                            {{module?.syme_title}}\n                        </h4>\n                        <p\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]\">\n                            {{module?.syme_desc}}\n                        </p>\n                    </div>\n                </a>\n            </div>\n\n            <button #scrollNextModuleBtn aria-label=\"Scroll next modules\"\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\"\n                style=\"top: 2.875rem;\">\n                <svg class=\"tw-w-5 tw-h-5 tw-text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <main class=\"tw--mt-8 md:tw--mt-10\">\n        <div #cardsContainerEl class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-5\">\n            <div *ngFor=\"let card of cardsData\" draggable=\"true\" [id]=\"card.id\"\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\"\n                [ngClass]=\"card.colSpan || 'tw-col-span-1'\">\n\n                <div *ngIf=\"card.type !== 'studyStreak' && card.type !== 'quickStats'\"\n                    class=\"tw-flex tw-justify-between tw-items-center tw-mb-3\">\n                    <h3 class=\"tw-text-md tw-font-semibold\" [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">\n                        {{card.title}}</h3>\n                    <span *ngIf=\"card.urgentText\"\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>\n                    <span *ngIf=\"card.insightTag\" class=\"tw-text-xs tw-px-2.5 tw-py-1 tw-rounded-full tw-font-semibold\"\n                        [ngClass]=\"'tw-bg-' + card.accentColor + '-100 tw-text-' + card.accentColor + '-700'\">{{card.insightTag}}</span>\n                </div>\n\n                <div class=\"card-content-area tw-space-y-3 tw-text-sm tw-pr-1\">\n                    <ng-container [ngSwitch]=\"card.type\">\n                        <ul *ngSwitchCase=\"'deadlines'\">\n                            <li *ngFor=\"let item of card.items\"\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <div>\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.text}}</p>\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.subtext}}</p>\n                                </div>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'news'\">\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <p class=\"tw-font-medium tw-text-gray-800\">{{item.title}}</p>\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'grades'\">\n                            <li *ngFor=\"let item of card.items\"\n                                class=\"tw-flex tw-justify-between tw-items-center tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <span class=\"tw-text-gray-700\">{{item.subject}}</span><span class=\"tw-font-bold\"\n                                    [ngClass]=\"item.color\">{{item.grade}}</span>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'professorConnect'\">\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <p class=\"tw-font-medium tw-text-gray-700\">{{item.name}}</p>\n                                <p class=\"tw-text-xs tw-text-gray-500\">{{item.officeHours}}</p><a\n                                    *ngIf=\"item.messageLink\" [href]=\"item.messageLink\"\n                                    class=\"tw-text-xs hover:tw-underline\"\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Send Message</a><a\n                                    *ngIf=\"item.appointmentLink\" [href]=\"item.appointmentLink\"\n                                    class=\"tw-text-xs hover:tw-underline tw-ml-2\"\n                                    [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">Book Appointment</a>\n                            </li>\n                        </ul>\n                        <div *ngSwitchCase=\"'courses'\" class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-2.5\"><a\n                                *ngFor=\"let item of card.items\" href=\"#\"\n                                class=\"tw-block tw-p-2.5 tw-rounded-lg tw-transition-all group tw-ring-1\"\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'\">\n                                <p class=\"tw-font-semibold group-hover:tw-text-{{item.colorTheme}}-800\"\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-700'\">{{item.name}}</p>\n                                <p class=\"tw-text-xs group-hover:tw-text-{{item.colorTheme}}-600 tw-mt-0.5\"\n                                    [ngClass]=\"'tw-text-' + item.colorTheme + '-500'\">{{item.professor}}</p>\n                            </a></div>\n                        <ul *ngSwitchCase=\"'events'\">\n                            <li *ngFor=\"let item of card.items\"\n                                class=\"tw-flex tw-items-start tw-space-x-2.5 tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\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\"\n                                    [ngClass]=\"item.themeColor\"><span>{{item.date?.month}}</span><span\n                                        class=\"tw-text-sm\">{{item.date?.day}}</span></div>\n                                <div>\n                                    <p class=\"tw-text-gray-700 tw-font-medium\">{{item.title}}</p>\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.details}}</p>\n                                </div>\n                            </li>\n                        </ul>\n                        <div *ngSwitchCase=\"'studyStreak'\"\n                            class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center tw-flex-grow tw-p-4\">\n                            <svg class=\"tw-w-12 tw-h-12 tw-mb-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\n                                fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\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\">\n                                </path>\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                    d=\"M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z\"></path>\n                            </svg>\n                            <h3 class=\"tw-text-md tw-font-semibold tw-mb-1\"\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-600'\">{{card.title}}</h3>\n                            <p class=\"tw-text-xs tw-text-gray-500\">{{card.description}}</p>\n                            <div class=\"tw-mt-3 tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-1.5\">\n                                <div class=\"tw-h-1.5 tw-rounded-full\" [ngClass]=\"'tw-bg-' + card.accentColor + '-500'\"\n                                    [style.width]=\"card.progress\"></div>\n                            </div>\n                        </div>\n                        <div *ngSwitchCase=\"'quickStats'\" class=\"tw-space-y-3.5 tw-flex-grow\">\n                            <h2 class=\"tw-text-md tw-font-semibold tw-mb-3 tw-border-b tw-border-gray-200/80 tw-pb-2\"\n                                [ngClass]=\"'tw-text-' + card.accentColor + '-700'\">{{card.title}}</h2>\n                            <div *ngFor=\"let stat of card.stats\" class=\"tw-text-sm\">\n                                <div *ngIf=\"stat.gradient\" class=\"tw-text-sm\">\n                                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-0.5\">\n                                        <p class=\"tw-text-gray-600 tw-font-medium\">{{stat.label}}</p>\n                                        <p class=\"tw-text-xs tw-text-green-600 tw-font-semibold\">{{stat.value}}</p>\n                                    </div>\n                                    <div class=\"tw-w-full tw-bg-gray-200 tw-rounded-full tw-h-2\">\n                                        <div class=\"tw-h-2 tw-rounded-full\" [ngClass]=\"stat.gradient\"\n                                            [style.width]=\"stat.value\"></div>\n                                    </div>\n                                </div>\n                                <div *ngIf=\"!stat.gradient\">\n                                    <p class=\"tw-text-gray-600 tw-font-medium tw-mb-0.5\">{{stat.label}}</p>\n                                    <p [ngClass]=\"stat.valueClass || ''\">{{stat.value}}</p>\n                                </div>\n                            </div>\n                        </div>\n                        <ul *ngSwitchCase=\"'discussions'\">\n                            <li *ngFor=\"let item of card.items\" class=\"tw-p-2.5 tw-rounded-lg\"\n                                [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70'\">\n                                <a href=\"#\" class=\"tw-block group\">\n                                    <p class=\"tw-font-medium tw-text-gray-700\"\n                                        [ngClass]=\"'group-hover:tw-text-' + card.accentColor + '-700'\">{{item.topic}}\n                                    </p>\n                                    <p class=\"tw-text-xs tw-text-gray-500\">{{item.forum}} - Last post: {{item.lastPost}}\n                                    </p>\n                                </a>\n                            </li>\n                        </ul>\n                        <ul *ngSwitchCase=\"'quickLinks'\">\n                            <li *ngFor=\"let item of card.items\"><a href=\"#\"\n                                    class=\"tw-flex tw-items-center tw-p-2 tw-rounded-lg tw-text-gray-700 tw-transition-colors\"\n                                    [ngClass]=\"'tw-bg-' + card.accentColor + '-50/60 hover:tw-bg-' + card.accentColor + '-100/70 hover:tw-text-' + card.accentColor + '-700'\"><svg\n                                        class=\"tw-w-4 tw-h-4 tw-mr-2\" [ngClass]=\"'tw-text-' + card.accentColor + '-500'\"\n                                        fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n                                        [innerHTML]=\"item.safeIconSVG\"></svg>{{item.text}}</a></li>\n                        </ul>\n                    </ng-container>\n                </div>\n\n                <a *ngIf=\"card.link\" [href]=\"card.link.href\"\n                    class=\"tw-mt-auto tw-pt-3 tw-text-xs tw-font-medium tw-w-full tw-text-left hover:tw-underline\"\n                    [ngClass]=\"'tw-text-' + card.accentColor + '-600 hover:tw-text-' + card.accentColor + '-800'\">\n                    {{card.link.text}}\n                </a>\n            </div>\n        </div>\n    </main>\n</div>", styles: [".module-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background-color:var(--accent-color, transparent);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:scaleX(0);z-index:1}.module-card:hover:before{opacity:1;transform:scaleX(1)}.card-content-area::-webkit-scrollbar{width:6px}.card-content-area::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.card-content-area::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.card-content-area::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dashboard-card{overflow:hidden}.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbar::-webkit-scrollbar{display:none}\n", ":host{height:100%;display:flex;flex-direction:column;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { shared_wrapper_setup_param: [{ type: i0.Input, args: [{ isSignal: true, alias: "shared_wrapper_setup_param", required: false }] }], modulesContainerRef: [{
-                type: ViewChild,
-                args: ['modulesContainer']
-            }], scrollPrevModuleBtnRef: [{
-                type: ViewChild,
-                args: ['scrollPrevModuleBtn']
-            }], scrollNextModuleBtnRef: [{
-                type: ViewChild,
-                args: ['scrollNextModuleBtn']
-            }], cardsContainerElRef: [{
-                type: ViewChild,
-                args: ['cardsContainerEl']
-            }] } });
-
-export { CideLytHomeWrapperComponent };
-//# sourceMappingURL=cloud-ide-layout-home-wrapper.component-BR-ETlty.mjs.map