cloud-ide-layout 1.0.113 → 1.0.118

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

@@ -0,0 +1,653 @@
+import * as i0 from '@angular/core';
+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-DUv_E9sG.mjs';
+import { D as DashboardCardsService } from './cloud-ide-layout-dashboard-cards.service-BbJ4rb2S.mjs';
+import { NotificationService, ConfirmationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent } from 'cloud-ide-element';
+
+class DashboardManagerComponent {
+    dashboardCardsService = inject(DashboardCardsService);
+    notificationService = inject(NotificationService);
+    confirmationService = inject(ConfirmationService);
+    shared_wrapper_setup_param = {
+        sypg_page_code: "cide_lyt_dashboard_manager"
+    };
+    cardsList = signal([], ...(ngDevMode ? [{ debugName: "cardsList" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    showModal = signal(false, ...(ngDevMode ? [{ debugName: "showModal" }] : []));
+    editingCard = signal(null, ...(ngDevMode ? [{ debugName: "editingCard" }] : []));
+    apiEndpoints = signal([], ...(ngDevMode ? [{ debugName: "apiEndpoints" }] : []));
+    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" }] : []));
+    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.loadCards();
+        this.loadApiEndpoints();
+    }
+    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);
+            }
+        });
+    }
+    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);
+            }
+        });
+    }
+    openAddCardModal() {
+        this.editingCard.set(null);
+        this.cardForm = {
+            title: '',
+            description: '',
+            type: 'custom',
+            apiEndpoint: '',
+            icon: '',
+            color: '#3B82F6',
+            position: {
+                row: 1,
+                col: 1,
+                colspan: 1,
+                rowspan: 1
+            }
+        };
+        this.showModal.set(true);
+    }
+    editCard(card) {
+        this.editingCard.set(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
+                }
+        };
+        this.showModal.set(true);
+    }
+    closeModal() {
+        this.showModal.set(false);
+        this.editingCard.set(null);
+    }
+    saveCard() {
+        const payload = {
+            core_dashboard_cards: {
+                _id: this.editingCard()?._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(this.editingCard() ? 'Card updated successfully' : 'Card created successfully');
+                    this.closeModal();
+                    this.loadCards();
+                }
+                else {
+                    this.notificationService.error(response.message || 'Error saving card');
+                }
+            },
+            error: (error) => {
+                console.error('Error saving card:', error);
+                this.notificationService.error('Error saving card');
+            }
+        });
+    }
+    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);
+            }
+        }
+    }
+    onTypeChange(value) {
+        this.cardForm.type = value;
+    }
+    onApiEndpointChange(value) {
+        this.cardForm.apiEndpoint = String(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DashboardManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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">
+        <!-- Header -->
+        <div class="tw-flex tw-justify-between tw-items-center">
+          <h2 class="tw-text-2xl tw-font-bold">Dashboard Manager</h2>
+          <cide-ele-button
+            [label]="'Add New Card'"
+            leftIcon="add"
+            (click)="openAddCardModal()"
+            variant="primary">
+          </cide-ele-button>
+        </div>
+
+        <!-- Cards Grid -->
+        <cide-ele-data-grid
+          [config]="gridConfig()"
+          (gridEvent)="onGridEvent($event)">
+        </cide-ele-data-grid>
+
+        <!-- Add/Edit Card Modal -->
+        @if (showModal()) {
+          <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">
+            <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">
+              <h3 class="tw-text-xl tw-font-bold tw-mb-4">
+                {{ editingCard() ? 'Edit Card' : 'Add New Card' }}
+              </h3>
+              
+              <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">
+                  <cide-ele-button
+                    [label]="'Cancel'"
+                    variant="secondary"
+                    (click)="closeModal()">
+                  </cide-ele-button>
+                  <cide-ele-button
+                    [label]="'Save'"
+                    variant="primary"
+                    [type]="'submit'">
+                  </cide-ele-button>
+                </div>
+              </form>
+            </div>
+          </div>
+        }
+      </div>
+    </cide-lyt-shared-wrapper>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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"], 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.1.7", ngImport: i0, type: DashboardManagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cide-lyt-dashboard-manager',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CideLytSharedWrapperComponent,
+                        CideEleDataGridComponent,
+                        CideEleButtonComponent,
+                        CideInputComponent,
+                        CideSelectComponent
+                    ],
+                    template: `
+    <cide-lyt-shared-wrapper [shared_wrapper_setup_param]="shared_wrapper_setup_param">
+      <div class="tw-p-4 tw-space-y-4">
+        <!-- Header -->
+        <div class="tw-flex tw-justify-between tw-items-center">
+          <h2 class="tw-text-2xl tw-font-bold">Dashboard Manager</h2>
+          <cide-ele-button
+            [label]="'Add New Card'"
+            leftIcon="add"
+            (click)="openAddCardModal()"
+            variant="primary">
+          </cide-ele-button>
+        </div>
+
+        <!-- Cards Grid -->
+        <cide-ele-data-grid
+          [config]="gridConfig()"
+          (gridEvent)="onGridEvent($event)">
+        </cide-ele-data-grid>
+
+        <!-- Add/Edit Card Modal -->
+        @if (showModal()) {
+          <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">
+            <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">
+              <h3 class="tw-text-xl tw-font-bold tw-mb-4">
+                {{ editingCard() ? 'Edit Card' : 'Add New Card' }}
+              </h3>
+              
+              <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">
+                  <cide-ele-button
+                    [label]="'Cancel'"
+                    variant="secondary"
+                    (click)="closeModal()">
+                  </cide-ele-button>
+                  <cide-ele-button
+                    [label]="'Save'"
+                    variant="primary"
+                    [type]="'submit'">
+                  </cide-ele-button>
+                </div>
+              </form>
+            </div>
+          </div>
+        }
+      </div>
+    </cide-lyt-shared-wrapper>
+  `
+                }]
+        }] });
+
+export { DashboardManagerComponent };
+//# sourceMappingURL=cloud-ide-layout-dashboard-manager.component-c-ZdOmN3.mjs.map