commons-shared-web-ui 0.0.53 → 0.0.54

package/ng-package.json

@@ -1,28 +0,0 @@
-{
-    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-    "dest": "./dist/commons-shared-web-ui",
-    "lib": {
-        "entryFile": "src/public-api.ts"
-    },
-    "assets": [
-        "src/lib/styles/global.scss",
-        "src/lib/styles/utilities.scss",
-        "src/lib/modules/pagination/pagination.theme.scss",
-        "src/lib/modules/summary-card/summary-card.theme.scss",
-        "src/lib/modules/button/button.theme.scss",
-        "src/lib/modules/alert/alert.theme.scss",
-        "src/lib/modules/confirmation-modal/confirmation-modal.theme.scss",
-        "src/lib/modules/filter-sidebar/filter-sidebar.theme.scss",
-        "src/lib/modules/filter/filter.theme.scss",
-        "src/lib/modules/nav/nav.theme.scss",
-        "src/lib/modules/configurable-form/configurable-form.theme.scss",
-        "src/lib/modules/form-components/form-components.theme.scss",
-        "src/lib/modules/form-components/**/_theme.scss",
-        "src/lib/modules/smart-table/smart-table.theme.scss",
-        "src/lib/modules/smart-form/smart-form.theme.scss",
-        "src/lib/modules/side-nav/side-nav.theme.scss",
-        "src/lib/modules/form-builder/form-builder.theme.scss",
-        "src/lib/modules/filter-table-selector/filter-table-selector.theme.scss",
-        "src/lib/modules/snackbar/snackbar.theme.scss"
-    ]
-}

package/src/lib/modules/alert/alert.models.ts

@@ -1,6 +0,0 @@
-export type AlertVariant = 'info' | 'warning' | 'warning-shadow' | 'success' | 'error';
-export type IconInput = boolean | string | { type: 'material' | 'fontawesome' | 'img'; value: string };
-
-export interface AlertLabels {
-    iconAltText?: string;
-}

package/src/lib/modules/alert/alert.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AlertComponent } from './components/alert/alert.component';
-
-@NgModule({
-    declarations: [
-        AlertComponent
-    ],
-    imports: [
-        CommonModule
-    ],
-    exports: [
-        AlertComponent
-    ]
-})
-export class AlertModule { }

package/src/lib/modules/alert/components/alert/alert.component.html

@@ -1,27 +0,0 @@
-<div class="cc-alert" [ngClass]="'cc-alert-' + variant" [style.width]="width" [style.height]="height"
-    [style.border-radius]="borderRadius" [style.border-top-left-radius]="borderTopLeftRadius"
-    [style.border-top-right-radius]="borderTopRightRadius" [style.border-bottom-left-radius]="borderBottomLeftRadius"
-    [style.border-bottom-right-radius]="borderBottomRightRadius" [style.padding]="padding" [style.gap]="gap"
-    [style.background-color]="backgroundColor" [style.color]="color" [style.border-color]="borderColor"
-    [style.font-size]="fontSize" [style.font-weight]="fontWeight" [style.box-shadow]="boxShadow">
-
-    <div class="cc-alert-icon" *ngIf="icon">
-        <i *ngIf="customIcon" [ngClass]="customIcon"></i>
-        <i *ngIf="!customIcon && isDefaultIcon" [ngClass]="defaultIconClass"></i>
-        <i *ngIf="!customIcon && isStringIcon && !isImgIcon" [ngClass]="iconString"></i>
-        <img *ngIf="!customIcon && isStringIcon && isImgIcon" [src]="iconString"
-            [attr.alt]="labels?.iconAltText || 'alert icon'" />
-        <ng-container *ngIf="isObjectIcon">
-            <i *ngIf="iconObject.type === 'fontawesome'" [ngClass]="iconObject.value"></i>
-            <span *ngIf="iconObject.type === 'material'" class="material-icons">{{ iconObject.value }}</span>
-            <img *ngIf="iconObject.type === 'img'" [src]="iconObject.value"
-                [attr.alt]="labels?.iconAltText || 'alert icon'" />
-        </ng-container>
-    </div>
-
-    <div class="cc-alert-content">
-        <div class="cc-alert-title" *ngIf="title">{{ title }}</div>
-        <div class="cc-alert-message" *ngIf="message">{{ message }}</div>
-        <ng-content></ng-content>
-    </div>
-</div>

