cloud-ide-layout 1.0.167 → 1.0.173

package/fesm2022/{cloud-ide-layout-dashboard-manager.component-D5xhRxvK.mjs → cloud-ide-layout-dashboard-manager.component-BQCW_9Ev.mjs}

@@ -3,7 +3,7 @@ import { inject, signal, computed, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { C as CideLytSharedWrapperComponent } from './cloud-ide-layout-cloud-ide-layout-CWu1ldko.mjs';
+import { C as CideLytSharedWrapperComponent } from './cloud-ide-layout-cloud-ide-layout-xHO4_ZWL.mjs';
 import { D as DashboardCardsService } from './cloud-ide-layout-dashboard-cards.service-BGaKcq7H.mjs';
 import { NotificationService, ConfirmationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent } from 'cloud-ide-element';
 
@@ -650,4 +650,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }] });
 
 export { DashboardManagerComponent };
-//# sourceMappingURL=cloud-ide-layout-dashboard-manager.component-D5xhRxvK.mjs.map
+//# sourceMappingURL=cloud-ide-layout-dashboard-manager.component-BQCW_9Ev.mjs.map

package/fesm2022/{cloud-ide-layout-dashboard-manager.component-D5xhRxvK.mjs.map → cloud-ide-layout-dashboard-manager.component-BQCW_9Ev.mjs.map}

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

package/fesm2022/cloud-ide-layout-drawer-theme.component-Df-z-sDP.mjs

