commons-shared-web-ui 0.0.55 → 0.0.57

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/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>

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

@@ -1,135 +0,0 @@
-.cc-btn-dropdown-container {
-    position: relative;
-    display: inline-block;
-
-    .cc-btn-dropdown-content {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .cc-btn-dropdown-icon {
-        font-size: 0.85em;
-        margin-left: 2px;
-    }
-}
-
-.cc-dropdown-menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    right: 0; // Align right edge
-    z-index: 1000;
-    min-width: 140px;
-    border-radius: var(--cc-btn-dropdown-radius, 4px);
-    padding: 0.25rem 0;
-    font-family: var(--cc-btn-font-family, 'Inter', sans-serif);
-    font-size: var(--cc-btn-font-size, 0.875rem);
-    
-    /* ------------------------------ */
-    /* Light vs Dark Global Container */
-    /* ------------------------------ */
-    &--light {
-        background-color: var(--cc-btn-dropdown-light-bg, #ffffff);
-        border: var(--cc-btn-dropdown-border-light, 1px solid #e0e0e0);
-        box-shadow: var(--cc-btn-dropdown-shadow-light, 0 4px 6px rgba(0, 0, 0, 0.1));
-        
-        .cc-dropdown-item {
-            color: var(--cc-btn-dropdown-light-item-color, #333333);
-            &:hover:not(:disabled) {
-                background-color: var(--cc-btn-dropdown-light-item-hover-bg, #f5f5f5);
-            }
-        }
-        
-        .cc-dropdown-empty {
-            color: #888888;
-        }
-    }
-
-    &--dark {
-        background-color: var(--cc-btn-dropdown-dark-bg, #1a1a1a);
-        border: var(--cc-btn-dropdown-border-dark, 1px solid #444444);
-        box-shadow: var(--cc-btn-dropdown-shadow-dark, 0 4px 6px rgba(0, 0, 0, 0.5));
-        
-        .cc-dropdown-item {
-            color: var(--cc-btn-dropdown-dark-item-color, #ffffff);
-            &:hover:not(:disabled) {
-                background-color: var(--cc-btn-dropdown-dark-item-hover-bg, #2d2d2d);
-            }
-        }
-        
-        .cc-dropdown-empty {
-            color: #bbbbbb;
-        }
-    }
-
-    /* ------------------------------ */
-    /* Shared Item Styles             */
-    /* ------------------------------ */
-    .cc-dropdown-empty {
-        padding: 0.5rem 1rem;
-        font-style: italic;
-    }
-
-    .cc-dropdown-item {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        padding: 0.5rem 1rem;
-        border: none;
-        background: transparent;
-        text-align: left;
-        cursor: pointer;
-        transition: background-color 0.2s, color 0.2s;
-
-        &:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .cc-dropdown-item-icon {
-            margin-right: 0.5rem;
-            width: 1rem;
-            text-align: center;
-        }
-
-        /* ------------------------------ */
-        /* Explicit Action Variants       */
-        /* ------------------------------ */
-        &--primary {
-            background-color: var(--cc-btn-dropdown-primary-bg, #262125);
-            color: var(--cc-btn-dropdown-primary-color, #ffffff);
-            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-primary-hover, #3d353b); }
-        }
-
-        &--warning {
-            background-color: var(--cc-btn-dropdown-warning-bg, #F9C80E);
-            color: var(--cc-btn-dropdown-warning-color, #000000);
-            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-warning-hover, #ebd573); }
-        }
-
-        &--danger {
-            background-color: var(--cc-btn-dropdown-danger-bg, #E63E30);
-            color: var(--cc-btn-dropdown-danger-color, #ffffff);
-            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-danger-hover, #c93528); }
-        }
-
-        &--success {
-            background-color: var(--cc-btn-dropdown-success-bg, #16A34A);
-            color: var(--cc-btn-dropdown-success-color, #ffffff);
-            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-success-hover, #148f41); }
-        }
-
-        &--secondary {
-            background-color: var(--cc-btn-dropdown-secondary-bg, #E8EAED);
-            color: var(--cc-btn-dropdown-secondary-color, #000000);
-            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-secondary-hover, #d1d5db); }
-        }
-        
-        &--outline {
-            background-color: var(--cc-btn-dropdown-outline-bg, transparent);
-            color: var(--cc-btn-dropdown-outline-color, #000000);
-            border: 1px solid var(--cc-btn-dropdown-outline-color, #000000); // Usually actions don't have borders, but adding for completeness
-            &:hover:not(:disabled) { background-color: var(--cc-btn-dropdown-outline-hover, rgba(0,0,0,0.05)); }
-        }
-    }
-}

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

@@ -1,160 +0,0 @@
-import {
-    Component,
-    Input,
-    Output,
-    EventEmitter,
-    HostListener,
-    ElementRef
-} from '@angular/core';
-import { Router } from '@angular/router';
-import { HttpClient } from '@angular/common/http';
-import { DropdownAction } from '../../button-dropdown.models';
-import { ButtonVariant } from '../../../button/button.models';
-import { ConfirmationModalConfig } from '../../../confirmation-modal/confirmation-modal.models';
-
-@Component({
-    selector: 'lib-button-dropdown',
-    templateUrl: './button-dropdown.component.html',
-    styleUrls: ['./button-dropdown.component.scss'],
-    standalone: false
-})
-export class ButtonDropdownComponent {
-    @Input() label: string = 'Actions';
-    @Input() variant: ButtonVariant = 'primary';
-    @Input() menuTheme: 'light' | 'dark' = 'light';
-    @Input() icon: string = 'fa fa-chevron-down';
-    @Input() actions: DropdownAction[] = [];
-    @Input() data: any = null;
-    @Input() disabled: boolean = false;
-
-    @Output() apiActionStart = new EventEmitter<DropdownAction>();
-    @Output() apiActionSuccess = new EventEmitter<{ action: DropdownAction, response: any }>();
-    @Output() apiActionError = new EventEmitter<{ action: DropdownAction, error: any }>();
-    @Output() actionClick = new EventEmitter<{ action: DropdownAction, data: any }>();
-
-    isOpen = false;
-    isConfirmModalOpen = false;
-    pendingAction: DropdownAction | null = null;
-    confirmConfig: ConfirmationModalConfig | null = null;
-    confirmMessage: string = '';
-
-    constructor(
-        private elementRef: ElementRef,
-        private router: Router,
-        private http: HttpClient
-    ) {}
-
-    @HostListener('document:click', ['$event'])
-    onClickOutside(event: Event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-
-    toggleDropdown(event: Event) {
-        if (this.disabled) return;
-        event.stopPropagation();
-        this.isOpen = !this.isOpen;
-    }
-
-    onActionItemClick(action: DropdownAction, event: Event) {
-        event.stopPropagation();
-        this.isOpen = false;
-
-        if (action.disabled) return;
-
-        if (action.confirmationNeeded) {
-            this.pendingAction = action;
-            
-            // Smart inference for "delete" actions
-            const isDelete = action.apiMethod === 'DELETE' || 
-                             action.variant === 'danger' || 
-                             action.color === 'red' || 
-                             action.label.toLowerCase().includes('delete');
-            
-            // Apply intelligent fallbacks based on action intent
-            this.confirmMessage = action.confirmationMessage || (isDelete 
-                ? 'Are you sure you want to delete this item? This action cannot be undone.' 
-                : 'Are you sure you want to proceed?');
-                
-            this.confirmConfig = {
-                title: action.confirmationTitle || (isDelete ? 'Confirm Deletion' : 'Please Confirm'),
-                icon: { type: 'material', value: 'warning', color: isDelete ? '#E63E30' : '#F9C80E' },
-                confirmButton: {
-                    label: isDelete ? 'Delete' : 'Confirm',
-                    type: isDelete ? 'danger' : 'primary'
-                },
-                cancelButton: {
-                    show: true,
-                    label: 'Cancel'
-                }
-            };
-            this.isConfirmModalOpen = true;
-        } else {
-            this.executeAction(action);
-        }
-    }
-
-    private executeAction(action: DropdownAction) {
-        this.actionClick.emit({ action, data: this.data });
-
-        if (action.type === 'callback' && action.callback) {
-            action.callback(this.data);
-        } else if (action.type === 'route' && action.route) {
-            this.navigateToRoute(action.route, this.data);
-        } else if (action.type === 'api' && action.apiUrl) {
-            this.executeApiCall(action);
-        }
-    }
-
-    private navigateToRoute(routePattern: string, rowData: any) {
-        let finalRoute = routePattern;
-        // Simple parameter replacement like smart-table: /users/:id -> /users/123
-        if (rowData) {
-            Object.keys(rowData).forEach(key => {
-                finalRoute = finalRoute.replace(`:${key}`, rowData[key]);
-            });
-        }
-        this.router.navigate([finalRoute]);
-    }
-
-    private executeApiCall(action: DropdownAction) {
-        this.apiActionStart.emit(action);
-        
-        let url = action.apiUrl!;
-        if (this.data) {
-            Object.keys(this.data).forEach(key => {
-                url = url.replace(`:${key}`, this.data[key]);
-            });
-        }
-
-        const method = (action.apiMethod || 'GET').toUpperCase();
-        let request$;
-
-        if (method === 'GET') request$ = this.http.get(url);
-        else if (method === 'POST') request$ = this.http.post(url, action.apiPayload || this.data);
-        else if (method === 'PUT') request$ = this.http.put(url, action.apiPayload || this.data);
-        else if (method === 'DELETE') request$ = this.http.delete(url);
-        else if (method === 'PATCH') request$ = this.http.patch(url, action.apiPayload || this.data);
-        else request$ = this.http.get(url); // fallback
-
-        request$.subscribe({
-            next: (res) => this.apiActionSuccess.emit({ action, response: res }),
-            error: (err) => this.apiActionError.emit({ action, error: err })
-        });
-    }
-
-    invokePendingAction() {
-        if (this.pendingAction) {
-            this.executeAction(this.pendingAction);
-        }
-        this.closeConfirmModal();
-    }
-
-    closeConfirmModal() {
-        this.isConfirmModalOpen = false;
-        this.pendingAction = null;
-        this.confirmConfig = null;
-        this.confirmMessage = '';
-    }
-}