package/src/lib/modules/alert/components/alert/alert.component.scss

@@ -1,92 +0,0 @@
-.cc-alert {
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    padding: var(--cc-alert-padding, 1rem 2rem);
-    border-radius: var(--cc-alert-radius, 0.75rem);
-    gap: var(--cc-alert-gap, 1rem);
-    box-sizing: border-box;
-    font-family: var(--cc-alert-font-family, inherit);
-
-    .cc-alert-icon {
-        font-size: var(--cc-alert-icon-size, 1.25rem);
-        flex-shrink: 0;
-        margin-top: var(--cc-alert-icon-margin-top, 0.125rem);
-
-        img {
-            width: var(--cc-alert-icon-size, 1.25rem);
-            height: var(--cc-alert-icon-size, 1.25rem);
-            object-fit: contain;
-        }
-    }
-
-    .cc-alert-content {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem; // Keeping small internal gap as is, or could be a var
-        flex-grow: 1;
-
-        .cc-alert-title {
-            font-weight: 700;
-            font-size: var(--cc-alert-title-size, 1rem);
-            line-height: var(--cc-alert-title-line-height, 1.5rem);
-        }
-
-        .cc-alert-message {
-            font-size: var(--cc-alert-message-size, 0.875rem);
-            line-height: 200%; // Relative unit is fine
-            opacity: 0.9;
-        }
-    }
-
-    // Variants
-    &.cc-alert-info {
-        background-color: var(--cc-alert-info-bg);
-        color: var(--cc-alert-info-color);
-
-        .cc-alert-icon {
-            color: #5F6368;
-        }
-    }
-
-    &.cc-alert-warning {
-        background-color: var(--cc-alert-warning-bg);
-        color: var(--cc-alert-warning-color);
-
-        .cc-alert-title {
-            color: var(--cc-alert-warning-title-color);
-        }
-
-        .cc-alert-icon {
-            color: var(--cc-alert-warning-title-color);
-        }
-    }
-
-    &.cc-alert-warning-shadow {
-        background-color: var(--cc-alert-warning-bg);
-        color: var(--cc-alert-warning-color);
-        box-shadow: var(--cc-alert-warning-shadow);
-
-        .cc-alert-title {
-            color: var(--cc-alert-warning-title-color);
-        }
-
-        .cc-alert-icon {
-            color: var(--cc-alert-warning-title-color);
-        }
-    }
-
-    &.cc-alert-success {
-        background-color: var(--cc-alert-success-bg);
-        color: var(--cc-alert-success-color);
-    }
-
-    &.cc-alert-error {
-        background-color: var(--cc-alert-error-bg);
-        color: var(--cc-alert-error-color);
-
-        .cc-alert-icon {
-            color: var(--cc-alert-error-color);
-        }
-    }
-}

package/src/lib/modules/alert/components/alert/alert.component.ts

