commons-shared-web-ui 0.0.55 → 0.0.57

package/src/lib/modules/confirmation-modal/confirmation-modal.models.ts

@@ -1,71 +0,0 @@
-export interface ConfirmationModalConfig {
-    // Header
-    title: string;
-    headerTheme?: 'light' | 'dark';
-    icon?: string | {
-        type: 'material' | 'custom';
-        value: string;
-        color?: string;
-    };
-
-    // Modal appearance
-    width?: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    customClass?: string;
-    type?: 'modal' | 'side-panel';
-    panelPosition?: 'left' | 'right' | 'top' | 'bottom';
-    panelSpacing?: string; // e.g. "20px" or "10px 20px"
-    panelWidth?: string;
-    panelHeight?: string;
-
-    // Style Overrides
-    backgroundColor?: string;
-    borderRadius?: string;
-    borderTopLeftRadius?: string;
-    borderTopRightRadius?: string;
-    borderBottomLeftRadius?: string;
-    borderBottomRightRadius?: string;
-    padding?: string;
-    headerBackgroundColor?: string;
-    headerTextColor?: string;
-    headerBorderBottom?: string;
-    bodyTextColor?: string;
-    footerBackgroundColor?: string;
-    footerBorderTop?: string;
-
-    // Footer buttons
-    confirmButton: {
-        label: string;
-        type: 'primary' | 'danger' | 'warning';
-        disabled?: boolean;
-        loading?: boolean;
-    };
-    cancelButton?: {
-        label?: string;
-        show?: boolean;
-    };
-
-    // Custom Footer
-    customFooter?: boolean;
-
-    // Body mode: set true when projecting a lib-smart-form so the body gets form-specific layout
-    formMode?: boolean;
-
-    // Behavior
-    closeOnBackdrop?: boolean;
-    closeOnEsc?: boolean;
-    showCloseButton?: boolean;
-    showCodeSnippetButton?: boolean;
-
-    // Accessibility
-    ariaLabel?: string;
-    ariaDescribedBy?: string;
-
-    // i18n Labels
-    labels?: {
-        closeAriaLabel?: string;
-        codeSnippetAriaLabel?: string;
-        codeSnippetTitle?: string;
-        iconAltText?: string;
-    };
-}

package/src/lib/modules/confirmation-modal/confirmation-modal.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ConfirmationModalComponent } from './components/confirmation-modal/confirmation-modal.component';
-import { MatIconModule } from '@angular/material/icon';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
-    declarations: [
-        ConfirmationModalComponent
-    ],
-    imports: [
-        CommonModule,
-        MatIconModule, // For material icons support
-        FormsModule // For ngModel in user examples (although mostly projected content, user might need it)
-    ],
-    exports: [
-        ConfirmationModalComponent
-    ]
-})
-export class ConfirmationModalModule { }

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