@@ -0,0 +1,346 @@
+import { NgFor, NgIf, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, Inject, Component } from '@angular/core';
+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, c as CideLytThemeService } from './cloud-ide-layout-cloud-ide-layout-xHO4_ZWL.mjs';
+import { cloneDeep, isEqual } from 'lodash-es';
+
+class CideLytDrawerThemeComponent {
+    themeService;
+    platformId;
+    appState = inject(AppStateHelperService);
+    // Preset themes
+    presetThemes = [];
+    selectedTheme = '';
+    isLoadingThemes = false;
+    themeLoadError = '';
+    mergedTheme = {};
+    isRTL = false;
+    originalThemeGroupValues = [];
+    originalApiThemeValues = {}; // Store original API values
+    themeGroups = [
+        {
+            label: 'Brand Colors',
+            items: [
+                { label: 'Primary', varName: '--cide-theme-color-brand-primary', value: '#4f46e5', type: 'text' },
+                { label: 'Accent', varName: '--cide-theme-color-brand-accent', value: '#4338ca', type: 'text' },
+                { label: 'Separator', varName: '--cide-theme-color-brand-separator', value: '#e5e7eb', type: 'text' }
+            ]
+        },
+        {
+            label: 'Text Colors',
+            items: [
+                { label: 'Body Text', varName: '--cide-theme-color-text-body', value: '#374151', type: 'text' },
+                { label: 'Heading Text', varName: '--cide-theme-color-text-heading', value: '#111827', type: 'text' },
+                { label: 'Link Text', varName: '--cide-theme-color-text-link', value: '#3b82f6', type: 'text' },
+                { label: 'Muted Text', varName: '--cide-theme-color-text-muted', value: '#6b7280', type: 'text' }
+            ]
+        },
+        {
+            label: 'Background Colors',
+            items: [
+                { label: 'Body Background', varName: '--cide-theme-color-background-body', value: '#ffffff', type: 'text' }
+            ]
+        },
+        {
+            label: 'Layout Dimensions',
+            items: [
+                { label: 'Stack Wrapper Width', varName: '--cide-lyt-stack-wrapper-width', value: '60', type: 'number', min: 20, max: 120 }
+            ]
+        },
+        {
+            label: 'Responsive Scale',
+            items: [
+                { label: 'Font Scale', varName: '--cide-lyt-font-responsive-scale-base', value: '1.0', type: 'number', min: 0.5, max: 2.0, step: 0.01 }
+            ]
+        },
+        {
+            label: 'Line Heights',
+            items: [
+                { label: 'Body Line Height', varName: '--cide-theme-line-height-body', value: '1.6', type: 'number', min: 1, max: 3 },
+                { label: 'Heading Line Height', varName: '--cide-theme-line-height-heading', value: '1.2', type: 'number', min: 1, max: 3 }
+            ]
+        }
+    ];
+    constructor(themeService, platformId) {
+        this.themeService = themeService;
+        this.platformId = platformId;
+    }
+    ngOnInit() {
+        // Modern Angular v20 pattern: Use Signals directly
+        this.selectedTheme = this.themeService.selectedTheme();
+        // fetch the system themes list
+        this.isLoadingThemes = true;
+        this.themeService.fetchSystemThemesList().subscribe({
+            next: (res) => {
+                const themes = res?.data?.core_system_themes || [];
+                this.presetThemes = themes.map((theme) => ({
+                    value: theme._id || '',
+                    label: theme.syth_theme_name || theme.syth_theme_id || '',
+                    theme
+                }));
+                this.isLoadingThemes = false;
+                // If user has no theme set, select and apply the default theme
+                if (!this.selectedTheme) {
+                    const defaultTheme = this.presetThemes.find(t => t.theme.syth_is_default);
+                    if (defaultTheme) {
+                        this.selectedTheme = defaultTheme.value;
+                        // Apply the default theme as CSS variables
+                        if (defaultTheme.theme.syth_properties) {
+                            Object.entries(defaultTheme.theme.syth_properties).forEach(([varName, value]) => {
+                                this.updateVar(varName, value);
+                            });
+                        }
+                    }
+                }
+            },
+            error: () => {
+                this.themeLoadError = 'Failed to load themes';
+                this.isLoadingThemes = false;
+            }
+        });
+        this.loadAndApplyUserTheme();
+    }
+    loadAndApplyUserTheme() {
+        this.themeService.loadTheme().subscribe({
+            next: (res) => {
+                const base = res?.data?.core_system_themes;
+                const org = res?.data?.core_system_organization_themes;
+                const user = res?.data?.core_system_theme_user_preferences;
+                // Start with base theme properties
+                let merged = { ...(base?.syth_properties || {}) };
+                // Override with org overrides
+                if (org?.syoth_overrides) {
+                    merged = { ...merged, ...org.syoth_overrides };
+                }
+                // Override with user overrides
+                if (user?.syupth_overrides) {
+                    merged = { ...merged, ...user.syupth_overrides };
+                }
+                this.mergedTheme = merged;
+                // Store original API values for reset functionality
+                this.originalApiThemeValues = { ...merged };
+                // Apply merged theme as CSS variables
+                Object.entries(this.mergedTheme).forEach(([varName, value]) => {
+                    this.updateVar(varName, value);
+                    // If API returns font-size without -base, create the -base version for backward compatibility
+                    if (varName.includes('font-size') && !varName.includes('-base') && !varName.includes('responsive-scale')) {
+                        const baseVarName = varName + '-base';
+                        // Only create if it doesn't already exist
+                        if (!this.mergedTheme[baseVarName] && !this.mergedTheme[baseVarName.replace(/-/g, '_')]) {
+                            this.updateVar(baseVarName, value);
+                        }
+                    }
+                });
+                for (const group of this.themeGroups) {
+                    for (const item of group.items) {
+                        const key = item.varName.replace(/-/g, '_');
+                        // Check both the exact varName and the key format
+                        // Also check for non-base version if looking for base (for backward compatibility)
+                        let foundValue = merged[item.varName] || merged[key];
+                        // For base font sizes, also check non-base version from API (backward compatibility)
+                        if (!foundValue && item.varName.includes('-base') && item.varName.includes('font-size')) {
+                            const nonBaseVarName = item.varName.replace('-base', '');
+                            const nonBaseKey = nonBaseVarName.replace(/-/g, '_');
+                            foundValue = merged[nonBaseVarName] || merged[nonBaseKey];
+                        }
+                        item.value = foundValue || item.value;
+                        // Parse numeric values for font sizes, line heights, and scale
+                        if (key.includes('font_size') || key.includes('line_height') || key.includes('responsive_scale')) {
+                            // Remove 'rem' if present to get numeric value
+                            const numericValue = typeof item.value === 'string' ? parseFloat(item.value.replace('rem', '')) : parseFloat(item.value);
+                            item.value = numericValue;
+                        }
+                    }
+                }
+                // Store a deep copy of the current values for reset
+                this.originalThemeGroupValues = cloneDeep(this.themeGroups);
+            },
+            error: () => {
+                // handle error if needed
+            }
+        });
+    }
+    // Update CSS variable in real time
+    updateVar(varName, value) {
+        // You can use either the utility function directly or the service method
+        setCSSVariable(varName, value, this.platformId);
+        // Alternative: this.themeService.updateCSSVariable(varName, value);
+    }
+    onThemeModelChange(value) {
+        this.selectedTheme = value;
+        const selected = this.presetThemes.find(t => t.value === this.selectedTheme);
+        if (selected) {
+            this.onThemeChange({ value: this.selectedTheme, label: selected.label });
+        }
+    }
+    onThemeChange(event) {
+        this.selectedTheme = event.value;
+        const selected = this.presetThemes.find(t => t.value === this.selectedTheme);
+        if (selected && selected.theme && selected.theme.syth_properties) {
+            // here we will check the theme selected by organization is same if yes then overide also for user preferences
+            if (this.themeService.selectedTheme() === selected.theme._id) {
+                this.loadAndApplyUserTheme();
+            }
+            else {
+                // Store original API values for the selected theme
+                this.originalApiThemeValues = cloneDeep(selected.theme.syth_properties);
+                // Update all group values from the selected theme
+                for (const group of this.themeGroups) {
+                    for (const item of group.items) {
+                        const key = item.varName.replace(/-/g, '_');
+                        item.value = selected.theme.syth_properties[item.varName] ||
+                            selected.theme.syth_properties[key] ||
+                            item.value;
+                        this.updateVar(item.varName, item.value);
+                        if (key.includes('font_size') || key.includes('line_height') || key.includes('responsive_scale')) {
+                            // Remove 'rem' if present to get numeric value
+                            const numericValue = typeof item.value === 'string' ? parseFloat(item.value.replace('rem', '')) : parseFloat(item.value);
+                            item.value = numericValue;
+                        }
+                    }
+                }
+                // Store a deep copy of the current values for reset
+                this.originalThemeGroupValues = cloneDeep(this.themeGroups);
+            }
+        }
+    }
+    onReset() {
+        // Restore all values from the original API values
+        for (const group of this.themeGroups) {
+            for (const item of group.items) {
+                const key = item.varName.replace(/-/g, '_');
+                // Get the original API value
+                const originalValue = this.originalApiThemeValues[item.varName] ||
+                    this.originalApiThemeValues[key] ||
+                    item.value;
+                // Update the item value
+                item.value = originalValue;
+                // Apply the CSS variable
+                this.updateVar(item.varName, item.value);
+                // Note: Font sizes now directly use -base variables, so no need to create -base from non-base
+                if (key.includes('font_size') || key.includes('line_height') || key.includes('responsive_scale')) {
+                    item.value = parseFloat(item.value);
+                }
+            }
+        }
+        // Update the originalThemeGroupValues to reflect the reset state
+        this.originalThemeGroupValues = cloneDeep(this.themeGroups);
+    }
+    onSave() {
+        // Collect all current values
+        const themeVars = {};
+        for (const group of this.themeGroups) {
+            for (const item of group.items) {
+                themeVars[item.varName?.replaceAll('-', '_')] = item.value;
+            }
+        }
+        const systemThemePreferences = {
+            syupth_overrides: {
+                ...themeVars
+            },
+            syupth_system_theme_id_syth: this.selectedTheme, // LATER: need to upadate LATER
+            syupth_user_id_user: this.appState.currentUser()?._id || '', // LATER: need to get user id from user
+            syupth_entity_id_syen: this.appState.getActiveEntityId() || '', // LATER: need to get entity id from user
+            syth_theme_id: "" // need to upadate LATER
+        };
+        // TODO: Send themeVars to backend or emit event by designConfigRoutesUrl?.systemThemeUserPreferences
+        this.themeService.saveSystemThemeUserPreferences(systemThemePreferences).subscribe({
+            next: (res) => {
+                console.log('Theme saved:', res);
+                // Modern Angular v20 pattern: Update Signal through service method
+                // Note: The theme service should provide a method to update the selected theme
+                // For now, we'll just log the change since the service doesn't expose a setter
+                console.log('Theme selected:', this.selectedTheme);
+            },
+            error: (error) => {
+                console.error('Error saving theme:', error);
+            }
+        });
+    }
+    hasUnsavedChanges() {
+        // chec selected theme is different
+        if (this.themeService.selectedTheme() !== this.selectedTheme) {
+            return true;
+        }
+        // check the theme groups are different
+        return !isEqual(this.themeGroups, this.originalThemeGroupValues);
+    }
+    /**
+     * Check if current values differ from the original API values
+     * This is useful for determining if reset should be enabled
+     */
+    hasChangesFromOriginal() {
+        for (const group of this.themeGroups) {
+            for (const item of group.items) {
+                const key = item.varName.replace(/-/g, '_');
+                const originalValue = this.originalApiThemeValues[item.varName] ||
+                    this.originalApiThemeValues[key];
+                if (originalValue !== undefined && item.value !== originalValue) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    onColorChange(event, color) {
+        const input = event.target;
+        color.value = input.value;
+        this.updateVar(color.varName, color.value);
+    }
+    onTypographyChange(event, setting) {
+        const input = event.target;
+        setting.value = input.value;
+        // Handle different variable types
+        if (setting.varName.includes('font-responsive-scale') || setting.varName.includes('responsive-scale')) {
+            // Scale variables are unitless, keep as-is
+            this.updateVar(setting.varName, setting.value);
+        }
+        else if (setting.varName.includes('font-size')) {
+            // Font size base variables get 'rem' unit
+            const value = setting.type === 'number' ? setting.value + 'rem' : setting.value;
+            this.updateVar(setting.varName, value);
+        }
+        else if (setting.varName.includes('line-height')) {
+            // Line heights are unitless
+            this.updateVar(setting.varName, setting.value);
+        }
+        else {
+            // Default: add 'rem' for number types
+            const value = setting.type === 'number' ? setting.value + 'rem' : setting.value;
+            this.updateVar(setting.varName, value);
+        }
+    }
+    onLayoutChange(event, setting) {
+        const input = event.target;
+        setting.value = input.value;
+        // For layout dimensions, store base value and append 'px' unit
+        const baseVarName = setting.varName + '-base';
+        this.updateVar(baseVarName, setting.value);
+        this.updateVar(setting.varName, setting.value + 'px');
+    }
+    onScaleChange(event, setting) {
+        const input = event.target;
+        setting.value = input.value;
+        // For responsive scale, set as unitless number
+        this.updateVar(setting.varName, setting.value);
+    }
+    onDirectionToggle(event) {
+        this.isRTL = event.target.checked;
+        document.documentElement.dir = this.isRTL ? 'rtl' : 'ltr';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytDrawerThemeComponent, deps: [{ token: CideLytThemeService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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 === 'Line Heights' || group.label === 'Layout Dimensions' || group.label === 'Responsive Scale')}\">\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Responsive Scale: label on top, input in middle, unitless at bottom -->\n          <ng-container *ngIf=\"group.label === 'Responsive Scale'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.01\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onScaleChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">scale</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Line Heights' && group.label !== 'Layout Dimensions' && group.label !== 'Responsive Scale'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>", 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.3.15", ngImport: i0, type: CideLytDrawerThemeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-drawer-theme', standalone: true, imports: [FormsModule, NgFor, NgIf, NgClass, CideSelectComponent, CideEleButtonComponent], 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 === 'Line Heights' || group.label === 'Layout Dimensions' || group.label === 'Responsive Scale')}\">\n          <!-- Line Heights: label on top, input and unit on same line -->\n          <ng-container *ngIf=\"group.label === 'Line Heights'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">unitless</span>\n            </div>\n          </ng-container>\n          <!-- Layout Dimensions: label on top, input in middle, px unit at bottom -->\n          <ng-container *ngIf=\"group.label === 'Layout Dimensions'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"1\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onLayoutChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">px</span>\n            </div>\n          </ng-container>\n          <!-- Responsive Scale: label on top, input in middle, unitless at bottom -->\n          <ng-container *ngIf=\"group.label === 'Responsive Scale'\">\n            <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700 tw-text-left\">{{ item.label\n              }}</label>\n            <div class=\"tw-flex tw-items-start\">\n              <input [id]=\"item.varName\" type=\"number\" step=\"0.01\" [min]=\"item.min ?? null\" [max]=\"item.max ?? null\"\n                [(ngModel)]=\"item.value\" (input)=\"onScaleChange($event, item)\"\n                class=\"tw-w-18 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\">scale</span>\n            </div>\n          </ng-container>\n          <!-- Other groups: keep previous layout -->\n          <ng-container *ngIf=\"group.label !== 'Line Heights' && group.label !== 'Layout Dimensions' && group.label !== 'Responsive Scale'\">\n            <!-- Color input for color variables -->\n            <ng-container *ngIf=\"item.varName.includes('color')\">\n              <input [id]=\"item.varName\" [attr.data-variable]=\"item.varName\" type=\"color\" [(ngModel)]=\"item.value\"\n                (input)=\"onColorChange($event, item)\"\n                class=\"tw-appearance-none tw-border-2 tw-border-gray-200 tw-rounded tw-w-8 tw-h-8 tw-p-0 tw-bg-none tw-shadow-none tw-cursor-pointer tw-transition-colors focus:tw-border-blue-500 color-input\">\n            </ng-container>\n            <!-- Number input for line heights -->\n            <ng-container\n              *ngIf=\"!item.varName.includes('color') && item.type === 'number' && group.label !== 'Font Sizes'\">\n              <input [id]=\"item.varName\" type=\"number\" [step]=\"item.varName.includes('line-height') ? 0.1 : 0.001\"\n                [min]=\"item.min ?? null\" [max]=\"item.max ?? null\" [(ngModel)]=\"item.value\"\n                (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-16 tw-text-right tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n              <span class=\"tw-text-xs tw-text-gray-400\" *ngIf=\"!item.varName.includes('line-height')\">rem</span>\n            </ng-container>\n            <!-- Text input fallback (if needed) -->\n            <ng-container *ngIf=\"!item.varName.includes('color') && item.type !== 'number'\">\n              <input [id]=\"item.varName\" type=\"text\" [(ngModel)]=\"item.value\" (input)=\"onTypographyChange($event, item)\"\n                class=\"tw-w-24 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-px-2 tw-py-1 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-transparent theme-input\">\n            </ng-container>\n            <div class=\"tw-flex tw-flex-col tw-gap-0.5\">\n              <label [for]=\"item.varName\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">{{ item.label }}</label>\n              <span class=\"tw-text-xs tw-text-gray-500 tw-font-mono\">{{ item.value }}</span>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </section>\n  </div>\n\n  <!-- STICKY ACTION BUTTONS SECTION -->\n  <div class=\"tw-bg-white tw-sticky tw-bottom-0 tw-border-t tw-border-gray-200 tw-z-10 tw-flex-shrink-0 tw-p-3 tw-shadow-lg sticky-action-buttons\">\n    <div class=\"tw-flex tw-gap-2 tw-justify-end\">\n      <button cideEleButton \n        variant=\"outline\" \n        size=\"sm\" \n        (btnClick)=\"onReset()\" \n        [disabled]=\"!hasChangesFromOriginal()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Reset to Original\n      </button>\n      <button cideEleButton \n        variant=\"primary\" \n        size=\"sm\" \n        (btnClick)=\"onSave()\" \n        [disabled]=\"!hasUnsavedChanges()\"\n        class=\"tw-transition-all tw-duration-200 hover:tw-scale-105 action-button\">\n        Save Changes\n      </button>\n    </div>\n  </div>\n</div>", 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"] }]
+        }], ctorParameters: () => [{ type: CideLytThemeService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+export { CideLytDrawerThemeComponent };
+//# sourceMappingURL=cloud-ide-layout-drawer-theme.component-Df-z-sDP.mjs.map