@@ -1,81 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AlertLabels, AlertVariant, IconInput } from '../../alert.models';
-
-@Component({
-    selector: 'lib-alert',
-    templateUrl: './alert.component.html',
-    styleUrls: ['./alert.component.scss'],
-    standalone: false
-})
-export class AlertComponent implements OnInit {
-    @Input() variant: AlertVariant = 'info';
-    @Input() title: string = '';
-    @Input() message: string = '';
-    @Input() icon: IconInput = true;
-    @Input() customIcon: string = ''; // New input for custom class
-    @Input() labels?: AlertLabels;
-
-    // Customization Inputs
-    @Input() width?: string;
-    @Input() height?: string;
-    @Input() borderRadius?: string;
-    @Input() padding?: string;
-    @Input() gap?: string;
-    @Input() backgroundColor?: string;
-    @Input() color?: string; // New input for custom text color
-    @Input() borderColor?: string;
-    @Input() fontSize?: string;
-    @Input() fontWeight?: string;
-    @Input() boxShadow?: string;
-
-    // Granular Border Radius Customization
-    @Input() borderTopLeftRadius?: string;
-    @Input() borderTopRightRadius?: string;
-    @Input() borderBottomLeftRadius?: string;
-    @Input() borderBottomRightRadius?: string;
-
-    constructor() { }
-
-    ngOnInit(): void {
-    }
-
-    get isDefaultIcon(): boolean {
-        return this.icon === true;
-    }
-
-    get isStringIcon(): boolean {
-        return typeof this.icon === 'string';
-    }
-
-    get isObjectIcon(): boolean {
-        return typeof this.icon === 'object' && this.icon !== null;
-    }
-
-    get iconString(): string {
-        return typeof this.icon === 'string' ? this.icon : '';
-    }
-
-    get isImgIcon(): boolean {
-        const icon = this.icon;
-        if (typeof icon === 'string') {
-            return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
-        }
-        return typeof icon === 'object' && icon !== null && icon.type === 'img';
-    }
-
-    get iconObject(): { type: string; value: string } {
-        return typeof this.icon === 'object' ? this.icon as any : { type: '', value: '' };
-    }
-
-    get defaultIconClass(): string {
-        switch (this.variant) {
-            case 'success': return 'fa-solid fa-circle-check';
-            case 'warning':
-            case 'warning-shadow': return 'fa-solid fa-triangle-exclamation';
-            case 'error': return 'fa-solid fa-triangle-exclamation';
-            case 'info':
-            default: return 'fa-solid fa-circle-info';
-        }
-    }
-}

package/src/lib/modules/button/button.models.ts

@@ -1,13 +0,0 @@
-export type ButtonVariant =
-    | 'primary'
-    | 'warning'
-    | 'outline'
-    | 'secondary'
-    | 'success'
-    | 'danger'
-    | 'danger-outline'
-    | 'text';
-
-export interface ButtonLabels {
-    iconAltText?: string;
-}

package/src/lib/modules/button/button.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ButtonComponent } from './components/button/button.component';
-
-@NgModule({
-  declarations: [
-    ButtonComponent
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    ButtonComponent
-  ]
-})
-export class ButtonModule { }

package/src/lib/modules/button/components/button/button.component.html

@@ -1,22 +0,0 @@
-<button [type]="type" [disabled]="disabled" class="cc-btn" [ngClass]="'cc-btn-' + variant" [style.width]="width"
-  [style.height]="height" [style.border-radius]="borderRadius" [style.font-size]="fontSize"
-  [style.font-weight]="fontWeight" [style.background-color]="backgroundColor" [style.color]="color"
-  [style.border]="border">
-  <div class="cc-btn-icon-wrapper" *ngIf="icon">
-    <!-- String Icons -->
-    <ng-container *ngIf="isStringIcon">
-      <i *ngIf="!isImgIcon" [ngClass]="iconString" class="cc-btn-icon"></i>
-      <img *ngIf="isImgIcon" [src]="iconString" [attr.alt]="labels?.iconAltText || 'button icon'"
-        class="cc-btn-icon cc-btn-img-icon" />
-    </ng-container>
-
-    <!-- Object Icons -->
-    <ng-container *ngIf="isObjectIcon">
-      <i *ngIf="iconObject.type === 'fontawesome'" [ngClass]="iconObject.value" class="cc-btn-icon"></i>
-      <span *ngIf="iconObject.type === 'material'" class="material-icons cc-btn-icon">{{ iconObject.value }}</span>
-      <img *ngIf="iconObject.type === 'img'" [src]="iconObject.value" [attr.alt]="labels?.iconAltText || 'button icon'"
-        class="cc-btn-icon cc-btn-img-icon" />
-    </ng-container>
-  </div>
-  <ng-content></ng-content>
-</button>

package/src/lib/modules/button/components/button/button.component.scss

