cloud-ide-layout 1.0.297 → 1.0.302

package/fesm2022/cloud-ide-layout-dashboard-manager.component-DdEEGw7d.mjs

@@ -0,0 +1,706 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, signal, computed, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { C as CideLytSharedWrapperComponent } from './cloud-ide-layout-cloud-ide-layout-B3aNlPnd.mjs';
+import { D as DashboardCardsService } from './cloud-ide-layout-dashboard-cards.service-BGaKcq7H.mjs';
+import { NotificationService, CideEleFloatingContainerService, CideEleButtonComponent, CideInputComponent, CideSelectComponent, ConfirmationService, CideEleDataGridComponent } from 'cloud-ide-element';
+
+class DashboardCardFormComponent {
+    // Inputs from floating container config
+    containerId = input('', ...(ngDevMode ? [{ debugName: "containerId" }] : []));
+    editCardData = input(null, ...(ngDevMode ? [{ debugName: "editCardData" }] : []));
+    // Outputs
+    saved = output();
+    cancelled = output();
+    dashboardCardsService = inject(DashboardCardsService);
+    notificationService = inject(NotificationService);
+    floatingContainerService = inject(CideEleFloatingContainerService);
+    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : []));
+    apiEndpoints = signal([], ...(ngDevMode ? [{ debugName: "apiEndpoints" }] : []));
+    cardTypes = [
+        { value: 'stats', label: 'Stats' },
+        { value: 'chart', label: 'Chart' },
+        { value: 'table', label: 'Table' },
+        { value: 'module-card', label: 'Module Card' },
+        { value: 'activity-feed', label: 'Activity Feed' },
+        { value: 'events', label: 'Events' },
+        { value: 'custom', label: 'Custom' }
+    ];
+    cardForm = {
+        title: '',
+        description: '',
+        type: 'custom',
+        apiEndpoint: '',
+        icon: '',
+        color: '#3B82F6',
+        position: {
+            row: 1,
+            col: 1,
+            colspan: 1,
+            rowspan: 1
+        }
+    };
+    apiEndpointsOptions = computed(() => {
+        return this.apiEndpoints().map(api => ({
+            value: api.endpoint,
+            label: `${api.method} ${api.endpoint} - ${api.description}`
+        }));
+    }, ...(ngDevMode ? [{ debugName: "apiEndpointsOptions" }] : []));
+    ngOnInit() {
+        this.loadApiEndpoints();
+        // Initialize form if editing
+        const card = this.editCardData();
+        if (card) {
+            this.cardForm = {
+                title: card.cdc_title || '',
+                description: card.cdc_description || '',
+                type: card.cdc_type || 'custom',
+                apiEndpoint: card.cdc_api_endpoint || '',
+                icon: card.cdc_icon || '',
+                color: card.cdc_color || '#3B82F6',
+                position: card.cdc_position && typeof card.cdc_position === 'object' &&
+                    'row' in card.cdc_position && 'col' in card.cdc_position &&
+                    'colspan' in card.cdc_position && 'rowspan' in card.cdc_position
+                    ? {
+                        row: card.cdc_position.row || 1,
+                        col: card.cdc_position.col || 1,
+                        colspan: card.cdc_position.colspan || 1,
+                        rowspan: card.cdc_position.rowspan || 1
+                    }
+                    : {
+                        row: 1,
+                        col: 1,
+                        colspan: 1,
+                        rowspan: 1
+                    }
+            };
+        }
+    }
+    loadApiEndpoints() {
+        this.dashboardCardsService.getApiList().subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.apiEndpoints.set(response.data);
+                }
+            },
+            error: (error) => {
+                console.error('Error loading API endpoints:', error);
+            }
+        });
+    }
+    saveCard() {
+        this.saving.set(true);
+        const card = this.editCardData();
+        const payload = {
+            core_dashboard_cards: {
+                _id: card?._id,
+                cdc_title: this.cardForm.title,
+                cdc_description: this.cardForm.description,
+                cdc_type: this.cardForm.type,
+                cdc_api_endpoint: this.cardForm.apiEndpoint,
+                cdc_icon: this.cardForm.icon,
+                cdc_color: this.cardForm.color,
+                cdc_position: this.cardForm.position,
+                cdc_visible: true,
+                cdc_draggable: true
+            }
+        };
+        this.dashboardCardsService.saveUpdateDashboardCard(payload).subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.notificationService.success(card ? 'Card updated successfully' : 'Card created successfully');
+                    this.saved.emit();
+                    this.closeForm();
+                }
+                else {
+                    this.notificationService.error(response.message || 'Error saving card');
+                }
+                this.saving.set(false);
+            },
+            error: (error) => {
+                console.error('Error saving card:', error);
+                this.notificationService.error('Error saving card');
+                this.saving.set(false);
+            }
+        });
+    }
+    closeForm() {
+        const id = this.containerId();
+        if (id) {
+            this.floatingContainerService.hide(id);
+        }
+        this.cancelled.emit();
+    }
+    onTypeChange(value) {
+        this.cardForm.type = value;
+    }
+    onApiEndpointChange(value) {
+        this.cardForm.apiEndpoint = String(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DashboardCardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: DashboardCardFormComponent, isStandalone: true, selector: "cide-lyt-dashboard-card-form", inputs: { containerId: { classPropertyName: "containerId", publicName: "containerId", isSignal: true, isRequired: false, transformFunction: null }, editCardData: { classPropertyName: "editCardData", publicName: "editCardData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: `
+    <div class="tw-p-4 tw-space-y-4">
+      <form (ngSubmit)="saveCard()" class="tw-space-y-4">
+        <div class="tw-grid tw-grid-cols-2 tw-gap-4">
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Title</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.title"
+              [name]="'title'"
+              [required]="true"
+              [placeholder]="'Enter card title'">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Type</label>
+            <cide-ele-select
+              [ngModel]="cardForm.type || 'custom'"
+              (ngModelChange)="onTypeChange($event)"
+              [options]="cardTypes"
+              [required]="true">
+            </cide-ele-select>
+          </div>
+        </div>
+
+        <div>
+          <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Description</label>
+          <cide-ele-input
+            [(ngModel)]="cardForm.description"
+            [name]="'description'"
+            [type]="'text'"
+            [placeholder]="'Enter card description'">
+          </cide-ele-input>
+        </div>
+
+        <div>
+          <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">API Endpoint</label>
+          <cide-ele-select
+            [ngModel]="cardForm.apiEndpoint"
+            (ngModelChange)="onApiEndpointChange($event)"
+            [options]="apiEndpointsOptions()"
+            [placeholder]="'Select API endpoint'">
+          </cide-ele-select>
+        </div>
+
+        <div class="tw-grid tw-grid-cols-2 tw-gap-4">
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Icon</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.icon"
+              [name]="'icon'"
+              [placeholder]="'e.g., dashboard, analytics'">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Color</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.color"
+              [name]="'color'"
+              [type]="'text'"
+              [placeholder]="'#3B82F6'">
+            </cide-ele-input>
+          </div>
+        </div>
+
+        <div class="tw-grid tw-grid-cols-4 tw-gap-4">
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Row</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.row"
+              [name]="'row'"
+              [type]="'number'"
+              [min]="1">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Col</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.col"
+              [name]="'col'"
+              [type]="'number'"
+              [min]="1">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Col Span</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.colspan"
+              [name]="'colspan'"
+              [type]="'number'"
+              [min]="1"
+              [max]="12">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Row Span</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.rowspan"
+              [name]="'rowspan'"
+              [type]="'number'"
+              [min]="1">
+            </cide-ele-input>
+          </div>
+        </div>
+
+        <div class="tw-flex tw-gap-2 tw-pt-4 tw-justify-end">
+          <cide-ele-button
+            [label]="'Cancel'"
+            variant="secondary"
+            (click)="closeForm()">
+          </cide-ele-button>
+          <cide-ele-button
+            [label]="'Save'"
+            variant="primary"
+            [type]="'submit'"
+            [loading]="saving()">
+          </cide-ele-button>
+        </div>
+      </form>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DashboardCardFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cide-lyt-dashboard-card-form',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CideEleButtonComponent,
+                        CideInputComponent,
+                        CideSelectComponent
+                    ],
+                    template: `
+    <div class="tw-p-4 tw-space-y-4">
+      <form (ngSubmit)="saveCard()" class="tw-space-y-4">
+        <div class="tw-grid tw-grid-cols-2 tw-gap-4">
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Title</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.title"
+              [name]="'title'"
+              [required]="true"
+              [placeholder]="'Enter card title'">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Type</label>
+            <cide-ele-select
+              [ngModel]="cardForm.type || 'custom'"
+              (ngModelChange)="onTypeChange($event)"
+              [options]="cardTypes"
+              [required]="true">
+            </cide-ele-select>
+          </div>
+        </div>
+
+        <div>
+          <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Description</label>
+          <cide-ele-input
+            [(ngModel)]="cardForm.description"
+            [name]="'description'"
+            [type]="'text'"
+            [placeholder]="'Enter card description'">
+          </cide-ele-input>
+        </div>
+
+        <div>
+          <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">API Endpoint</label>
+          <cide-ele-select
+            [ngModel]="cardForm.apiEndpoint"
+            (ngModelChange)="onApiEndpointChange($event)"
+            [options]="apiEndpointsOptions()"
+            [placeholder]="'Select API endpoint'">
+          </cide-ele-select>
+        </div>
+
+        <div class="tw-grid tw-grid-cols-2 tw-gap-4">
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Icon</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.icon"
+              [name]="'icon'"
+              [placeholder]="'e.g., dashboard, analytics'">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Color</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.color"
+              [name]="'color'"
+              [type]="'text'"
+              [placeholder]="'#3B82F6'">
+            </cide-ele-input>
+          </div>
+        </div>
+
+        <div class="tw-grid tw-grid-cols-4 tw-gap-4">
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Row</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.row"
+              [name]="'row'"
+              [type]="'number'"
+              [min]="1">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Col</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.col"
+              [name]="'col'"
+              [type]="'number'"
+              [min]="1">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Col Span</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.colspan"
+              [name]="'colspan'"
+              [type]="'number'"
+              [min]="1"
+              [max]="12">
+            </cide-ele-input>
+          </div>
+          
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-mb-1">Row Span</label>
+            <cide-ele-input
+              [(ngModel)]="cardForm.position.rowspan"
+              [name]="'rowspan'"
+              [type]="'number'"
+              [min]="1">
+            </cide-ele-input>
+          </div>
+        </div>
+
+        <div class="tw-flex tw-gap-2 tw-pt-4 tw-justify-end">
+          <cide-ele-button
+            [label]="'Cancel'"
+            variant="secondary"
+            (click)="closeForm()">
+          </cide-ele-button>
+          <cide-ele-button
+            [label]="'Save'"
+            variant="primary"
+            [type]="'submit'"
+            [loading]="saving()">
+          </cide-ele-button>
+        </div>
+      </form>
+    </div>
+  `
+                }]
+        }], propDecorators: { containerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerId", required: false }] }], editCardData: [{ type: i0.Input, args: [{ isSignal: true, alias: "editCardData", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+class DashboardManagerComponent {
+    dashboardCardsService = inject(DashboardCardsService);
+    notificationService = inject(NotificationService);
+    confirmationService = inject(ConfirmationService);
+    floatingContainerService = inject(CideEleFloatingContainerService);
+    shared_wrapper_setup_param = {
+        sypg_page_code: "cide_lyt_dashboard_manager"
+    };
+    cardsList = signal([], ...(ngDevMode ? [{ debugName: "cardsList" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    constructor() {
+        this.floatingContainerService.registerComponent('dashboard-card-form', DashboardCardFormComponent);
+    }
+    gridConfig = computed(() => ({
+        id: 'dashboard-cards-grid',
+        columns: [
+            {
+                key: 'cdc_title',
+                header: 'Title',
+                type: 'text',
+                sortable: true
+            },
+            {
+                key: 'cdc_type',
+                header: 'Type',
+                type: 'text',
+                sortable: true
+            },
+            {
+                key: 'cdc_api_endpoint',
+                header: 'API Endpoint',
+                type: 'text'
+            },
+            {
+                key: 'cdc_visible',
+                header: 'Visible',
+                type: 'status',
+                statusConfig: {
+                    activeValue: true,
+                    activeLabel: 'Visible',
+                    inactiveLabel: 'Hidden',
+                    activeClass: 'tw-bg-green-100 tw-text-green-800',
+                    inactiveClass: 'tw-bg-gray-100 tw-text-gray-800'
+                }
+            },
+            {
+                key: 'actions',
+                header: 'Actions',
+                type: 'actions',
+                actions: [
+                    {
+                        key: 'edit',
+                        label: 'Edit',
+                        icon: 'edit',
+                        variant: 'primary',
+                        onClick: 'edit'
+                    },
+                    {
+                        key: 'delete',
+                        label: 'Delete',
+                        icon: 'delete',
+                        variant: 'danger',
+                        onClick: 'delete'
+                    },
+                    {
+                        key: 'toggle',
+                        label: 'Toggle Visibility',
+                        icon: 'visibility',
+                        variant: 'outline',
+                        onClick: 'toggle'
+                    }
+                ]
+            }
+        ],
+        data: this.cardsList(),
+        pagination: {
+            enabled: true,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search cards...',
+            searchableColumns: ['cdc_title', 'cdc_type', 'cdc_api_endpoint']
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: true
+    }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    ngOnInit() {
+        this.loadCards();
+    }
+    loadCards() {
+        this.loading.set(true);
+        this.dashboardCardsService.getDashboardCardsList({}).subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    // Map DashboardCardsListResponse to CoreDashboardCards
+                    const mappedCards = response.data.map((card) => ({
+                        ...card,
+                        cdc_entity_id_syen: card.cdc_entity_id_syen?._id || card.cdc_entity_id_syen,
+                        cdc_created_by_user: card.cdc_created_by_user?._id || card.cdc_created_by_user,
+                        cdc_modified_by_user: card.cdc_modified_by_user?._id || card.cdc_modified_by_user
+                    }));
+                    this.cardsList.set(mappedCards);
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Error loading cards:', error);
+                this.notificationService.error('Error loading dashboard cards');
+                this.loading.set(false);
+            }
+        });
+    }
+    openAddCardModal() {
+        const containerId = 'dashboard-card-create';
+        this.floatingContainerService.show({
+            id: containerId,
+            title: 'Create Dashboard Card',
+            icon: 'add_card',
+            width: '800px',
+            height: 'auto',
+            componentId: 'dashboard-card-form',
+            componentConfig: {
+                inputs: {
+                    containerId: signal(containerId),
+                    editCardData: signal(null)
+                },
+                outputs: {
+                    saved: () => {
+                        this.loadCards();
+                        this.floatingContainerService.hide(containerId);
+                    },
+                    cancelled: () => this.floatingContainerService.hide(containerId)
+                }
+            }
+        });
+    }
+    editCard(card) {
+        const containerId = `dashboard-card-edit-${card._id}`;
+        this.floatingContainerService.show({
+            id: containerId,
+            title: `Edit Card: ${card.cdc_title}`,
+            icon: 'edit',
+            width: '800px',
+            height: 'auto',
+            componentId: 'dashboard-card-form',
+            componentConfig: {
+                inputs: {
+                    containerId: signal(containerId),
+                    editCardData: signal(card)
+                },
+                outputs: {
+                    saved: () => {
+                        this.loadCards();
+                        this.floatingContainerService.hide(containerId);
+                    },
+                    cancelled: () => this.floatingContainerService.hide(containerId)
+                }
+            }
+        });
+    }
+    deleteCard(card) {
+        if (!card._id)
+            return;
+        this.confirmationService.ask({
+            title: 'Delete Card',
+            message: `Are you sure you want to delete "\${card.cdc_title}"?`,
+            type: 'danger',
+            icon: 'delete_forever',
+            confirmText: 'Delete',
+            cancelText: 'Cancel'
+        }).then((confirmed) => {
+            if (confirmed) {
+                this.dashboardCardsService.deleteDashboardCard(card._id).subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.notificationService.success('Card deleted successfully');
+                            this.loadCards();
+                        }
+                        else {
+                            this.notificationService.error(response.message || 'Error deleting card');
+                        }
+                    },
+                    error: (error) => {
+                        console.error('Error deleting card:', error);
+                        this.notificationService.error('Error deleting card');
+                    }
+                });
+            }
+        });
+    }
+    toggleVisibility(card) {
+        const payload = {
+            core_dashboard_cards: {
+                _id: card._id,
+                cdc_visible: !card.cdc_visible
+            }
+        };
+        this.dashboardCardsService.saveUpdateDashboardCard(payload).subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.loadCards();
+                }
+            },
+            error: (error) => {
+                console.error('Error toggling visibility:', error);
+                this.notificationService.error('Error updating card');
+            }
+        });
+    }
+    onGridEvent(event) {
+        if (event.type === 'action' && event.action) {
+            const card = event.data;
+            if (event.action.key === 'edit') {
+                this.editCard(card);
+            }
+            else if (event.action.key === 'delete') {
+                this.deleteCard(card);
+            }
+            else if (event.action.key === 'toggle') {
+                this.toggleVisibility(card);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DashboardManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DashboardManagerComponent, isStandalone: true, selector: "cide-lyt-dashboard-manager", ngImport: i0, template: `
+    <cide-lyt-shared-wrapper [shared_wrapper_setup_param]="shared_wrapper_setup_param">
+      <div class="tw-p-4 tw-space-y-4">
+        <div breadcrumb-actions>
+            <cide-ele-button
+              [label]="'Add New Card'"
+              leftIcon="add"
+              (click)="openAddCardModal()"
+              variant="primary"
+              size="xs"
+              [adaptive]="true">
+            </cide-ele-button>
+        </div>
+
+        <!-- Cards Grid -->
+        <cide-ele-data-grid
+          [config]="gridConfig()"
+          (gridEvent)="onGridEvent($event)">
+        </cide-ele-data-grid>
+      </div>
+    </cide-lyt-shared-wrapper>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DashboardManagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cide-lyt-dashboard-manager',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CideLytSharedWrapperComponent,
+                        CideEleDataGridComponent,
+                        CideEleButtonComponent
+                    ],
+                    template: `
+    <cide-lyt-shared-wrapper [shared_wrapper_setup_param]="shared_wrapper_setup_param">
+      <div class="tw-p-4 tw-space-y-4">
+        <div breadcrumb-actions>
+            <cide-ele-button
+              [label]="'Add New Card'"
+              leftIcon="add"
+              (click)="openAddCardModal()"
+              variant="primary"
+              size="xs"
+              [adaptive]="true">
+            </cide-ele-button>
+        </div>
+
+        <!-- Cards Grid -->
+        <cide-ele-data-grid
+          [config]="gridConfig()"
+          (gridEvent)="onGridEvent($event)">
+        </cide-ele-data-grid>
+      </div>
+    </cide-lyt-shared-wrapper>
+  `
+                }]
+        }], ctorParameters: () => [] });
+
+export { DashboardManagerComponent };
+//# sourceMappingURL=cloud-ide-layout-dashboard-manager.component-DdEEGw7d.mjs.map