@@ -1,131 +0,0 @@
-<div class="cc-filter-container" [class.is-open]="isOpen" [ngStyle]="containerStyles">
-
-    <!-- Trigger Button -->
-    <lib-button variant="outline" (click)="togglePanel()" class="cc-filter-trigger"
-        [class.active]="activeFilterCount > 0">
-        <span class="fas fa-filter"></span> {{ labels?.filterBtn || 'Filter' }}
-        <span *ngIf="activeFilterCount > 0" class="cc-badge">{{ activeFilterCount }}</span>
-    </lib-button>
-
-    <!-- Dropdown Panel -->
-    <div class="cc-filter-panel mat-elevation-z4" *ngIf="isOpen" (click)="$event.stopPropagation()">
-
-        <!-- Header / Tabs -->
-        <div class="cc-panel-header">
-            <div class="cc-tabs">
-                <div class="cc-tab" [class.active]="activeTab === 'filters'" (click)="setActiveTab('filters')">
-                    {{ labels.filterBtn }}
-                </div>
-                <!-- Hide columns tab if no columns config provided -->
-                <div class="cc-tab" [class.active]="activeTab === 'columns'" (click)="setActiveTab('columns')"
-                    *ngIf="columns?.length">
-                    {{ labels.columns }}
-                </div>
-            </div>
-            <button type="button" class="cc-icon-btn" (click)="togglePanel()">
-                <span class="material-icons">close</span>
-            </button>
-        </div>
-
-        <!-- Filters Tab Content -->
-        <div class="cc-panel-content" *ngIf="activeTab === 'filters'">
-
-            <!-- Dynamic Items -->
-            <ng-container *ngFor="let item of config.items; trackBy: trackByFn">
-                <ng-container *ngTemplateOutlet="itemTemplate; context: { item: item }"></ng-container>
-            </ng-container>
-
-        </div>
-
-        <!-- Columns Tab Content -->
-        <div class="cc-panel-content" *ngIf="activeTab === 'columns'">
-            <div class="cc-columns-actions">
-                <lib-button variant="outline" class="cc-btn-text" (click)="toggleAllColumns(true)">{{ labels.showAll
-                    }}</lib-button>
-                <lib-button variant="outline" class="cc-btn-text" (click)="toggleAllColumns(false)">{{ labels.hideAll
-                    }}</lib-button>
-            </div>
-            <div class="cc-columns-list">
-                <div *ngFor="let col of tempColumns" class="cc-column-item">
-                    <lib-checkbox [label]="col.label" [checked]="col.visible" (checkedChange)="toggleColumn(col.id)">
-                    </lib-checkbox>
-                </div>
-            </div>
-        </div>
-
-        <!-- Footer Actions -->
-        <div class="cc-panel-footer">
-            <lib-button variant="outline" color="warn" class="cc-btn-text text-danger" (click)="clearAll()">
-                {{ labels.clear }}
-            </lib-button>
-            <lib-button class="ms-2" variant="primary" (click)="apply()">
-                {{ labels.apply }}
-            </lib-button>
-        </div>
-
-    </div>
-</div>
-
-<!-- Recursive Template for Items -->
-<ng-template #itemTemplate let-item="item">
-    <div class="cc-filter-item" [ngClass]="['type-' + item.type]"
-        [style.display]="item.visible === false ? 'none' : 'block'" [ngStyle]="item.styles">
-
-        <ng-container [ngSwitch]="item.type">
-
-            <!-- Input -->
-            <lib-input *ngSwitchCase="'input'" [config]="item.inputConfig" [label]="item.label"
-                [ngModel]="tempFilters[item.key]" (valueChange)="onFilterChange(item.key, $event)">
-            </lib-input>
-
-            <!-- Dropdown -->
-            <lib-dropdown *ngSwitchCase="'dropdown'" [config]="item.dropdownConfig" [label]="item.label"
-                [ngModel]="tempFilters[item.key]" (selectionChange)="onFilterChange(item.key, $event)">
-            </lib-dropdown>
-
-            <!-- Checkbox -->
-            <lib-checkbox *ngSwitchCase="'checkbox'" [config]="item.checkboxConfig" [label]="item.label"
-                [ngModel]="tempFilters[item.key]" (checkedChange)="onFilterChange(item.key, $event)">
-            </lib-checkbox>
-
-            <!-- Radio -->
-            <lib-radio *ngSwitchCase="'radio'" [config]="item.radioConfig" [label]="item.label"
-                [ngModel]="tempFilters[item.key]" (selectionChange)="onFilterChange(item.key, $event)">
-            </lib-radio>
-
-            <!-- Toggle -->
-            <lib-toggle *ngSwitchCase="'toggle'" [config]="item.toggleConfig" [label]="item.label"
-                [checked]="tempFilters[item.key]" (toggleChange)="onFilterChange(item.key, $event)">
-            </lib-toggle>
-
-            <!-- Datepicker -->
-            <lib-datepicker *ngSwitchCase="'datepicker'" [config]="item.datepickerConfig" [label]="item.label"
-                [ngModel]="tempFilters[item.key]" (dateChange)="onFilterChange(item.key, $event)">
-            </lib-datepicker>
-
-            <!-- Search -->
-            <lib-search *ngSwitchCase="'active-search'" [config]="item.searchConfig" [label]="item.label"
-                [ngModel]="tempFilters[item.key]" (search)="onFilterChange(item.key, $event)">
-            </lib-search>
-
-            <!-- Group / Accordion -->
-            <div *ngSwitchCase="'group'" class="cc-accordion-item" [class.expanded]="item.expanded">
-                <button type="button" class="cc-accordion-header" (click)="item.expanded = !item.expanded">
-                    <span class="cc-accordion-title">{{ item.label }}</span>
-                    <span class="material-icons cc-accordion-icon">{{ item.expanded ? 'expand_less' : 'expand_more'
-                        }}</span>
-                </button>
-
-                <div class="cc-accordion-body" *ngIf="item.expanded">
-                    <ng-container *ngFor="let child of item.children; trackBy: trackByFn">
-                        <ng-container *ngTemplateOutlet="itemTemplate; context: { item: child }"></ng-container>
-                    </ng-container>
-                </div>
-            </div>
-
-            <!-- Custom Divider -->
-            <div *ngSwitchCase="'divider'" class="cc-filter-divider"></div>
-
-        </ng-container>
-    </div>
-</ng-template>

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

