cloud-ide-layout 1.0.113 → 1.0.118

package/fesm2022/cloud-ide-layout-dashboard-manager.component-c-ZdOmN3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloud-ide-layout-dashboard-manager.component-c-ZdOmN3.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/components/dashboard-manager/dashboard-manager.component.ts"],"sourcesContent":["import { Component, OnInit, inject, signal, computed } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { CideLytSharedWrapperComponent } from '../../layout/shared/shared-wrapper/shared-wrapper.component';\r\nimport { DashboardCardsService } from '../../services/dashboard-cards.service';\r\nimport {\r\n  CoreDashboardCards,\r\n  MDashboardCards,\r\n  DashboardCardsSaveUpdatePayload,\r\n  DashboardCardsListResponse,\r\n  controllerResponse\r\n} from 'cloud-ide-lms-model';\r\nimport {\r\n  CideEleDataGridComponent,\r\n  CideEleButtonComponent,\r\n  CideInputComponent,\r\n  CideSelectComponent,\r\n  NotificationService,\r\n  ConfirmationService,\r\n  GridEvent,\r\n  GridConfiguration,\r\n  GridColumn\r\n} from 'cloud-ide-element';\r\n\r\ninterface ApiEndpoint {\r\n  endpoint: string;\r\n  method: string;\r\n  description: string;\r\n  category: string;\r\n}\r\n\r\n@Component({\r\n  selector: 'cide-lyt-dashboard-manager',\r\n  standalone: true,\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    CideLytSharedWrapperComponent,\r\n    CideEleDataGridComponent,\r\n    CideEleButtonComponent,\r\n    CideInputComponent,\r\n    CideSelectComponent\r\n  ],\r\n  template: `\r\n    <cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param\">\r\n      <div class=\"tw-p-4 tw-space-y-4\">\r\n        <!-- Header -->\r\n        <div class=\"tw-flex tw-justify-between tw-items-center\">\r\n          <h2 class=\"tw-text-2xl tw-font-bold\">Dashboard Manager</h2>\r\n          <cide-ele-button\r\n            [label]=\"'Add New Card'\"\r\n            leftIcon=\"add\"\r\n            (click)=\"openAddCardModal()\"\r\n            variant=\"primary\">\r\n          </cide-ele-button>\r\n        </div>\r\n\r\n        <!-- Cards Grid -->\r\n        <cide-ele-data-grid\r\n          [config]=\"gridConfig()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n\r\n        <!-- Add/Edit Card Modal -->\r\n        @if (showModal()) {\r\n          <div class=\"tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-50 tw-flex tw-items-center tw-justify-center tw-z-50\">\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-p-6 tw-max-w-2xl tw-w-full tw-max-h-[90vh] tw-overflow-y-auto\">\r\n              <h3 class=\"tw-text-xl tw-font-bold tw-mb-4\">\r\n                {{ editingCard() ? 'Edit Card' : 'Add New Card' }}\r\n              </h3>\r\n              \r\n              <form (ngSubmit)=\"saveCard()\" class=\"tw-space-y-4\">\r\n                <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Title *</label>\r\n                    <cide-ele-input\r\n                      [(ngModel)]=\"cardForm.title\"\r\n                      [name]=\"'title'\"\r\n                      [required]=\"true\"\r\n                      [placeholder]=\"'Enter card title'\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Type *</label>\r\n                    <cide-ele-select\r\n                      [ngModel]=\"cardForm.type || 'custom'\"\r\n                      (ngModelChange)=\"onTypeChange($event)\"\r\n                      [options]=\"cardTypes\"\r\n                      [required]=\"true\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <div>\r\n                  <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Description</label>\r\n                  <cide-ele-input\r\n                    [(ngModel)]=\"cardForm.description\"\r\n                    [name]=\"'description'\"\r\n                    [type]=\"'text'\"\r\n                    [placeholder]=\"'Enter card description'\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <div>\r\n                  <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">API Endpoint</label>\r\n                  <cide-ele-select\r\n                    [ngModel]=\"cardForm.apiEndpoint\"\r\n                    (ngModelChange)=\"onApiEndpointChange($event)\"\r\n                    [options]=\"apiEndpointsOptions()\"\r\n                    [placeholder]=\"'Select API endpoint'\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n                <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Icon</label>\r\n                    <cide-ele-input\r\n                      [(ngModel)]=\"cardForm.icon\"\r\n                      [name]=\"'icon'\"\r\n                      [placeholder]=\"'e.g., dashboard, analytics'\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Color</label>\r\n                    <cide-ele-input\r\n                      [(ngModel)]=\"cardForm.color\"\r\n                      [name]=\"'color'\"\r\n                      [type]=\"'text'\"\r\n                      [placeholder]=\"'#3B82F6'\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"tw-grid tw-grid-cols-4 tw-gap-4\">\r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Row</label>\r\n                    <cide-ele-input\r\n                      [(ngModel)]=\"cardForm.position.row\"\r\n                      [name]=\"'row'\"\r\n                      [type]=\"'number'\"\r\n                      [min]=\"1\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Col</label>\r\n                    <cide-ele-input\r\n                      [(ngModel)]=\"cardForm.position.col\"\r\n                      [name]=\"'col'\"\r\n                      [type]=\"'number'\"\r\n                      [min]=\"1\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Col Span</label>\r\n                    <cide-ele-input\r\n                      [(ngModel)]=\"cardForm.position.colspan\"\r\n                      [name]=\"'colspan'\"\r\n                      [type]=\"'number'\"\r\n                      [min]=\"1\"\r\n                      [max]=\"12\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                  \r\n                  <div>\r\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-mb-1\">Row Span</label>\r\n                    <cide-ele-input\r\n                      [(ngModel)]=\"cardForm.position.rowspan\"\r\n                      [name]=\"'rowspan'\"\r\n                      [type]=\"'number'\"\r\n                      [min]=\"1\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"tw-flex tw-gap-2 tw-pt-4\">\r\n                  <cide-ele-button\r\n                    [label]=\"'Cancel'\"\r\n                    variant=\"secondary\"\r\n                    (click)=\"closeModal()\">\r\n                  </cide-ele-button>\r\n                  <cide-ele-button\r\n                    [label]=\"'Save'\"\r\n                    variant=\"primary\"\r\n                    [type]=\"'submit'\">\r\n                  </cide-ele-button>\r\n                </div>\r\n              </form>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </cide-lyt-shared-wrapper>\r\n  `\r\n})\r\nexport class DashboardManagerComponent implements OnInit {\r\n  protected dashboardCardsService = inject(DashboardCardsService);\r\n  protected notificationService = inject(NotificationService);\r\n  protected confirmationService = inject(ConfirmationService);\r\n\r\n  shared_wrapper_setup_param = {\r\n    sypg_page_code: \"cide_lyt_dashboard_manager\"\r\n  };\r\n\r\n  cardsList = signal<CoreDashboardCards[]>([]);\r\n  loading = signal(false);\r\n  showModal = signal(false);\r\n  editingCard = signal<CoreDashboardCards | null>(null);\r\n  apiEndpoints = signal<ApiEndpoint[]>([]);\r\n\r\n  gridConfig = computed<GridConfiguration<CoreDashboardCards>>(() => ({\r\n    id: 'dashboard-cards-grid',\r\n    columns: [\r\n      {\r\n        key: 'cdc_title',\r\n        header: 'Title',\r\n        type: 'text',\r\n        sortable: true\r\n      },\r\n      {\r\n        key: 'cdc_type',\r\n        header: 'Type',\r\n        type: 'text',\r\n        sortable: true\r\n      },\r\n      {\r\n        key: 'cdc_api_endpoint',\r\n        header: 'API Endpoint',\r\n        type: 'text'\r\n      },\r\n      {\r\n        key: 'cdc_visible',\r\n        header: 'Visible',\r\n        type: 'status',\r\n        statusConfig: {\r\n          activeValue: true,\r\n          activeLabel: 'Visible',\r\n          inactiveLabel: 'Hidden',\r\n          activeClass: 'tw-bg-green-100 tw-text-green-800',\r\n          inactiveClass: 'tw-bg-gray-100 tw-text-gray-800'\r\n        }\r\n      },\r\n      {\r\n        key: 'actions',\r\n        header: 'Actions',\r\n        type: 'actions',\r\n        actions: [\r\n          {\r\n            key: 'edit',\r\n            label: 'Edit',\r\n            icon: 'edit',\r\n            variant: 'primary',\r\n            onClick: 'edit'\r\n          },\r\n          {\r\n            key: 'delete',\r\n            label: 'Delete',\r\n            icon: 'delete',\r\n            variant: 'danger',\r\n            onClick: 'delete'\r\n          },\r\n          {\r\n            key: 'toggle',\r\n            label: 'Toggle Visibility',\r\n            icon: 'visibility',\r\n            variant: 'outline',\r\n            onClick: 'toggle'\r\n          }\r\n        ]\r\n      }\r\n    ] as GridColumn[],\r\n    data: this.cardsList(),\r\n    pagination: {\r\n      enabled: true,\r\n      pageSize: 10,\r\n      pageSizeOptions: [10, 25, 50, 100],\r\n      showQuickJump: true,\r\n      showPageInfo: true,\r\n      showRefresh: true\r\n    },\r\n    search: {\r\n      enabled: true,\r\n      placeholder: 'Search cards...',\r\n      searchableColumns: ['cdc_title', 'cdc_type', 'cdc_api_endpoint']\r\n    },\r\n    loading: {\r\n      useDefer: true,\r\n      skeletonRows: 5,\r\n      showOverlay: false\r\n    },\r\n    responsive: true,\r\n    striped: false,\r\n    bordered: true,\r\n    compact: true\r\n  }));\r\n\r\n  cardTypes = [\r\n    { value: 'stats', label: 'Stats' },\r\n    { value: 'chart', label: 'Chart' },\r\n    { value: 'table', label: 'Table' },\r\n    { value: 'module-card', label: 'Module Card' },\r\n    { value: 'activity-feed', label: 'Activity Feed' },\r\n    { value: 'events', label: 'Events' },\r\n    { value: 'custom', label: 'Custom' }\r\n  ];\r\n\r\n  cardForm = {\r\n    title: '',\r\n    description: '',\r\n    type: 'custom' as CoreDashboardCards['cdc_type'],\r\n    apiEndpoint: '',\r\n    icon: '',\r\n    color: '#3B82F6',\r\n    position: {\r\n      row: 1,\r\n      col: 1,\r\n      colspan: 1,\r\n      rowspan: 1\r\n    }\r\n  };\r\n\r\n  apiEndpointsOptions = computed(() => {\r\n    return this.apiEndpoints().map(api => ({\r\n      value: api.endpoint,\r\n      label: `${api.method} ${api.endpoint} - ${api.description}`\r\n    }));\r\n  });\r\n\r\n  ngOnInit(): void {\r\n    this.loadCards();\r\n    this.loadApiEndpoints();\r\n  }\r\n\r\n  loadCards(): void {\r\n    this.loading.set(true);\r\n    this.dashboardCardsService.getDashboardCardsList({}).subscribe({\r\n      next: (response) => {\r\n        if (response.success && response.data) {\r\n          // Map DashboardCardsListResponse to CoreDashboardCards\r\n          const mappedCards: CoreDashboardCards[] = response.data.map((card: DashboardCardsListResponse) => ({\r\n            ...card,\r\n            cdc_entity_id_syen: card.cdc_entity_id_syen?._id || card.cdc_entity_id_syen,\r\n            cdc_created_by_user: card.cdc_created_by_user?._id || card.cdc_created_by_user,\r\n            cdc_modified_by_user: card.cdc_modified_by_user?._id || card.cdc_modified_by_user\r\n          } as CoreDashboardCards));\r\n          this.cardsList.set(mappedCards);\r\n        }\r\n        this.loading.set(false);\r\n      },\r\n      error: (error) => {\r\n        console.error('Error loading cards:', error);\r\n        this.notificationService.error('Error loading dashboard cards');\r\n        this.loading.set(false);\r\n      }\r\n    });\r\n  }\r\n\r\n  loadApiEndpoints(): void {\r\n    this.dashboardCardsService.getApiList().subscribe({\r\n      next: (response: controllerResponse) => {\r\n        if (response.success && response.data) {\r\n          this.apiEndpoints.set(response.data as ApiEndpoint[]);\r\n        }\r\n      },\r\n      error: (error) => {\r\n        console.error('Error loading API endpoints:', error);\r\n      }\r\n    });\r\n  }\r\n\r\n  openAddCardModal(): void {\r\n    this.editingCard.set(null);\r\n    this.cardForm = {\r\n      title: '',\r\n      description: '',\r\n      type: 'custom',\r\n      apiEndpoint: '',\r\n      icon: '',\r\n      color: '#3B82F6',\r\n      position: {\r\n        row: 1,\r\n        col: 1,\r\n        colspan: 1,\r\n        rowspan: 1\r\n      }\r\n    };\r\n    this.showModal.set(true);\r\n  }\r\n\r\n  editCard(card: CoreDashboardCards): void {\r\n    this.editingCard.set(card);\r\n    this.cardForm = {\r\n      title: card.cdc_title || '',\r\n      description: card.cdc_description || '',\r\n      type: card.cdc_type || 'custom',\r\n      apiEndpoint: card.cdc_api_endpoint || '',\r\n      icon: card.cdc_icon || '',\r\n      color: card.cdc_color || '#3B82F6',\r\n      position: card.cdc_position && typeof card.cdc_position === 'object' && \r\n        'row' in card.cdc_position && 'col' in card.cdc_position &&\r\n        'colspan' in card.cdc_position && 'rowspan' in card.cdc_position\r\n        ? {\r\n            row: card.cdc_position.row || 1,\r\n            col: card.cdc_position.col || 1,\r\n            colspan: card.cdc_position.colspan || 1,\r\n            rowspan: card.cdc_position.rowspan || 1\r\n          }\r\n        : {\r\n            row: 1,\r\n            col: 1,\r\n            colspan: 1,\r\n            rowspan: 1\r\n          }\r\n    };\r\n    this.showModal.set(true);\r\n  }\r\n\r\n  closeModal(): void {\r\n    this.showModal.set(false);\r\n    this.editingCard.set(null);\r\n  }\r\n\r\n  saveCard(): void {\r\n    const payload: DashboardCardsSaveUpdatePayload = {\r\n      core_dashboard_cards: {\r\n        _id: this.editingCard()?._id,\r\n        cdc_title: this.cardForm.title,\r\n        cdc_description: this.cardForm.description,\r\n        cdc_type: this.cardForm.type,\r\n        cdc_api_endpoint: this.cardForm.apiEndpoint,\r\n        cdc_icon: this.cardForm.icon,\r\n        cdc_color: this.cardForm.color,\r\n        cdc_position: this.cardForm.position,\r\n        cdc_visible: true,\r\n        cdc_draggable: true\r\n      }\r\n    };\r\n\r\n    this.dashboardCardsService.saveUpdateDashboardCard(payload).subscribe({\r\n      next: (response) => {\r\n        if (response.success) {\r\n          this.notificationService.success(\r\n            this.editingCard() ? 'Card updated successfully' : 'Card created successfully'\r\n          );\r\n          this.closeModal();\r\n          this.loadCards();\r\n        } else {\r\n          this.notificationService.error(response.message || 'Error saving card');\r\n        }\r\n      },\r\n      error: (error) => {\r\n        console.error('Error saving card:', error);\r\n        this.notificationService.error('Error saving card');\r\n      }\r\n    });\r\n  }\r\n\r\n  deleteCard(card: CoreDashboardCards): void {\r\n    if (!card._id) return;\r\n\r\n    this.confirmationService.ask({\r\n      title: 'Delete Card',\r\n      message: `Are you sure you want to delete \"${card.cdc_title}\"?`,\r\n      type: 'danger',\r\n      icon: 'delete_forever',\r\n      confirmText: 'Delete',\r\n      cancelText: 'Cancel'\r\n    }).then((confirmed) => {\r\n      if (confirmed) {\r\n        this.dashboardCardsService.deleteDashboardCard(card._id!).subscribe({\r\n          next: (response) => {\r\n            if (response.success) {\r\n              this.notificationService.success('Card deleted successfully');\r\n              this.loadCards();\r\n            } else {\r\n              this.notificationService.error(response.message || 'Error deleting card');\r\n            }\r\n          },\r\n          error: (error) => {\r\n            console.error('Error deleting card:', error);\r\n            this.notificationService.error('Error deleting card');\r\n          }\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  toggleVisibility(card: CoreDashboardCards): void {\r\n    const payload: DashboardCardsSaveUpdatePayload = {\r\n      core_dashboard_cards: {\r\n        _id: card._id,\r\n        cdc_visible: !card.cdc_visible\r\n      }\r\n    };\r\n\r\n    this.dashboardCardsService.saveUpdateDashboardCard(payload).subscribe({\r\n      next: (response) => {\r\n        if (response.success) {\r\n          this.loadCards();\r\n        }\r\n      },\r\n      error: (error) => {\r\n        console.error('Error toggling visibility:', error);\r\n        this.notificationService.error('Error updating card');\r\n      }\r\n    });\r\n  }\r\n\r\n  onGridEvent(event: GridEvent<CoreDashboardCards>): void {\r\n    if (event.type === 'action' && event.action) {\r\n      const card = event.data as CoreDashboardCards;\r\n      \r\n      if (event.action.key === 'edit') {\r\n        this.editCard(card);\r\n      } else if (event.action.key === 'delete') {\r\n        this.deleteCard(card);\r\n      } else if (event.action.key === 'toggle') {\r\n        this.toggleVisibility(card);\r\n      }\r\n    }\r\n  }\r\n\r\n  onTypeChange(value: string | number | string[]): void {\r\n    this.cardForm.type = value as CoreDashboardCards['cdc_type'];\r\n  }\r\n\r\n  onApiEndpointChange(value: string | number | string[]): void {\r\n    this.cardForm.apiEndpoint = String(value);\r\n  }\r\n}\r\n\r\n"],"names":[],"mappings":"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"}

