commons-shared-web-ui 0.0.54 → 0.0.55

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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,131 @@
+<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

@@ -0,0 +1,245 @@
+.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

@@ -0,0 +1,216 @@
+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;
+    }
+}