@@ -1,88 +0,0 @@
-.cc-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-
-    // Common styles from variables
-    font-family: var(--cc-btn-font-family);
-    font-weight: var(--cc-btn-font-weight);
-    font-size: var(--cc-btn-font-size);
-    padding: var(--cc-btn-padding);
-
-    // Disabled State
-    &:disabled {
-        opacity: var(--cc-btn-disabled-opacity);
-        cursor: var(--cc-btn-disabled-cursor);
-        pointer-events: none;
-    }
-
-    // Variants
-    &.cc-btn-primary {
-        background-color: var(--cc-btn-primary-bg);
-        color: var(--cc-btn-primary-color);
-        border-radius: var(--cc-btn-primary-radius);
-        border: var(--cc-btn-primary-border);
-    }
-
-    &.cc-btn-warning {
-        background-color: var(--cc-btn-warning-bg);
-        color: var(--cc-btn-warning-color);
-        border-radius: var(--cc-btn-warning-radius);
-        border: var(--cc-btn-warning-border);
-    }
-
-    &.cc-btn-outline {
-        background-color: var(--cc-btn-outline-bg);
-        color: var(--cc-btn-outline-color);
-        border-radius: var(--cc-btn-outline-radius);
-        border: var(--cc-btn-outline-border);
-    }
-
-    &.cc-btn-secondary {
-        background-color: var(--cc-btn-secondary-bg);
-        color: var(--cc-btn-secondary-color);
-        border-radius: var(--cc-btn-secondary-radius);
-        border: var(--cc-btn-secondary-border);
-    }
-
-    &.cc-btn-success {
-        background-color: var(--cc-btn-success-bg);
-        color: var(--cc-btn-success-color);
-        border-radius: var(--cc-btn-success-radius);
-        border: var(--cc-btn-success-border);
-    }
-
-    &.cc-btn-danger {
-        background-color: var(--cc-btn-danger-bg);
-        color: var(--cc-btn-danger-color);
-        border-radius: var(--cc-btn-danger-radius);
-        border: var(--cc-btn-danger-border);
-    }
-
-    &.cc-btn-danger-outline {
-        background-color: var(--cc-btn-danger-outline-bg);
-        color: var(--cc-btn-danger-outline-color);
-        border-radius: var(--cc-btn-danger-outline-radius);
-        border: var(--cc-btn-danger-outline-border);
-    }
-
-    .cc-btn-icon-wrapper {
-        display: inline-flex;
-        align-items: center;
-        margin-right: 0.5rem; // 8px
-    }
-
-    .cc-btn-icon {
-        font-size: 1.1em;
-        line-height: 1;
-    }
-
-    .cc-btn-img-icon {
-        width: 1.25rem;
-        height: 1.25rem;
-        object-fit: contain;
-    }
-}

package/src/lib/modules/button/components/button/button.component.ts

@@ -1,67 +0,0 @@
-import { Component, Input, OnInit, HostBinding } from '@angular/core';
-
-import { ButtonLabels, ButtonVariant } from '../../button.models';
-
-@Component({
-    selector: 'lib-button',
-    templateUrl: './button.component.html',
-    styleUrls: ['./button.component.scss'],
-    standalone: false
-})
-export class ButtonComponent implements OnInit {
-
-    @Input() variant: ButtonVariant = 'primary';
-    @Input() type: 'button' | 'submit' | 'reset' = 'button';
-    @Input() disabled: boolean = false;
-
-    @HostBinding('style.pointer-events')
-    get pointerEvents(): string {
-        return this.disabled ? 'none' : 'auto';
-    }
-
-    // Customization Inputs
-    @Input() width?: string;
-    @Input() height?: string;
-    @Input() borderRadius?: string;
-    @Input() fontSize?: string;
-    @Input() fontWeight?: string;
-    @Input() backgroundColor?: string;
-    @Input() color?: string;
-    @Input() border?: string;
-    @Input() icon: boolean | string | { type: 'material' | 'fontawesome' | 'img'; value: string } = '';
-    @Input() labels?: ButtonLabels;
-
-    constructor() { }
-
-    ngOnInit(): void {
-    }
-
-    get isDefaultIcon(): boolean {
-        return this.icon === true;
-    }
-
-    get isStringIcon(): boolean {
-        return typeof this.icon === 'string' && this.icon !== '';
-    }
-
-    get isImgIcon(): boolean {
-        const icon = this.icon;
-        if (typeof icon === 'string') {
-            return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
-        }
-        return typeof icon === 'object' && icon !== null && !!icon.value && (icon.type === 'img' || icon.value.includes('/') || icon.value.includes('.') || icon.value.startsWith('http'));
-    }
-
-    get isObjectIcon(): boolean {
-        return typeof this.icon === 'object' && this.icon !== null;
-    }
-
-    get iconString(): string {
-        return typeof this.icon === 'string' ? this.icon : '';
-    }
-
-    get iconObject(): { type: string; value: string } {
-        return typeof this.icon === 'object' ? this.icon as any : { type: '', value: '' };
-    }
-
-}