package/fesm2022/{cloud-ide-layout-drawer-theme.component-BTefQuBy.mjs → cloud-ide-layout-drawer-theme.component-BzHno5lQ.mjs}

@@ -1,10 +1,10 @@
 import { NgFor, NgIf, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, PLATFORM_ID, Inject, Component } from '@angular/core';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { CideSelectComponent, CideEleButtonComponent } from 'cloud-ide-element';
-import { A as AppStateHelperService, s as setCSSVariable, d as CideLytThemeService } from './cloud-ide-layout-cloud-ide-layout-BdeMOoAp.mjs';
+import { A as AppStateHelperService, s as setCSSVariable, d as CideLytThemeService } from './cloud-ide-layout-cloud-ide-layout-DUv_E9sG.mjs';
 import _, { cloneDeep, isEqual } from 'lodash';
 
 class CideLytDrawerThemeComponent {
@@ -290,7 +290,7 @@ class CideLytDrawerThemeComponent {
         document.documentElement.dir = this.isRTL ? 'rtl' : 'ltr';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytDrawerThemeComponent, deps: [{ token: CideLytThemeService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytDrawerThemeComponent, isStandalone: true, selector: "cide-lyt-drawer-theme", ngImport: i0, template: "<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\n  <!-- STICKY HEADER SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-top-0 tw-border-b tw-border-gray-200 tw-z-10 tw-flex-shrink-0\">\n    <!-- DYNAMIC HEADING -->\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">Preset Theme</h6>\n    </div>\n  </div>\n\n  <!-- SCROLLABLE CONTENT AREA -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-scroll-smooth tw-p-2 tw-flex tw-flex-col tw-gap-5 tw-text-sm tw-pb-3 theme-scroll-container\">\n    <!-- Preset Theme -->\n    <section>\n      <cide-ele-select id=\"theme-selector\" [ngModel]=\"selectedTheme\" (ngModelChange)=\"onThemeModelChange($event)\"\n        [options]=\"presetThemes\" [size]=\"'sm'\"></cide-ele-select>\n    </section>\n\n    <!-- Direction Toggle -->\n    <section>\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-2\">\n        <h2 class=\"tw-text-md tw-font-semibold tw-text-gray-800\">Text Direction</h2>\n        <div class=\"tw-flex tw-items-center tw-gap-1\">\n          <span class=\"tw-text-xs tw-text-gray-500\">LTR</span>\n          <label for=\"direction-toggle\" class=\"tw-relative tw-inline-block tw-w-9 tw-h-5\">\n            <input type=\"checkbox\" id=\"direction-toggle\" class=\"tw-opacity-0 tw-w-0 tw-h-0\" [(ngModel)]=\"isRTL\"\n              (change)=\"onDirectionToggle($event)\">\n            <span\n              class=\"tw-absolute tw-cursor-pointer tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-bg-gray-300 tw-rounded-full tw-transition-colors checked:tw-bg-blue-500 before:tw-absolute before:tw-content-[''] before:tw-h-4 before:tw-w-4 before:tw-left-0.5 before:tw-bottom-0.5 before:tw-bg-white before:tw-rounded-full before:tw-transition-transform checked:before:tw-translate-x-4\"></span>\n          </label>\n          <span class=\"tw-text-xs tw-text-gray-500\">RTL</span>\n        </div>\n      </div>\n    </section>\n\n    <!-- Theme Property Groups (Brand, Text, Background, Font Sizes, Line Heights) -->\n    <section *ngFor=\"let group of themeGroups\" class=\"theme-section\">\n      <h2 class=\"tw-text-md tw-font-semibold tw-mb-2 tw-text-gray-800\">{{ group.label }}</h2>\n      <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-gap-x-4\">\n        <div *ngFor=\"let item of group.items\"\n          class=\"tw-flex tw-items-center tw-gap-2 tw-p-1 tw-rounded-lg tw-bg-gray-50\"\n          [ngClass]=\"{'tw-flex-col tw-items-stretch': (group.label === 'Font Sizes' || group.label === 'Line Heights' || group.label === 'Layout Dimensions')}\">\n          <!-- Font Sizes: label on top, input in middle, unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Font Sizes'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.001\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">rem</span>\n            </div>\n          </ng-container>\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Font Sizes' && group.label !== 'Line Heights' && group.label !== 'Layout Dimensions'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>", styles: [".theme-scroll-container{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.theme-scroll-container{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb)}.theme-scroll-container::-webkit-scrollbar{width:6px}.theme-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb);border-radius:3px}.theme-scroll-container::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px;transition:background-color .2s ease}.theme-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.sticky-action-buttons{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#fffffff2;border-top:1px solid #e2e8f0;box-shadow:0 -4px 6px -1px #0000001a}.action-button{transition:all .2s ease-in-out}.action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.action-button:active:not(:disabled){transform:translateY(0)}.action-button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.theme-input:focus{transform:scale(1.02);transition:transform .2s ease-in-out}.color-input{transition:all .2s ease-in-out}.color-input:hover{transform:scale(1.1);box-shadow:0 4px 8px #0003}.theme-section{transition:all .3s ease-in-out}.theme-section:hover{background-color:#f8fafc;border-radius:8px;padding:8px;margin:-8px}@media (max-width: 640px){.sticky-action-buttons{padding:12px}.action-button{font-size:14px;padding:8px 12px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytDrawerThemeComponent, isStandalone: true, selector: "cide-lyt-drawer-theme", ngImport: i0, template: "<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\n  <!-- STICKY HEADER SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-top-0 tw-border-b tw-border-gray-200 tw-z-10 tw-flex-shrink-0\">\n    <!-- DYNAMIC HEADING -->\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">Preset Theme</h6>\n    </div>\n  </div>\n\n  <!-- SCROLLABLE CONTENT AREA -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-scroll-smooth tw-p-2 tw-flex tw-flex-col tw-gap-5 tw-text-sm tw-pb-3 theme-scroll-container\">\n    <!-- Preset Theme -->\n    <section>\n      <cide-ele-select id=\"theme-selector\" [ngModel]=\"selectedTheme\" (ngModelChange)=\"onThemeModelChange($event)\"\n        [options]=\"presetThemes\" [size]=\"'sm'\"></cide-ele-select>\n    </section>\n\n    <!-- Direction Toggle -->\n    <section>\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-2\">\n        <h2 class=\"tw-text-md tw-font-semibold tw-text-gray-800\">Text Direction</h2>\n        <div class=\"tw-flex tw-items-center tw-gap-1\">\n          <span class=\"tw-text-xs tw-text-gray-500\">LTR</span>\n          <label for=\"direction-toggle\" class=\"tw-relative tw-inline-block tw-w-9 tw-h-5\">\n            <input type=\"checkbox\" id=\"direction-toggle\" class=\"tw-opacity-0 tw-w-0 tw-h-0\" [(ngModel)]=\"isRTL\"\n              (change)=\"onDirectionToggle($event)\">\n            <span\n              class=\"tw-absolute tw-cursor-pointer tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-bg-gray-300 tw-rounded-full tw-transition-colors checked:tw-bg-blue-500 before:tw-absolute before:tw-content-[''] before:tw-h-4 before:tw-w-4 before:tw-left-0.5 before:tw-bottom-0.5 before:tw-bg-white before:tw-rounded-full before:tw-transition-transform checked:before:tw-translate-x-4\"></span>\n          </label>\n          <span class=\"tw-text-xs tw-text-gray-500\">RTL</span>\n        </div>\n      </div>\n    </section>\n\n    <!-- Theme Property Groups (Brand, Text, Background, Font Sizes, Line Heights) -->\n    <section *ngFor=\"let group of themeGroups\" class=\"theme-section\">\n      <h2 class=\"tw-text-md tw-font-semibold tw-mb-2 tw-text-gray-800\">{{ group.label }}</h2>\n      <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-gap-x-4\">\n        <div *ngFor=\"let item of group.items\"\n          class=\"tw-flex tw-items-center tw-gap-2 tw-p-1 tw-rounded-lg tw-bg-gray-50\"\n          [ngClass]=\"{'tw-flex-col tw-items-stretch': (group.label === 'Font Sizes' || group.label === 'Line Heights' || group.label === 'Layout Dimensions')}\">\n          <!-- Font Sizes: label on top, input in middle, unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Font Sizes'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.001\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">rem</span>\n            </div>\n          </ng-container>\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Font Sizes' && group.label !== 'Line Heights' && group.label !== 'Layout Dimensions'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>", styles: [".theme-scroll-container{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.theme-scroll-container{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb)}.theme-scroll-container::-webkit-scrollbar{width:6px}.theme-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb);border-radius:3px}.theme-scroll-container::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px;transition:background-color .2s ease}.theme-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.sticky-action-buttons{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#fffffff2;border-top:1px solid #e2e8f0;box-shadow:0 -4px 6px -1px #0000001a}.action-button{transition:all .2s ease-in-out}.action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.action-button:active:not(:disabled){transform:translateY(0)}.action-button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.theme-input:focus{transform:scale(1.02);transition:transform .2s ease-in-out}.color-input{transition:all .2s ease-in-out}.color-input:hover{transform:scale(1.1);box-shadow:0 4px 8px #0003}.theme-section{transition:all .3s ease-in-out}.theme-section:hover{background-color:#f8fafc;border-radius:8px;padding:8px;margin:-8px}@media (max-width: 640px){.sticky-action-buttons{padding:12px}.action-button{font-size:14px;padding:8px 12px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytDrawerThemeComponent, decorators: [{
             type: Component,
@@ -301,4 +301,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }] }] });
 
 export { CideLytDrawerThemeComponent };