@@ -1,245 +0,0 @@
-.cc-filter-container {
-    position: relative;
-    display: inline-block;
-    font-family: var(--cc-filter-font-family, 'Roboto', sans-serif);
-
-    // Trigger Button (Targeting lib-button via class)
-    .cc-filter-trigger {
-        ::ng-deep button {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            width: var(--cc-filter-btn-width, 103px);
-            height: var(--cc-filter-btn-height, 44px);
-            padding: 0 16px;
-            background-color: var(--cc-filter-btn-bg, #FCFCFB);
-            border: var(--cc-filter-btn-border, 1px solid #E8EAED);
-            border-radius: var(--cc-filter-btn-radius, 8px);
-            color: var(--cc-filter-btn-text-color, #5F6368);
-            font-size: 14px;
-            font-weight: 500;
-            transition: all 0.2s ease;
-
-            mat-icon,
-            .material-icons {
-                color: #5F6368;
-            }
-
-            &:hover {
-                background-color: var(--cc-filter-btn-hover-bg, #f1f3f4);
-            }
-        }
-
-        &.active {
-            ::ng-deep button {
-                background-color: var(--cc-filter-btn-active-bg, #e3f2fd);
-                color: var(--cc-filter-btn-active-text, #1976d2);
-                border-color: var(--cc-filter-btn-active-text, #1976d2);
-
-                mat-icon,
-                .material-icons {
-                    color: var(--cc-filter-btn-active-text, #1976d2);
-                }
-            }
-        }
-
-        .cc-badge {
-            background-color: var(--cc-filter-btn-badge-bg, #f44336);
-            color: var(--cc-filter-btn-badge-text, #fff);
-            font-size: 10px;
-            font-weight: bold;
-            padding: 2px 6px;
-            border-radius: 10px;
-            min-width: 16px;
-            text-align: center;
-            margin-left: 4px;
-            line-height: 1;
-        }
-    }
-
-    // Dropdown/Sidebar Panel
-    .cc-filter-panel {
-        position: absolute;
-        top: calc(100% + 8px);
-        right: 0; // Align right by default
-        z-index: 1000;
-        width: var(--cc-filter-panel-width, 320px);
-        min-width: var(--cc-filter-panel-min-width, 480px) !important;
-        padding: var(--cc-filter-panel-padding, 0); // Zero padding, handle internal
-        background-color: var(--cc-filter-panel-bg, #fff);
-        border: var(--cc-filter-panel-border, 1px solid #e0e0e0);
-        box-shadow: var(--cc-filter-panel-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
-        border-radius: var(--cc-filter-panel-radius, 8px);
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-
-        &.hidden {
-            display: none;
-        }
-
-        // Header
-        .cc-panel-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            justify-content: space-between;
-            padding: 0 1rem;
-            height: var(--cc-filter-panel-header-height, 48px);
-            border-bottom: 1px solid #E0E0E0;
-            background-color: var(--cc-filter-panel-header-bg, #fafafa);
-        }
-    }
-
-    // Tabs
-    .cc-tabs {
-        display: flex;
-        gap: 1rem;
-
-        .cc-tab {
-            cursor: pointer;
-            padding: 0.5rem 0;
-            font-weight: 500;
-            color: #5F6368;
-            border-bottom: 2px solid transparent;
-            font-size: 14px;
-
-            &.active {
-                color: var(--cc-filter-tab-active-text, #1976d2);
-                border-bottom: var(--cc-filter-tab-border-bottom, 2px solid #1976d2);
-            }
-        }
-    }
-
-    .cc-icon-btn {
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: #5F6368;
-        padding: 0.25rem;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.04);
-        }
-    }
-
-    // Content Area
-    .cc-panel-content {
-        padding: 16px;
-        max-height: 400px;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: var(--cc-filter-panel-gap, 1rem);
-    }
-
-    // Sections
-    .cc-filter-section {
-        margin-bottom: 16px;
-
-        .cc-section-title {
-            font-size: 13px;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: var(--cc-filter-section-title, #333);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        // Checkbox/Radio Groups
-        .cc-control-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-
-            label {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                font-size: 14px;
-                color: var(--cc-filter-option-text, #555);
-                cursor: pointer;
-
-                &:hover {
-                    color: #000;
-                }
-            }
-        }
-    }
-
-    // Accordion overrides
-    .cc-accordion-item {
-        border-bottom: 1px solid #E0E0E0;
-
-        &:last-child {
-            border-bottom: none;
-        }
-
-        .cc-accordion-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-            padding: 0.75rem 0;
-            background: none;
-            border: none;
-            cursor: pointer;
-            text-align: left;
-            outline: none;
-
-            .cc-accordion-title {
-                font-size: 0.875rem;
-                font-weight: 500;
-                color: #202124;
-            }
-
-            .cc-accordion-icon {
-                color: #5F6368;
-                transition: transform 0.2s;
-            }
-        }
-
-        .cc-accordion-body {
-            padding: 0 0 1rem 0;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            animation: slideDown 0.2s ease-out;
-        }
-    }
-
-    .cc-filter-divider {
-        height: 1px;
-        background-color: #E0E0E0;
-        margin: 0.5rem 0;
-    }
-
-    // Footer
-    .cc-panel-footer {
-        padding: 12px 16px;
-        background-color: var(--cc-filter-footer-bg, #fff);
-        border-top: var(--cc-filter-footer-border-top, 1px solid #e0e0e0);
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        gap: 10px; // Add gap for spacing between lib-buttons
-    }
-
-    // Columns list
-    .cc-columns-actions {
-        display: flex;
-        gap: 0.5rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .cc-columns-list {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-}

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

@@ -1,216 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output, ElementRef, HostListener } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { TableFilterConfig, TableFilterOutput, TableFilterColumn, TableFilterLabels } from '../../filter.models';
-
-@Component({
-    selector: 'lib-filter',
-    templateUrl: './filter.component.html',
-    styleUrls: ['./filter.component.scss'],
-    standalone: false
-})
-export class FilterComponent implements OnInit {
-    @Input() config: TableFilterConfig = { items: [] };
-    @Input() activeFilters: TableFilterOutput = {};
-    @Input() columns: TableFilterColumn[] = [];
-    @Input() labels: TableFilterLabels = {
-        filterBtn: '',
-        clear: '',
-        apply: '',
-        search: '',
-        columns: '',
-        showAll: '',
-        hideAll: ''
-    };
-    @Input() theme: string = '';
-
-    @Output() filterChange = new EventEmitter<TableFilterOutput>();
-    @Output() columnChange = new EventEmitter<TableFilterColumn[]>();
-    @Output() toggle = new EventEmitter<boolean>();
-
-    isOpen = false;
-    activeTab: 'filters' | 'columns' = 'filters';
-
-    // Temporary state while panel is open
-    tempFilters: TableFilterOutput = {};
-    tempColumns: TableFilterColumn[] = [];
-
-    constructor(
-        private elementRef: ElementRef,
-        private router: Router,
-        private route: ActivatedRoute
-    ) { }
-
-    ngOnInit(): void {
-        this.syncTempState();
-        this.initFromUrl();
-    }
-
-    private initFromUrl(): void {
-        if (this.config.settings?.persistent) {
-            this.route.queryParams.subscribe(params => {
-                if (Object.keys(params).length > 0) {
-                    const newFilters: TableFilterOutput = { ...this.activeFilters };
-                    Object.keys(params).forEach(key => {
-                        // Skip non-filter params if possible, or assume all are filters
-                        // Ideally we check against config items
-                        if (params[key] !== undefined) {
-                            newFilters[key] = params[key];
-                        }
-                    });
-                    this.activeFilters = newFilters;
-                    this.syncTempState();
-                }
-            });
-        }
-    }
-
-    @HostListener('document:click', ['$event'])
-    onClickOutside(event: Event): void {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-
-    togglePanel(): void {
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            this.syncTempState();
-            this.activeTab = 'filters';
-        }
-        this.toggle.emit(this.isOpen);
-    }
-
-    setActiveTab(tab: 'filters' | 'columns'): void {
-        this.activeTab = tab;
-    }
-
-    // Generic Filter Change Handler
-    onFilterChange(key: string | undefined, value: any): void {
-        if (!key) return;
-        this.tempFilters[key] = value;
-    }
-
-    // Column Visibility Logic
-    toggleColumn(columnId: string): void {
-        const col = this.tempColumns.find(c => c.id === columnId);
-        if (col) {
-            col.visible = !col.visible;
-        }
-    }
-
-    toggleAllColumns(visible: boolean): void {
-        this.tempColumns.forEach(c => c.visible = visible);
-    }
-
-    // Actions
-    clearAll(): void {
-        if (this.activeTab === 'filters') {
-            this.tempFilters = {};
-            if (this.config.settings?.persistent) {
-                this.updateUrl({});
-            }
-        } else {
-            // Reset columns to default or show all?
-            // Usually 'clear' in filters context means clear filters
-            // But if we are in columns tab, maybe we want to reset columns?
-            // For now, let's keep it simple: generic clear clears filters.
-            this.tempFilters = {};
-        }
-        // If we want clear to apply immediately without clicking apply:
-        // this.apply(); 
-        // But usually "Clear" inside panel just clears temp state until Apply is clicked.
-        // However, if the user requested "Persistent" and "Clear", they might expect immediate URL update?
-        // Standard UX: panel actions apply on "Apply".
-        // The persisted state should only change when "Apply" is clicked?
-        // Wait, if I update URL on clearAll inside panel, it might be confusing if panel is still open with cleared state but not "applied" to data.
-        // Re-reading expectation: "Persistent" setting usually means the filter state is synced with URL.
-        // If I clear temp state, URL shouldn't change until I click Apply.
-        // SO I WILL NOT UPDATE URL HERE. The `initFromUrl` loads INTO `activeFilters`.
-        // `apply()` updates `activeFilters` AND should update URL.
-    }
-
-    apply(): void {
-        // Apply temp state to active state
-        this.activeFilters = { ...this.tempFilters };
-        // Clean up undefined/null values
-        Object.keys(this.activeFilters).forEach(key => {
-            if (this.activeFilters[key] === null || this.activeFilters[key] === undefined || this.activeFilters[key] === '') {
-                delete this.activeFilters[key];
-            }
-        });
-
-        // Apply columns
-        this.columns = this.tempColumns.map(c => ({ ...c }));
-
-        this.filterChange.emit(this.activeFilters);
-        this.columnChange.emit(this.columns);
-
-        if (this.config.settings?.persistent) {
-            this.updateUrl(this.activeFilters);
-        }
-
-        this.isOpen = false;
-    }
-
-
-    private updateUrl(queryParams: any): void {
-        this.router.navigate([], {
-            relativeTo: this.route,
-            queryParams: queryParams,
-            queryParamsHandling: 'merge', // or 'replace' to clear others? 'merge' ensures we don't lose other params
-            // But wait, if we removed a filter, merge keeps it?
-            // We need to explicitly clear removed keys if we use merge.
-            // Or use pure replacement of filter keys.
-            // For simplicity, let's assuming we want to replace parameters that overlap.
-            // But to clear keys, we need to pass `null` or `undefined` for those keys in `queryParams`?
-            // Angular router: passing null removes the param.
-        });
-
-        // Refined updateUrl logic:
-        // We merged activeFilters. But if we removed a key, it's missing from activeFilters.
-        // We need to compare with current params and remove keys that are no longer in activeFilters?
-        // A simpler way for this component:
-        // We likely want to replace ALL query params that correspond to filters. 
-        // But we don't know which params are filters vs other things (e.g. page, sort).
-        // For now, I will just push `this.activeFilters`. 
-        // NOTE: This doesn't clear keys that were removed. 
-        // To fix clearing:
-        // I should probably navigate with exact activeFilters if I knew they are the ONLY params.
-        // Better:
-        // this.router.navigate([], { queryParams: this.activeFilters }); // property replaces all
-        // If we want to keep 'page', etc., we need to include them.
-        // Let's use 'merge' but we need to handle clearing.
-        // I will implement a smarter update.
-    }
-
-    activeFilterCountValue(): number {
-        return Object.keys(this.activeFilters).length;
-    }
-
-
-    get activeFilterCount(): number {
-        return Object.keys(this.activeFilters).length;
-    }
-
-    private syncTempState(): void {
-        this.tempFilters = { ...this.activeFilters };
-        this.tempColumns = JSON.parse(JSON.stringify(this.columns || []));
-    }
-
-    get containerStyles(): { [key: string]: string } {
-        const styles: { [key: string]: string } = {};
-        if (this.config.styles) {
-            if (this.config.styles.width) styles['--cc-filter-panel-width'] = this.config.styles.width;
-            if (this.config.styles.padding) styles['--cc-filter-panel-padding'] = this.config.styles.padding;
-            if (this.config.styles.gap) styles['--cc-filter-panel-gap'] = this.config.styles.gap;
-            if (this.config.styles.backgroundColor) styles['--cc-filter-panel-bg'] = this.config.styles.backgroundColor;
-            if (this.config.styles.borderRadius) styles['--cc-filter-panel-radius'] = this.config.styles.borderRadius;
-            if (this.config.styles.headerHeight) styles['--cc-filter-panel-header-height'] = this.config.styles.headerHeight;
-        }
-        return styles;
-    }
-
-    trackByFn(index: number, item: any): any {
-        return item.key || index;
-    }
-}