package/src/lib/modules/button-dropdown/button-dropdown.models.ts

@@ -1,26 +0,0 @@
-import { ButtonVariant } from '../button/button.models';
-
-export interface DropdownAction {
-    label: string;
-    type: 'api' | 'route' | 'callback';
-    icon?: string;
-    color?: string; // Generic override
-    variant?: ButtonVariant; // Explict variant (primary, warning, danger, etc)
-
-    // For 'route' type
-    route?: string;
-
-    // For 'api' type
-    apiUrl?: string;
-    apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
-    apiPayload?: any;
-
-    // For 'callback' type
-    callback?: (data: any) => void;
-
-    // Universal options
-    disabled?: boolean;
-    confirmationNeeded?: boolean;
-    confirmationMessage?: string;
-    confirmationTitle?: string;
-}

package/src/lib/modules/button-dropdown/button-dropdown.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { ButtonDropdownComponent } from './components/button-dropdown/button-dropdown.component';
-import { ButtonModule } from '../button/button.module';
-import { ConfirmationModalModule } from '../confirmation-modal/confirmation-modal.module';
-
-@NgModule({
-    declarations: [
-        ButtonDropdownComponent
-    ],
-    imports: [
-        CommonModule,
-        RouterModule,
-        ButtonModule,
-        ConfirmationModalModule
-    ],
-    exports: [
-        ButtonDropdownComponent
-    ]
-})
-export class ButtonDropdownModule { }

package/src/lib/modules/button-dropdown/button-dropdown.theme.scss

@@ -1,87 +0,0 @@
-@use 'sass:map';
-
-$default-button-dropdown-config: (
-    // General Structure
-    menu-radius: 4px,
-    menu-border-light: 1px solid #e0e0e0,
-    menu-border-dark: 1px solid #444444,
-    menu-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1),
-    menu-shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.5),
-
-    // Light Theme Map
-    light-bg: #ffffff,
-    light-item-color: #333333,
-    light-item-hover-bg: #f5f5f5,
-
-    // Dark Theme Map
-    dark-bg: #1a1a1a,
-    dark-item-color: #ffffff,
-    dark-item-hover-bg: #2d2d2d,
-
-    // Button Variants (For Explicit Actions)
-    primary-bg: #262125,
-    primary-color: #ffffff,
-    primary-hover: #3d353b,
-
-    warning-bg: #F9C80E,
-    warning-color: #000000,
-    warning-hover: #ebd573,
-
-    success-bg: #16A34A,
-    success-color: #ffffff,
-    success-hover: #148f41,
-
-    danger-bg: #E63E30,
-    danger-color: #ffffff,
-    danger-hover: #c93528,
-
-    secondary-bg: #E8EAED,
-    secondary-color: #000000,
-    secondary-hover: #d1d5db,
-
-    outline-bg: transparent,
-    outline-color: #000000,
-    outline-hover: rgba(0,0,0,0.05)
-);
-
-@mixin button-dropdown-theme($user-config: ()) {
-    $config: map.merge($default-button-dropdown-config, $user-config);
-
-    --cc-btn-dropdown-radius: #{map.get($config, menu-radius)};
-    --cc-btn-dropdown-border-light: #{map.get($config, menu-border-light)};
-    --cc-btn-dropdown-border-dark: #{map.get($config, menu-border-dark)};
-    --cc-btn-dropdown-shadow-light: #{map.get($config, menu-shadow-light)};
-    --cc-btn-dropdown-shadow-dark: #{map.get($config, menu-shadow-dark)};
-
-    --cc-btn-dropdown-light-bg: #{map.get($config, light-bg)};
-    --cc-btn-dropdown-light-item-color: #{map.get($config, light-item-color)};
-    --cc-btn-dropdown-light-item-hover-bg: #{map.get($config, light-item-hover-bg)};
-
-    --cc-btn-dropdown-dark-bg: #{map.get($config, dark-bg)};
-    --cc-btn-dropdown-dark-item-color: #{map.get($config, dark-item-color)};
-    --cc-btn-dropdown-dark-item-hover-bg: #{map.get($config, dark-item-hover-bg)};
-
-    --cc-btn-dropdown-primary-bg: #{map.get($config, primary-bg)};
-    --cc-btn-dropdown-primary-color: #{map.get($config, primary-color)};
-    --cc-btn-dropdown-primary-hover: #{map.get($config, primary-hover)};
-
-    --cc-btn-dropdown-warning-bg: #{map.get($config, warning-bg)};
-    --cc-btn-dropdown-warning-color: #{map.get($config, warning-color)};
-    --cc-btn-dropdown-warning-hover: #{map.get($config, warning-hover)};
-
-    --cc-btn-dropdown-success-bg: #{map.get($config, success-bg)};
-    --cc-btn-dropdown-success-color: #{map.get($config, success-color)};
-    --cc-btn-dropdown-success-hover: #{map.get($config, success-hover)};
-
-    --cc-btn-dropdown-danger-bg: #{map.get($config, danger-bg)};
-    --cc-btn-dropdown-danger-color: #{map.get($config, danger-color)};
-    --cc-btn-dropdown-danger-hover: #{map.get($config, danger-hover)};
-
-    --cc-btn-dropdown-secondary-bg: #{map.get($config, secondary-bg)};
-    --cc-btn-dropdown-secondary-color: #{map.get($config, secondary-color)};
-    --cc-btn-dropdown-secondary-hover: #{map.get($config, secondary-hover)};
-    
-    --cc-btn-dropdown-outline-bg: #{map.get($config, outline-bg)};
-    --cc-btn-dropdown-outline-color: #{map.get($config, outline-color)};
-    --cc-btn-dropdown-outline-hover: #{map.get($config, outline-hover)};
-}