-//# sourceMappingURL=cloud-ide-layout-drawer-theme.component-BTefQuBy.mjs.map
+//# sourceMappingURL=cloud-ide-layout-drawer-theme.component-BzHno5lQ.mjs.map

package/fesm2022/{cloud-ide-layout-drawer-theme.component-BTefQuBy.mjs.map → cloud-ide-layout-drawer-theme.component-BzHno5lQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cloud-ide-layout-drawer-theme.component-BTefQuBy.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.ts","../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.html"],"sourcesContent":["import { NgFor, NgIf } from '@angular/common';\nimport { NgClass } from '@angular/common';\nimport { Component, OnInit, PLATFORM_ID, Inject, inject } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CideSelectComponent, SelectOption, CideEleButtonComponent } from 'cloud-ide-element';\nimport { CideLytThemeService, Theme, setCSSVariable } from '../../../services/theme/theme.service';\nimport type { MSystemThemeUserPreferencesRequest, SystemThemesListControllerRespoonse, SystemThemeUserPreferencesControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { SystemThemeControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { ICoreSyth, ICoreSyoth, ICoreSyupth } from 'cloud-ide-lms-model';\nimport { isEqual, cloneDeep } from 'lodash';\nimport _ from 'lodash';\nimport { AppStateHelperService } from '../../../services/app-state';\n\ninterface ThemeColor {\n  label: string;\n  varName: string;\n  value: string;\n}\n\ninterface TypographySetting {\n  label: string;\n  varName: string;\n  value: string;\n  type: 'number' | 'text';\n  min?: number;\n  max?: number;\n}\n\ntype ThemeGroup = {\n  label: string;\n  items: Array<{\n    label: string;\n    varName: string;\n    value: string;\n    type: 'number' | 'text';\n    min?: number;\n    max?: number;\n  }>;\n};\n\n@Component({\n  selector: 'cide-lyt-drawer-theme',\n  standalone: true,\n  imports: [FormsModule, NgFor, NgIf, NgClass, CideSelectComponent, CideEleButtonComponent],\n  templateUrl: './drawer-theme.component.html',\n  styleUrl: './drawer-theme.component.scss'\n})\nexport class CideLytDrawerThemeComponent implements OnInit {\n  private readonly appState = inject(AppStateHelperService);\n  // Preset themes\n  presetThemes: { value: string, label: string, theme: ICoreSyth }[] = [];\n  selectedTheme = '';\n  isLoadingThemes = false;\n  themeLoadError = '';\n  mergedTheme: { [key: string]: string } = {};\n  isRTL = false;\n  originalThemeGroupValues: ThemeGroup[] = [];\n  originalApiThemeValues: { [key: string]: string } = {}; // Store original API values\n\n  themeGroups: ThemeGroup[] = [\n    {\n      label: 'Brand Colors',\n      items: [\n        { label: 'Primary', varName: '--cide-theme-color-brand-primary', value: '#4f46e5', type: 'text' },\n        { label: 'Accent', varName: '--cide-theme-color-brand-accent', value: '#4338ca', type: 'text' },\n        { label: 'Separator', varName: '--cide-theme-color-brand-separator', value: '#e5e7eb', type: 'text' }\n      ]\n    },\n    {\n      label: 'Text Colors',\n      items: [\n        { label: 'Body Text', varName: '--cide-theme-color-text-body', value: '#374151', type: 'text' },\n        { label: 'Heading Text', varName: '--cide-theme-color-text-heading', value: '#111827', type: 'text' },\n        { label: 'Link Text', varName: '--cide-theme-color-text-link', value: '#3b82f6', type: 'text' },\n        { label: 'Muted Text', varName: '--cide-theme-color-text-muted', value: '#6b7280', type: 'text' }\n      ]\n    },\n    {\n      label: 'Background Colors',\n      items: [\n        { label: 'Body Background', varName: '--cide-theme-color-background-body', value: '#ffffff', type: 'text' }\n      ]\n    },\n    {\n      label: 'Layout Dimensions',\n      items: [\n        { label: 'Stack Wrapper Width', varName: '--cide-lyt-stack-wrapper-width', value: '60', type: 'number', min: 20, max: 120 }\n      ]\n    },\n    {\n      label: 'Font Sizes',\n      items: [\n        { label: 'XXXL Font Size', varName: '--cide-theme-font-size-xxxl', value: '3.052', type: 'number', min: 1, max: 10 },\n        { label: 'XXL Font Size', varName: '--cide-theme-font-size-xxl', value: '2.441', type: 'number', min: 1, max: 10 },\n        { label: 'XL Font Size', varName: '--cide-theme-font-size-xl', value: '1.953', type: 'number', min: 1, max: 10 },\n        { label: 'LG Font Size', varName: '--cide-theme-font-size-lg', value: '1.563', type: 'number', min: 1, max: 10 },\n        { label: 'MD Font Size', varName: '--cide-theme-font-size-md', value: '1.25', type: 'number', min: 1, max: 10 },\n        { label: 'Paragraph Font Size', varName: '--cide-theme-font-size-p', value: '1', type: 'number', min: 0.5, max: 5 },\n        { label: 'SM Font Size', varName: '--cide-theme-font-size-sm', value: '0.9', type: 'number', min: 0.5, max: 5 },\n        { label: 'XS Font Size', varName: '--cide-theme-font-size-xs', value: '0.8', type: 'number', min: 0.5, max: 5 }\n      ]\n    },\n    {\n      label: 'Line Heights',\n      items: [\n        { label: 'Body Line Height', varName: '--cide-theme-line-height-body', value: '1.6', type: 'number', min: 1, max: 3 },\n        { label: 'Heading Line Height', varName: '--cide-theme-line-height-heading', value: '1.2', type: 'number', min: 1, max: 3 }\n      ]\n    }\n  ];\n\n  constructor(\n    private themeService: CideLytThemeService,\n    @Inject(PLATFORM_ID) private platformId: object\n  ) { }\n\n  ngOnInit(): void {\n    // Modern Angular v20 pattern: Use Signals directly\n    this.selectedTheme = this.themeService.selectedTheme();\n\n    // fetch the system themes list\n    this.isLoadingThemes = true;\n    this.themeService.fetchSystemThemesList().subscribe({\n      next: (res: SystemThemesListControllerRespoonse) => {\n        const themes: ICoreSyth[] = res?.data?.core_system_themes || [];\n        this.presetThemes = themes.map((theme: ICoreSyth) => ({\n          value: theme._id || '',\n          label: theme.syth_theme_name || theme.syth_theme_id || '',\n          theme\n        }));\n        this.isLoadingThemes = false;\n        // If user has no theme set, select and apply the default theme\n        if (!this.selectedTheme) {\n          const defaultTheme = this.presetThemes.find(t => t.theme.syth_is_default);\n          if (defaultTheme) {\n            this.selectedTheme = defaultTheme.value;\n            // Apply the default theme as CSS variables\n            if (defaultTheme.theme.syth_properties) {\n              Object.entries(defaultTheme.theme.syth_properties).forEach(([varName, value]) => {\n                this.updateVar(varName, value as string);\n              });\n            }\n          }\n        }\n      },\n      error: () => {\n        this.themeLoadError = 'Failed to load themes';\n        this.isLoadingThemes = false;\n      }\n    });\n    this.loadAndApplyUserTheme();\n  }\n\n  loadAndApplyUserTheme(): void {\n    this.themeService.loadTheme().subscribe({\n      next: (res: SystemThemeControllerRespoonse) => {\n        const base: ICoreSyth | undefined = res?.data?.core_system_themes;\n        const org: ICoreSyoth | undefined = res?.data?.core_system_organization_themes;\n        const user: ICoreSyupth | undefined = res?.data?.core_system_theme_user_preferences;\n        // Start with base theme properties\n        let merged = { ...(base?.syth_properties || {}) };\n        // Override with org overrides\n        if (org?.syoth_overrides) {\n          merged = { ...merged, ...org.syoth_overrides };\n        }\n        // Override with user overrides\n        if (user?.syupth_overrides) {\n          merged = { ...merged, ...user.syupth_overrides };\n        }\n        this.mergedTheme = merged;\n\n        // Store original API values for reset functionality\n        this.originalApiThemeValues = { ...merged };\n\n        // Apply merged theme as CSS variables\n        Object.entries(this.mergedTheme).forEach(([varName, value]) => {\n          this.updateVar(varName, value as string);\n        });\n\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = merged[item.varName] || merged[key] || item.value;\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      },\n      error: () => {\n        // handle error if needed\n      }\n    });\n  }\n\n  // Update CSS variable in real time\n  updateVar(varName: string, value: string) {\n    // You can use either the utility function directly or the service method\n    setCSSVariable(varName, value, this.platformId);\n    // Alternative: this.themeService.updateCSSVariable(varName, value);\n  }\n\n  onThemeModelChange(value: string | number | string[]): void {\n    this.selectedTheme = value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected) {\n      this.onThemeChange({ value: this.selectedTheme, label: selected.label });\n    }\n  }\n\n  onThemeChange(event: SelectOption) {\n    this.selectedTheme = event.value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected && selected.theme && selected.theme.syth_properties) {\n      // here we will check the theme selected by organization is same if yes then overide also for user preferences\n      if (this.themeService.selectedTheme() === selected.theme._id) {\n        this.loadAndApplyUserTheme();\n      } else {\n        // Store original API values for the selected theme\n        this.originalApiThemeValues = _.cloneDeep(selected.theme.syth_properties);\n\n        // Update all group values from the selected theme\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = selected.theme.syth_properties[item.varName] ||\n              selected.theme.syth_properties[key] ||\n              item.value;\n\n            this.updateVar(item.varName, item.value);\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      }\n    }\n  }\n\n  onReset() {\n    // Restore all values from the original API values\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        // Get the original API value\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key] ||\n          item.value;\n\n        // Update the item value\n        item.value = originalValue;\n\n        // Apply the CSS variable\n        this.updateVar(item.varName, item.value);\n\n        if (key.includes('font_size') || key.includes('line_height')) {\n          item.value = parseFloat(item.value) as unknown as string;\n        }\n      }\n    }\n\n    // Update the originalThemeGroupValues to reflect the reset state\n    this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n  }\n\n  onSave() {\n    // Collect all current values\n    const themeVars: Theme = {\n\n    };\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        themeVars[item.varName?.replaceAll('-', '_')] = item.value;\n      }\n    }\n\n    const systemThemePreferences: MSystemThemeUserPreferencesRequest = {\n      syupth_overrides: {\n        ...themeVars\n      },\n      syupth_system_theme_id_syth: this.selectedTheme, // LATER: need to upadate LATER\n      syupth_user_id_user: this.appState.currentUser()?._id || '', // LATER: need to get user id from user\n      syupth_entity_id_syen: this.appState.getActiveEntityId() || '', // LATER: need to get entity id from user\n      syth_theme_id: \"\" // need to upadate LATER\n    };\n\n    // TODO: Send themeVars to backend or emit event by designConfigRoutesUrl?.systemThemeUserPreferences\n    this.themeService.saveSystemThemeUserPreferences(systemThemePreferences).subscribe({\n      next: (res: SystemThemeUserPreferencesControllerRespoonse) => {\n        console.log('Theme saved:', res);\n        // Modern Angular v20 pattern: Update Signal through service method\n        // Note: The theme service should provide a method to update the selected theme\n        // For now, we'll just log the change since the service doesn't expose a setter\n        console.log('Theme selected:', this.selectedTheme);\n      },\n      error: (error) => {\n        console.error('Error saving theme:', error);\n      }\n    });\n  }\n\n  hasUnsavedChanges(): boolean {\n    // chec selected theme is different\n    if (this.themeService.selectedTheme() !== this.selectedTheme) {\n      return true;\n    }\n    // check the theme groups are different\n    return !isEqual(this.themeGroups, this.originalThemeGroupValues);\n  }\n\n  /**\n   * Check if current values differ from the original API values\n   * This is useful for determining if reset should be enabled\n   */\n  hasChangesFromOriginal(): boolean {\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key];\n\n        if (originalValue !== undefined && item.value !== originalValue) {\n          return true;\n        }\n      }\n    }\n    return false;\n  }\n\n  onColorChange(event: Event, color: ThemeColor) {\n    const input = event.target as HTMLInputElement;\n    color.value = input.value;\n    this.updateVar(color.varName, color.value);\n  }\n\n  onTypographyChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    this.updateVar(setting.varName, setting.type === 'number' ? setting.value : setting.value);\n  }\n\n  onLayoutChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    // For layout dimensions, append 'px' unit to the value\n    this.updateVar(setting.varName, setting.value + 'px');\n  }\n\n  onDirectionToggle(event: Event) {\n    this.isRTL = (event.target as HTMLInputElement).checked;\n    document.documentElement.dir = this.isRTL ? 'rtl' : 'ltr';\n  }\n}\n","<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\n  <!-- STICKY HEADER SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-top-0 tw-border-b tw-border-gray-200 tw-z-10 tw-flex-shrink-0\">\n    <!-- DYNAMIC HEADING -->\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">Preset Theme</h6>\n    </div>\n  </div>\n\n  <!-- SCROLLABLE CONTENT AREA -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-scroll-smooth tw-p-2 tw-flex tw-flex-col tw-gap-5 tw-text-sm tw-pb-3 theme-scroll-container\">\n    <!-- Preset Theme -->\n    <section>\n      <cide-ele-select id=\"theme-selector\" [ngModel]=\"selectedTheme\" (ngModelChange)=\"onThemeModelChange($event)\"\n        [options]=\"presetThemes\" [size]=\"'sm'\"></cide-ele-select>\n    </section>\n\n    <!-- Direction Toggle -->\n    <section>\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-2\">\n        <h2 class=\"tw-text-md tw-font-semibold tw-text-gray-800\">Text Direction</h2>\n        <div class=\"tw-flex tw-items-center tw-gap-1\">\n          <span class=\"tw-text-xs tw-text-gray-500\">LTR</span>\n          <label for=\"direction-toggle\" class=\"tw-relative tw-inline-block tw-w-9 tw-h-5\">\n            <input type=\"checkbox\" id=\"direction-toggle\" class=\"tw-opacity-0 tw-w-0 tw-h-0\" [(ngModel)]=\"isRTL\"\n              (change)=\"onDirectionToggle($event)\">\n            <span\n              class=\"tw-absolute tw-cursor-pointer tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-bg-gray-300 tw-rounded-full tw-transition-colors checked:tw-bg-blue-500 before:tw-absolute before:tw-content-[''] before:tw-h-4 before:tw-w-4 before:tw-left-0.5 before:tw-bottom-0.5 before:tw-bg-white before:tw-rounded-full before:tw-transition-transform checked:before:tw-translate-x-4\"></span>\n          </label>\n          <span class=\"tw-text-xs tw-text-gray-500\">RTL</span>\n        </div>\n      </div>\n    </section>\n\n    <!-- Theme Property Groups (Brand, Text, Background, Font Sizes, Line Heights) -->\n    <section *ngFor=\"let group of themeGroups\" class=\"theme-section\">\n      <h2 class=\"tw-text-md tw-font-semibold tw-mb-2 tw-text-gray-800\">{{ group.label }}</h2>\n      <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-gap-x-4\">\n        <div *ngFor=\"let item of group.items\"\n          class=\"tw-flex tw-items-center tw-gap-2 tw-p-1 tw-rounded-lg tw-bg-gray-50\"\n          [ngClass]=\"{'tw-flex-col tw-items-stretch': (group.label === 'Font Sizes' || group.label === 'Line Heights' || group.label === 'Layout Dimensions')}\">\n          <!-- Font Sizes: label on top, input in middle, unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Font Sizes'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.001\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">rem</span>\n            </div>\n          </ng-container>\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Font Sizes' && group.label !== 'Line Heights' && group.label !== 'Layout Dimensions'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>"],"names":[],"mappings":"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"}
+{"version":3,"file":"cloud-ide-layout-drawer-theme.component-BzHno5lQ.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.ts","../../../projects/cloud-ide-layout/src/lib/layout/sidedrawer/drawer-theme/drawer-theme.component.html"],"sourcesContent":["import { NgFor, NgIf } from '@angular/common';\nimport { NgClass } from '@angular/common';\nimport { Component, OnInit, PLATFORM_ID, Inject, inject } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CideSelectComponent, SelectOption, CideEleButtonComponent } from 'cloud-ide-element';\nimport { CideLytThemeService, Theme, setCSSVariable } from '../../../services/theme/theme.service';\nimport type { MSystemThemeUserPreferencesRequest, SystemThemesListControllerRespoonse, SystemThemeUserPreferencesControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { SystemThemeControllerRespoonse } from 'cloud-ide-lms-model';\nimport type { ICoreSyth, ICoreSyoth, ICoreSyupth } from 'cloud-ide-lms-model';\nimport { isEqual, cloneDeep } from 'lodash';\nimport _ from 'lodash';\nimport { AppStateHelperService } from '../../../services/app-state';\n\ninterface ThemeColor {\n  label: string;\n  varName: string;\n  value: string;\n}\n\ninterface TypographySetting {\n  label: string;\n  varName: string;\n  value: string;\n  type: 'number' | 'text';\n  min?: number;\n  max?: number;\n}\n\ntype ThemeGroup = {\n  label: string;\n  items: Array<{\n    label: string;\n    varName: string;\n    value: string;\n    type: 'number' | 'text';\n    min?: number;\n    max?: number;\n  }>;\n};\n\n@Component({\n  selector: 'cide-lyt-drawer-theme',\n  standalone: true,\n  imports: [FormsModule, NgFor, NgIf, NgClass, CideSelectComponent, CideEleButtonComponent],\n  templateUrl: './drawer-theme.component.html',\n  styleUrl: './drawer-theme.component.scss'\n})\nexport class CideLytDrawerThemeComponent implements OnInit {\n  private readonly appState = inject(AppStateHelperService);\n  // Preset themes\n  presetThemes: { value: string, label: string, theme: ICoreSyth }[] = [];\n  selectedTheme = '';\n  isLoadingThemes = false;\n  themeLoadError = '';\n  mergedTheme: { [key: string]: string } = {};\n  isRTL = false;\n  originalThemeGroupValues: ThemeGroup[] = [];\n  originalApiThemeValues: { [key: string]: string } = {}; // Store original API values\n\n  themeGroups: ThemeGroup[] = [\n    {\n      label: 'Brand Colors',\n      items: [\n        { label: 'Primary', varName: '--cide-theme-color-brand-primary', value: '#4f46e5', type: 'text' },\n        { label: 'Accent', varName: '--cide-theme-color-brand-accent', value: '#4338ca', type: 'text' },\n        { label: 'Separator', varName: '--cide-theme-color-brand-separator', value: '#e5e7eb', type: 'text' }\n      ]\n    },\n    {\n      label: 'Text Colors',\n      items: [\n        { label: 'Body Text', varName: '--cide-theme-color-text-body', value: '#374151', type: 'text' },\n        { label: 'Heading Text', varName: '--cide-theme-color-text-heading', value: '#111827', type: 'text' },\n        { label: 'Link Text', varName: '--cide-theme-color-text-link', value: '#3b82f6', type: 'text' },\n        { label: 'Muted Text', varName: '--cide-theme-color-text-muted', value: '#6b7280', type: 'text' }\n      ]\n    },\n    {\n      label: 'Background Colors',\n      items: [\n        { label: 'Body Background', varName: '--cide-theme-color-background-body', value: '#ffffff', type: 'text' }\n      ]\n    },\n    {\n      label: 'Layout Dimensions',\n      items: [\n        { label: 'Stack Wrapper Width', varName: '--cide-lyt-stack-wrapper-width', value: '60', type: 'number', min: 20, max: 120 }\n      ]\n    },\n    {\n      label: 'Font Sizes',\n      items: [\n        { label: 'XXXL Font Size', varName: '--cide-theme-font-size-xxxl', value: '3.052', type: 'number', min: 1, max: 10 },\n        { label: 'XXL Font Size', varName: '--cide-theme-font-size-xxl', value: '2.441', type: 'number', min: 1, max: 10 },\n        { label: 'XL Font Size', varName: '--cide-theme-font-size-xl', value: '1.953', type: 'number', min: 1, max: 10 },\n        { label: 'LG Font Size', varName: '--cide-theme-font-size-lg', value: '1.563', type: 'number', min: 1, max: 10 },\n        { label: 'MD Font Size', varName: '--cide-theme-font-size-md', value: '1.25', type: 'number', min: 1, max: 10 },\n        { label: 'Paragraph Font Size', varName: '--cide-theme-font-size-p', value: '1', type: 'number', min: 0.5, max: 5 },\n        { label: 'SM Font Size', varName: '--cide-theme-font-size-sm', value: '0.9', type: 'number', min: 0.5, max: 5 },\n        { label: 'XS Font Size', varName: '--cide-theme-font-size-xs', value: '0.8', type: 'number', min: 0.5, max: 5 }\n      ]\n    },\n    {\n      label: 'Line Heights',\n      items: [\n        { label: 'Body Line Height', varName: '--cide-theme-line-height-body', value: '1.6', type: 'number', min: 1, max: 3 },\n        { label: 'Heading Line Height', varName: '--cide-theme-line-height-heading', value: '1.2', type: 'number', min: 1, max: 3 }\n      ]\n    }\n  ];\n\n  constructor(\n    private themeService: CideLytThemeService,\n    @Inject(PLATFORM_ID) private platformId: object\n  ) { }\n\n  ngOnInit(): void {\n    // Modern Angular v20 pattern: Use Signals directly\n    this.selectedTheme = this.themeService.selectedTheme();\n\n    // fetch the system themes list\n    this.isLoadingThemes = true;\n    this.themeService.fetchSystemThemesList().subscribe({\n      next: (res: SystemThemesListControllerRespoonse) => {\n        const themes: ICoreSyth[] = res?.data?.core_system_themes || [];\n        this.presetThemes = themes.map((theme: ICoreSyth) => ({\n          value: theme._id || '',\n          label: theme.syth_theme_name || theme.syth_theme_id || '',\n          theme\n        }));\n        this.isLoadingThemes = false;\n        // If user has no theme set, select and apply the default theme\n        if (!this.selectedTheme) {\n          const defaultTheme = this.presetThemes.find(t => t.theme.syth_is_default);\n          if (defaultTheme) {\n            this.selectedTheme = defaultTheme.value;\n            // Apply the default theme as CSS variables\n            if (defaultTheme.theme.syth_properties) {\n              Object.entries(defaultTheme.theme.syth_properties).forEach(([varName, value]) => {\n                this.updateVar(varName, value as string);\n              });\n            }\n          }\n        }\n      },\n      error: () => {\n        this.themeLoadError = 'Failed to load themes';\n        this.isLoadingThemes = false;\n      }\n    });\n    this.loadAndApplyUserTheme();\n  }\n\n  loadAndApplyUserTheme(): void {\n    this.themeService.loadTheme().subscribe({\n      next: (res: SystemThemeControllerRespoonse) => {\n        const base: ICoreSyth | undefined = res?.data?.core_system_themes;\n        const org: ICoreSyoth | undefined = res?.data?.core_system_organization_themes;\n        const user: ICoreSyupth | undefined = res?.data?.core_system_theme_user_preferences;\n        // Start with base theme properties\n        let merged = { ...(base?.syth_properties || {}) };\n        // Override with org overrides\n        if (org?.syoth_overrides) {\n          merged = { ...merged, ...org.syoth_overrides };\n        }\n        // Override with user overrides\n        if (user?.syupth_overrides) {\n          merged = { ...merged, ...user.syupth_overrides };\n        }\n        this.mergedTheme = merged;\n\n        // Store original API values for reset functionality\n        this.originalApiThemeValues = { ...merged };\n\n        // Apply merged theme as CSS variables\n        Object.entries(this.mergedTheme).forEach(([varName, value]) => {\n          this.updateVar(varName, value as string);\n        });\n\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = merged[item.varName] || merged[key] || item.value;\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      },\n      error: () => {\n        // handle error if needed\n      }\n    });\n  }\n\n  // Update CSS variable in real time\n  updateVar(varName: string, value: string) {\n    // You can use either the utility function directly or the service method\n    setCSSVariable(varName, value, this.platformId);\n    // Alternative: this.themeService.updateCSSVariable(varName, value);\n  }\n\n  onThemeModelChange(value: string | number | string[]): void {\n    this.selectedTheme = value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected) {\n      this.onThemeChange({ value: this.selectedTheme, label: selected.label });\n    }\n  }\n\n  onThemeChange(event: SelectOption) {\n    this.selectedTheme = event.value as string;\n    const selected = this.presetThemes.find(t => t.value === this.selectedTheme);\n    if (selected && selected.theme && selected.theme.syth_properties) {\n      // here we will check the theme selected by organization is same if yes then overide also for user preferences\n      if (this.themeService.selectedTheme() === selected.theme._id) {\n        this.loadAndApplyUserTheme();\n      } else {\n        // Store original API values for the selected theme\n        this.originalApiThemeValues = _.cloneDeep(selected.theme.syth_properties);\n\n        // Update all group values from the selected theme\n        for (const group of this.themeGroups) {\n          for (const item of group.items) {\n            const key = item.varName.replace(/-/g, '_');\n            item.value = selected.theme.syth_properties[item.varName] ||\n              selected.theme.syth_properties[key] ||\n              item.value;\n\n            this.updateVar(item.varName, item.value);\n\n            if (key.includes('font_size') || key.includes('line_height')) {\n              item.value = parseFloat(item.value) as unknown as string;\n            }\n          }\n        }\n        // Store a deep copy of the current values for reset\n        this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n      }\n    }\n  }\n\n  onReset() {\n    // Restore all values from the original API values\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        // Get the original API value\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key] ||\n          item.value;\n\n        // Update the item value\n        item.value = originalValue;\n\n        // Apply the CSS variable\n        this.updateVar(item.varName, item.value);\n\n        if (key.includes('font_size') || key.includes('line_height')) {\n          item.value = parseFloat(item.value) as unknown as string;\n        }\n      }\n    }\n\n    // Update the originalThemeGroupValues to reflect the reset state\n    this.originalThemeGroupValues = cloneDeep(this.themeGroups);\n  }\n\n  onSave() {\n    // Collect all current values\n    const themeVars: Theme = {\n\n    };\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        themeVars[item.varName?.replaceAll('-', '_')] = item.value;\n      }\n    }\n\n    const systemThemePreferences: MSystemThemeUserPreferencesRequest = {\n      syupth_overrides: {\n        ...themeVars\n      },\n      syupth_system_theme_id_syth: this.selectedTheme, // LATER: need to upadate LATER\n      syupth_user_id_user: this.appState.currentUser()?._id || '', // LATER: need to get user id from user\n      syupth_entity_id_syen: this.appState.getActiveEntityId() || '', // LATER: need to get entity id from user\n      syth_theme_id: \"\" // need to upadate LATER\n    };\n\n    // TODO: Send themeVars to backend or emit event by designConfigRoutesUrl?.systemThemeUserPreferences\n    this.themeService.saveSystemThemeUserPreferences(systemThemePreferences).subscribe({\n      next: (res: SystemThemeUserPreferencesControllerRespoonse) => {\n        console.log('Theme saved:', res);\n        // Modern Angular v20 pattern: Update Signal through service method\n        // Note: The theme service should provide a method to update the selected theme\n        // For now, we'll just log the change since the service doesn't expose a setter\n        console.log('Theme selected:', this.selectedTheme);\n      },\n      error: (error) => {\n        console.error('Error saving theme:', error);\n      }\n    });\n  }\n\n  hasUnsavedChanges(): boolean {\n    // chec selected theme is different\n    if (this.themeService.selectedTheme() !== this.selectedTheme) {\n      return true;\n    }\n    // check the theme groups are different\n    return !isEqual(this.themeGroups, this.originalThemeGroupValues);\n  }\n\n  /**\n   * Check if current values differ from the original API values\n   * This is useful for determining if reset should be enabled\n   */\n  hasChangesFromOriginal(): boolean {\n    for (const group of this.themeGroups) {\n      for (const item of group.items) {\n        const key = item.varName.replace(/-/g, '_');\n        const originalValue = this.originalApiThemeValues[item.varName] ||\n          this.originalApiThemeValues[key];\n\n        if (originalValue !== undefined && item.value !== originalValue) {\n          return true;\n        }\n      }\n    }\n    return false;\n  }\n\n  onColorChange(event: Event, color: ThemeColor) {\n    const input = event.target as HTMLInputElement;\n    color.value = input.value;\n    this.updateVar(color.varName, color.value);\n  }\n\n  onTypographyChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    this.updateVar(setting.varName, setting.type === 'number' ? setting.value : setting.value);\n  }\n\n  onLayoutChange(event: Event, setting: TypographySetting) {\n    const input = event.target as HTMLInputElement;\n    setting.value = input.value;\n    // For layout dimensions, append 'px' unit to the value\n    this.updateVar(setting.varName, setting.value + 'px');\n  }\n\n  onDirectionToggle(event: Event) {\n    this.isRTL = (event.target as HTMLInputElement).checked;\n    document.documentElement.dir = this.isRTL ? 'rtl' : 'ltr';\n  }\n}\n","<div class=\"tw-relative tw-h-full tw-bg-white tw-overflow-hidden tw-flex tw-flex-col\">\n  <!-- STICKY HEADER SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-top-0 tw-border-b tw-border-gray-200 tw-z-10 tw-flex-shrink-0\">\n    <!-- DYNAMIC HEADING -->\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-2 tw-bg-white tw-border-b tw-border-gray-200\">\n      <h6 class=\"tw-font-semibold tw-text-gray-800\">Preset Theme</h6>\n    </div>\n  </div>\n\n  <!-- SCROLLABLE CONTENT AREA -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-scroll-smooth tw-p-2 tw-flex tw-flex-col tw-gap-5 tw-text-sm tw-pb-3 theme-scroll-container\">\n    <!-- Preset Theme -->\n    <section>\n      <cide-ele-select id=\"theme-selector\" [ngModel]=\"selectedTheme\" (ngModelChange)=\"onThemeModelChange($event)\"\n        [options]=\"presetThemes\" [size]=\"'sm'\"></cide-ele-select>\n    </section>\n\n    <!-- Direction Toggle -->\n    <section>\n      <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-2\">\n        <h2 class=\"tw-text-md tw-font-semibold tw-text-gray-800\">Text Direction</h2>\n        <div class=\"tw-flex tw-items-center tw-gap-1\">\n          <span class=\"tw-text-xs tw-text-gray-500\">LTR</span>\n          <label for=\"direction-toggle\" class=\"tw-relative tw-inline-block tw-w-9 tw-h-5\">\n            <input type=\"checkbox\" id=\"direction-toggle\" class=\"tw-opacity-0 tw-w-0 tw-h-0\" [(ngModel)]=\"isRTL\"\n              (change)=\"onDirectionToggle($event)\">\n            <span\n              class=\"tw-absolute tw-cursor-pointer tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-bg-gray-300 tw-rounded-full tw-transition-colors checked:tw-bg-blue-500 before:tw-absolute before:tw-content-[''] before:tw-h-4 before:tw-w-4 before:tw-left-0.5 before:tw-bottom-0.5 before:tw-bg-white before:tw-rounded-full before:tw-transition-transform checked:before:tw-translate-x-4\"></span>\n          </label>\n          <span class=\"tw-text-xs tw-text-gray-500\">RTL</span>\n        </div>\n      </div>\n    </section>\n\n    <!-- Theme Property Groups (Brand, Text, Background, Font Sizes, Line Heights) -->\n    <section *ngFor=\"let group of themeGroups\" class=\"theme-section\">\n      <h2 class=\"tw-text-md tw-font-semibold tw-mb-2 tw-text-gray-800\">{{ group.label }}</h2>\n      <div class=\"tw-grid tw-grid-cols-2 tw-gap-2 tw-gap-x-4\">\n        <div *ngFor=\"let item of group.items\"\n          class=\"tw-flex tw-items-center tw-gap-2 tw-p-1 tw-rounded-lg tw-bg-gray-50\"\n          [ngClass]=\"{'tw-flex-col tw-items-stretch': (group.label === 'Font Sizes' || group.label === 'Line Heights' || group.label === 'Layout Dimensions')}\">\n          <!-- Font Sizes: label on top, input in middle, unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Font Sizes'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.001\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">rem</span>\n            </div>\n          </ng-container>\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Font Sizes' && group.label !== 'Line Heights' && group.label !== 'Layout Dimensions'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>"],"names":["i2"],"mappings":"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"}

package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-BSsLTUAc.mjs → cloud-ide-layout-floating-entity-selection.component-mTvyE-l4.mjs}

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

package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-BSsLTUAc.mjs.map → cloud-ide-layout-floating-entity-selection.component-mTvyE-l4.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cloud-ide-layout-floating-entity-selection.component-BSsLTUAc.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/components/floating-entity-selection/floating-entity-selection.component.ts"],"sourcesContent":["import { Component, OnInit, inject, signal, computed, ChangeDetectionStrategy, input } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { CideEleButtonComponent } from 'cloud-ide-element';\r\nimport { CideIconComponent } from 'cloud-ide-element';\r\nimport { AppStateService } from '../../services/app-state/app-state.service';\r\nimport { CideEleFloatingContainerService } from 'cloud-ide-element';\r\nimport { CideSharedOrgStructureComponent } from 'cloud-ide-shared';\r\nimport { CoreSystemEntityListResponse } from 'cloud-ide-lms-model';\r\n\r\n@Component({\r\n  selector: 'cide-lyt-floating-entity-selection',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [\r\n    CommonModule,\r\n    CideEleButtonComponent,\r\n    CideIconComponent,\r\n    CideSharedOrgStructureComponent\r\n  ],\r\n  template: `\r\n    <!-- Entity Selection Content using Org Structure Component -->\r\n    <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n      <!-- Header -->\r\n      <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-4 tw-py-3 tw-flex-shrink-0\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600\">account_tree</cide-ele-icon>\r\n            <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Structure</h3>\r\n          </div>\r\n          @if (mode() === 'selection') {\r\n          <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n                      </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Org Structure Component -->\r\n      <div class=\"tw-flex-1 tw-overflow-hidden\">\r\n        <cide-shared-org-structure\r\n          [allowSwitching]=\"allowSwitching()\"\r\n          [showActions]=\"showActions()\"\r\n          [mode]=\"mode()\"\r\n          (entityClick)=\"onEntityClick($event)\"\r\n          (entitySelect)=\"onEntitySelect($event)\"\r\n          (entityView)=\"onEntityView($event)\">\r\n        </cide-shared-org-structure>\r\n      </div>\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    .tw-dashed {\r\n      border-style: dashed;\r\n    }\r\n    .tw-bg-gray-300 {\r\n      background-color: #d1d5db;\r\n    }\r\n    \r\n    /* Level-based styling for entity cards */\r\n    .level-0 {\r\n      border-top-color: #3b82f6 !important; /* Blue */\r\n    }\r\n    .level-1 {\r\n      border-top-color: #f59e0b !important; /* Amber */\r\n    }\r\n    .level-2 {\r\n      border-top-color: #10b981 !important; /* Emerald */\r\n    }\r\n    .level-3 {\r\n      border-top-color: #8b5cf6 !important; /* Violet */\r\n    }\r\n    .level-4 {\r\n      border-top-color: #ef4444 !important; /* Red */\r\n    }\r\n    .level-5 {\r\n      border-top-color: #06b6d4 !important; /* Cyan */\r\n    }\r\n    \r\n    /* Connection line styling */\r\n    .connection-line-compact {\r\n      pointer-events: none;\r\n    }\r\n  `]\r\n})\r\nexport class CideLytFloatingEntitySelectionComponent implements OnInit {\r\n  // Input parameters for configuration\r\n  allowSwitching = input<boolean>(true); // Allow entity switching (default: true)\r\n  showActions = input<boolean>(true); // Show action buttons (default: true)\r\n  mode = input<'selection' | 'view'>('selection'); // Mode: selection or view-only\r\n\r\n  // Service injections\r\n  private appStateService = inject(AppStateService);\r\n  private floatingContainerService = inject(CideEleFloatingContainerService);\r\n\r\n  ngOnInit() {\r\n    // No initialization needed - shared org structure component handles everything\r\n  }\r\n\r\n  /**\r\n   * Handle entity click event from org structure\r\n   */\r\n  onEntityClick(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity clicked:', entity);\r\n    // This is just a click event, no action needed unless specific handling is required\r\n  }\r\n\r\n  /**\r\n   * Handle entity select event from org structure (for switching)\r\n   */\r\n  onEntitySelect(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity selected for switching:', entity);\r\n    this.appStateService.setActiveEntity(entity);\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Handle entity view event from org structure (for viewing)\r\n   */\r\n  onEntityView(entity: any): void {\r\n    console.log('👁️ Entity viewed:', entity);\r\n    // Handle view-only mode - could show entity details or navigate\r\n    // This can be customized based on your needs\r\n  }\r\n\r\n  /**\r\n   * Cancel selection\r\n   */\r\n  onCancel(): void {\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Close the floating container\r\n   */\r\n  private closeContainer(): void {\r\n    this.floatingContainerService.hideAll();\r\n  }\r\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"cloud-ide-layout-floating-entity-selection.component-mTvyE-l4.mjs","sources":["../../../projects/cloud-ide-layout/src/lib/components/floating-entity-selection/floating-entity-selection.component.ts"],"sourcesContent":["import { Component, OnInit, inject, signal, computed, ChangeDetectionStrategy, input } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { CideEleButtonComponent } from 'cloud-ide-element';\r\nimport { CideIconComponent } from 'cloud-ide-element';\r\nimport { AppStateService } from '../../services/app-state/app-state.service';\r\nimport { CideEleFloatingContainerService } from 'cloud-ide-element';\r\nimport { CideSharedOrgStructureComponent } from 'cloud-ide-shared';\r\nimport { CoreSystemEntityListResponse } from 'cloud-ide-lms-model';\r\n\r\n@Component({\r\n  selector: 'cide-lyt-floating-entity-selection',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [\r\n    CommonModule,\r\n    CideEleButtonComponent,\r\n    CideIconComponent,\r\n    CideSharedOrgStructureComponent\r\n  ],\r\n  template: `\r\n    <!-- Entity Selection Content using Org Structure Component -->\r\n    <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n      <!-- Header -->\r\n      <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-4 tw-py-3 tw-flex-shrink-0\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600\">account_tree</cide-ele-icon>\r\n            <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Structure</h3>\r\n          </div>\r\n          @if (mode() === 'selection') {\r\n          <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n                      </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Org Structure Component -->\r\n      <div class=\"tw-flex-1 tw-overflow-hidden\">\r\n        <cide-shared-org-structure\r\n          [allowSwitching]=\"allowSwitching()\"\r\n          [showActions]=\"showActions()\"\r\n          [mode]=\"mode()\"\r\n          (entityClick)=\"onEntityClick($event)\"\r\n          (entitySelect)=\"onEntitySelect($event)\"\r\n          (entityView)=\"onEntityView($event)\">\r\n        </cide-shared-org-structure>\r\n      </div>\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    .tw-dashed {\r\n      border-style: dashed;\r\n    }\r\n    .tw-bg-gray-300 {\r\n      background-color: #d1d5db;\r\n    }\r\n    \r\n    /* Level-based styling for entity cards */\r\n    .level-0 {\r\n      border-top-color: #3b82f6 !important; /* Blue */\r\n    }\r\n    .level-1 {\r\n      border-top-color: #f59e0b !important; /* Amber */\r\n    }\r\n    .level-2 {\r\n      border-top-color: #10b981 !important; /* Emerald */\r\n    }\r\n    .level-3 {\r\n      border-top-color: #8b5cf6 !important; /* Violet */\r\n    }\r\n    .level-4 {\r\n      border-top-color: #ef4444 !important; /* Red */\r\n    }\r\n    .level-5 {\r\n      border-top-color: #06b6d4 !important; /* Cyan */\r\n    }\r\n    \r\n    /* Connection line styling */\r\n    .connection-line-compact {\r\n      pointer-events: none;\r\n    }\r\n  `]\r\n})\r\nexport class CideLytFloatingEntitySelectionComponent implements OnInit {\r\n  // Input parameters for configuration\r\n  allowSwitching = input<boolean>(true); // Allow entity switching (default: true)\r\n  showActions = input<boolean>(true); // Show action buttons (default: true)\r\n  mode = input<'selection' | 'view'>('selection'); // Mode: selection or view-only\r\n\r\n  // Service injections\r\n  private appStateService = inject(AppStateService);\r\n  private floatingContainerService = inject(CideEleFloatingContainerService);\r\n\r\n  ngOnInit() {\r\n    // No initialization needed - shared org structure component handles everything\r\n  }\r\n\r\n  /**\r\n   * Handle entity click event from org structure\r\n   */\r\n  onEntityClick(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity clicked:', entity);\r\n    // This is just a click event, no action needed unless specific handling is required\r\n  }\r\n\r\n  /**\r\n   * Handle entity select event from org structure (for switching)\r\n   */\r\n  onEntitySelect(entity: CoreSystemEntityListResponse): void {\r\n    console.log('🏢 Entity selected for switching:', entity);\r\n    this.appStateService.setActiveEntity(entity);\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Handle entity view event from org structure (for viewing)\r\n   */\r\n  onEntityView(entity: any): void {\r\n    console.log('👁️ Entity viewed:', entity);\r\n    // Handle view-only mode - could show entity details or navigate\r\n    // This can be customized based on your needs\r\n  }\r\n\r\n  /**\r\n   * Cancel selection\r\n   */\r\n  onCancel(): void {\r\n    this.closeContainer();\r\n  }\r\n\r\n  /**\r\n   * Close the floating container\r\n   */\r\n  private closeContainer(): void {\r\n    this.floatingContainerService.hideAll();\r\n  }\r\n}"],"names":[],"mappings":";;;;;;;MAmFa,uCAAuC,CAAA;;AAElD,IAAA,cAAc,GAAG,KAAK,CAAU,IAAI,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC;AACtC,IAAA,WAAW,GAAG,KAAK,CAAU,IAAI,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC;AACnC,IAAA,IAAI,GAAG,KAAK,CAAuB,WAAW,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC;;AAGxC,IAAA,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;AACzC,IAAA,wBAAwB,GAAG,MAAM,CAAC,+BAA+B,CAAC;IAE1E,QAAQ,GAAA;;;AAIR;;AAEG;AACH,IAAA,aAAa,CAAC,MAAoC,EAAA;AAChD,QAAA,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,MAAM,CAAC;;;AAI3C;;AAEG;AACH,IAAA,cAAc,CAAC,MAAoC,EAAA;AACjD,QAAA,OAAO,CAAC,GAAG,CAAC,mCAAmC,EAAE,MAAM,CAAC;AACxD,QAAA,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,MAAM,CAAC;QAC5C,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;AACH,IAAA,YAAY,CAAC,MAAW,EAAA;AACtB,QAAA,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,MAAM,CAAC;;;;AAK3C;;AAEG;IACH,QAAQ,GAAA;QACN,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,wBAAwB,CAAC,OAAO,EAAE;;uGAnD9B,uCAAuC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uCAAuC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAjExC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,iYAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAnCC,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,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,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,iBAAiB,+FACjB,+BAA+B,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,cAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAmEtB,uCAAuC,EAAA,UAAA,EAAA,CAAA;kBA1EnD,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oCAAoC,EAAA,eAAA,EAC7B,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,YAAY;wBACZ,sBAAsB;wBACtB,iBAAiB;wBACjB;qBACD,EAAA,QAAA,EACS,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,iYAAA,CAAA,EAAA;;;;;"}

package/fesm2022/{cloud-ide-layout-home-wrapper.component-DdCvSxtT.mjs → cloud-ide-layout-home-wrapper.component-XOQWh4_1.mjs}

@@ -1,11 +1,12 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { C as CideLytSharedWrapperComponent, a as CideLytSidebarService, A as AppStateHelperService, b as CideLytRequestService } from './cloud-ide-layout-cloud-ide-layout-BdeMOoAp.mjs';
+import { C as CideLytSharedWrapperComponent, a as CideLytSidebarService, A as AppStateHelperService, b as CideLytRequestService } from './cloud-ide-layout-cloud-ide-layout-DUv_E9sG.mjs';
 import * as i0 from '@angular/core';
 import { input, inject, Renderer2, ChangeDetectorRef, ViewChild, Component } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CideIconComponent, TooltipDirective } from 'cloud-ide-element';
 import { Router } from '@angular/router';
+import { D as DashboardCardsService } from './cloud-ide-layout-dashboard-cards.service-BbJ4rb2S.mjs';
 
 class CideLytHomeWrapperComponent extends CideLytSharedWrapperComponent {
     requestService;
@@ -18,6 +19,7 @@ class CideLytHomeWrapperComponent extends CideLytSharedWrapperComponent {
     cdr = inject(ChangeDetectorRef);
     appState = inject(AppStateHelperService);
     router = inject(Router);
+    dashboardCardsService = inject(DashboardCardsService);
     moduleStylePresets = [
         { accentColor: "#8B5CF6" }, // purple
         { accentColor: "#EC4899" }, // pink
@@ -62,6 +64,7 @@ class CideLytHomeWrapperComponent extends CideLytSharedWrapperComponent {
     ngOnInit() {
         super.ngOnInit?.();
         this.loadModules();
+        this.loadDashboardCards();
     }
     openModule(module) {
         console.log(module, "module");
@@ -96,16 +99,64 @@ class CideLytHomeWrapperComponent extends CideLytSharedWrapperComponent {
             }
         });
     }
-    cardsData = [
-        { id: "card1", title: "Key Deadlines", type: "deadlines", colSpan: "md:tw-col-span-1 xl:tw-col-span-1", accentColor: "purple", urgentText: "Urgent", items: [{ text: "Midterm Paper: PHIL201", subtext: "Due: Tomorrow, 11:59 PM" }, { text: "Lab Report: CHEM110", subtext: "Due: In 3 days" }], link: { text: "View All Deadlines →", href: "#" } },
-        { id: "card2", title: "Recent Grades", type: "grades", colSpan: "md:tw-col-span-1 xl:tw-col-span-1", accentColor: "green", items: [{ subject: "PHYS101 Quiz 3", grade: "A-", color: "tw-text-green-600" }, { subject: "ENGL220 Essay", grade: "B+", color: "tw-text-yellow-600" }], link: { text: "Full Gradebook →", href: "#" } },
-        { id: "card7", title: "Study Streak: 12 Days!", type: "studyStreak", colSpan: "md:tw-col-span-2 xl:tw-col-span-1", accentColor: "yellow", progress: "80%", description: "Keep the momentum going!" },
-        { id: "card6", title: "Campus Events", type: "events", colSpan: "md:tw-col-span-1 xl:tw-col-span-2", accentColor: "sky", items: [{ date: { month: "JUL", day: "10" }, title: "Workshop: AI Ethics", details: "Tech Hub, 3:00 PM - 5:00 PM", themeColor: "tw-bg-sky-500" }, { date: { month: "JUL", day: "12" }, title: "Student Union Mixer", details: "Quad, 7:00 PM onwards", themeColor: "tw-bg-red-500" }], link: { text: "Full Events Calendar →", href: "#" } },
-        { id: "card8", title: "Quick Stats", type: "quickStats", colSpan: "md:tw-col-span-1 xl:tw-col-span-1", accentColor: "indigo", stats: [{ label: "Course Completion", value: "75%", gradient: "tw-from-green-400 tw-to-blue-500" }, { label: "Pending Assignments", value: "3", valueClass: "tw-text-2xl tw-font-bold tw-text-yellow-500" }] },
-        { id: "card4", title: "Campus News & Updates", type: "news", colSpan: "md:tw-col-span-2 xl:tw-col-span-3", accentColor: "blue", items: [{ title: "Annual Career Fair: Next Wednesday!", details: "Main Hall, 10 AM - 4 PM" }, { title: 'Guest Lecture: "AI in Modern Society"', details: "Speaker: Dr. Eva Rostova. July 18th" }], link: { text: "All News →", href: "#" } },
-        { id: "card9", title: "Discussion Forums", type: "discussions", colSpan: "md:tw-col-span-1 xl:tw-col-span-2", accentColor: "emerald", insightTag: "3 Hot Topics", items: [{ topic: "Debate: Future of Renewable Energy", forum: "ENV101 Forum", lastPost: "5 mins ago" }, { topic: "Help with CS210 Algorithm", forum: "CS Study Group", lastPost: "23 mins ago" }], link: { text: "Go to Forums →", href: "#" } },
-        { id: "card5", title: "My Courses", type: "courses", colSpan: "md:tw-col-span-1 xl:tw-col-span-1", accentColor: "pink", items: [{ name: "ECON101: Microeconomics", professor: "Prof. Sharma", colorTheme: "pink" }, { name: "CS210: Data Structures", professor: "Dr. Carter", colorTheme: "indigo" }], link: { text: "Course Catalog →", href: "#" } }
-    ];
+    cardsData = [];
+    loadDashboardCards() {
+        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.cdr.detectChanges();
+                }
+            },
+            error: (error) => {
+                console.error('Error loading dashboard cards:', error);
+                // Fallback to default cards if API fails
+                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;
@@ -199,4 +250,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }] } });
 
 export { CideLytHomeWrapperComponent };
-//# sourceMappingURL=cloud-ide-layout-home-wrapper.component-DdCvSxtT.mjs.map
+//# sourceMappingURL=cloud-ide-layout-home-wrapper.component-XOQWh4_1.mjs.map