package/src/lib/modules/button-dropdown/components/button-dropdown/button-dropdown.component.html

@@ -1,41 +0,0 @@
-<div class="cc-btn-dropdown-container">
-    <!-- Main Toggle Button -->
-    <lib-button 
-        [variant]="variant" 
-        [disabled]="disabled"
-        (click)="toggleDropdown($event)">
-        <span class="cc-btn-dropdown-content">
-            {{ label }}
-            <i *ngIf="icon" [class]="icon" class="cc-btn-dropdown-icon"></i>
-        </span>
-    </lib-button>
-
-    <!-- Dropdown Menu -->
-    <div class="cc-dropdown-menu" [ngClass]="'cc-dropdown-menu--' + menuTheme" *ngIf="isOpen">
-        <button 
-            type="button" 
-            class="cc-dropdown-item" 
-            *ngFor="let action of actions"
-            [disabled]="action.disabled"
-            [ngClass]="action.variant ? 'cc-dropdown-item--' + action.variant : (action.color === 'red' || action.color === 'danger') ? 'cc-dropdown-item--danger' : ''"
-            [style.color]="action.color && !action.variant && action.color !== 'red' && action.color !== 'danger' ? action.color : null"
-            (click)="onActionItemClick(action, $event)">
-            <i *ngIf="action.icon" [class]="action.icon" class="cc-dropdown-item-icon"></i>
-            <span>{{ action.label }}</span>
-        </button>
-        <div class="cc-dropdown-empty" *ngIf="!actions || actions.length === 0">
-            No actions available
-        </div>
-    </div>
-</div>
-
-<!-- Confirmation Modal for Critical Actions -->
-<cc-confirmation-modal 
-    *ngIf="isConfirmModalOpen"
-    [isOpen]="isConfirmModalOpen" 
-    [config]="confirmConfig!"
-    (confirm)="invokePendingAction()"
-    (close)="closeConfirmModal()"
-    (cancel)="closeConfirmModal()">
-    <p>{{ confirmMessage }}</p>
-</cc-confirmation-modal>