commons-shared-web-ui 0.0.51 → 0.0.53

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

@@ -0,0 +1,88 @@
+import { InputConfig } from '../form-components/components/input/input.models';
+import { DropdownConfig } from '../form-components/components/dropdown/dropdown.models';
+import { CheckboxConfig } from '../form-components/components/checkbox/checkbox.models';
+import { RadioConfig } from '../form-components/components/radio/radio.models';
+import { ToggleConfig } from '../form-components/components/toggle/toggle.models';
+import { DatePickerConfig } from '../form-components/components/datepicker/datepicker.models';
+import { FilterSearchConfig } from '../form-components/components/search/search.models';
+import { FilterItemType } from '../filter-sidebar/filter-sidebar.models';
+
+// Reuse the same item structure as sidebar for consistency
+export interface TableFilterItem {
+    key?: string;
+    type: FilterItemType;
+    label?: string;
+    visible?: boolean;
+
+    // Component Configs
+    inputConfig?: InputConfig;
+    dropdownConfig?: DropdownConfig;
+    checkboxConfig?: CheckboxConfig;
+    radioConfig?: RadioConfig;
+    toggleConfig?: ToggleConfig;
+    datepickerConfig?: DatePickerConfig;
+    searchConfig?: FilterSearchConfig;
+
+    // Layout / Grouping
+    children?: TableFilterItem[];
+    expanded?: boolean;
+
+    // Customization
+    styles?: { [key: string]: string };
+}
+
+export interface TableFilterConfig {
+    items: TableFilterItem[];
+
+    // Global Filter Styling
+    styles?: {
+        width?: string;
+        padding?: string;
+        gap?: string;
+        backgroundColor?: string;
+        borderRadius?: string;
+        headerHeight?: string;
+    };
+
+    columns?: TableFilterColumn[];
+
+    settings?: {
+        persistent?: boolean;
+        collapsible?: boolean;
+    };
+
+    // Actions visibility
+    actions?: {
+        clear?: { visible?: boolean; label?: string; };
+        apply?: { visible?: boolean; label?: string; };
+    }
+}
+
+export interface TableFilterColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+    filterable?: boolean;
+    filterOptions?: any[]; // Legacy or simple options
+}
+
+export interface TableFilterLabels {
+    filterBtn: string;
+    clear: string;
+    apply: string;
+    search: string;
+    columns: string; // Tab label
+    showAll: string;
+    hideAll: string;
+    items?: string;
+}
+
+export interface TableFilterOutput {
+    [key: string]: any;
+}
+
+export interface TableFilterChangeEvent {
+    key: string;
+    value: any;
+    allFilters: TableFilterOutput;
+}

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonModule } from '../button/button.module';
+import { FormComponentsModule } from '../form-components/form-components.module';
+import { FilterComponent } from './components/filter/filter.component';
+
+@NgModule({
+    declarations: [
+        FilterComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonModule,
+        FormComponentsModule
+    ],
+    exports: [
+        FilterComponent
+    ]
+})
+export class FilterModule { }

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

@@ -0,0 +1,112 @@
+<div class="cc-filter-sidebar" [ngStyle]="sidebarStyles" [class.collapsed]="isCollapsed">
+
+    <!-- Header -->
+    <div class="cc-filter-header" *ngIf="config.header?.visible !== false">
+        <div class="cc-header-content">
+            <span class="cc-header-title" *ngIf="config.header?.title">
+                <span *ngIf="config.header?.icon" [class]="config.header?.icon" class="cc-header-icon material-icons">
+                    <!-- {{config.header?.icon }} -->
+                </span>
+                {{ config.header?.title }}
+            </span>
+            <ng-content select="[header-actions]"></ng-content>
+        </div>
+        <button type="button" *ngIf="config.settings?.collapsible" (click)="toggleCollapse()" class="cc-icon-btn"
+            [attr.aria-label]="isCollapsed ? config.labels?.expandAriaLabel : config.labels?.collapseAriaLabel">
+            <span class="material-icons">{{ isCollapsed ? 'menu_open' : 'menu' }}</span>
+        </button>
+        <button type="button" *ngIf="config.header?.showClose && !isCollapsed" (click)="onClose()"
+            class="cc-icon-btn cc-close-btn" [attr.aria-label]="config.labels?.closeAriaLabel">
+            <span class="material-icons">close</span>
+        </button>
+        <!-- Code snippet debug (optional) -->
+        <button type="button" *ngIf="config.settings?.showCodeSnippet" (click)="onShowCodeSnippet()" class="cc-icon-btn"
+            [attr.aria-label]="config.labels?.codeSnippetAriaLabel">
+            <span class="material-icons">code</span>
+        </button>
+    </div>
+
+    <!-- Content (Scrollable) -->
+    <div class="cc-filter-content" [class.hidden]="isCollapsed">
+        <ng-container *ngFor="let item of config.items; trackBy: trackByFn">
+            <ng-container *ngTemplateOutlet="itemTemplate; context: { item: item }"></ng-container>
+        </ng-container>
+    </div>
+
+    <!-- Footer -->
+    <div class="cc-filter-footer" *ngIf="config.footer?.visible !== false && !isCollapsed">
+        <lib-button variant="outline" color="warn" class="cc-btn-clear"
+            *ngIf="config.footer?.clearButton?.visible !== false" (click)="clearFilters()">
+            {{ config.footer?.clearButton?.label }}
+        </lib-button>
+        <lib-button variant="primary" color="warn" class="cc-btn-apply"
+            *ngIf="config.footer?.applyButton?.visible !== false" [disabled]="config.footer?.applyButton?.disabled ?? false"
+            (click)="applyFilters()">
+            {{ config.footer?.applyButton?.label }}
+        </lib-button>
+    </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]="filters[item.key]" (valueChange)="onValueChange(item.key, $event)">
+            </lib-input>
+
+            <!-- Dropdown -->
+            <lib-dropdown *ngSwitchCase="'dropdown'" [config]="item.dropdownConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (selectionChange)="onValueChange(item.key, $event)">
+            </lib-dropdown>
+
+            <!-- Checkbox -->
+            <lib-checkbox *ngSwitchCase="'checkbox'" [config]="item.checkboxConfig" [label]="item.label"
+                [checked]="!!filters[item.key]" (checkedChange)="onValueChange(item.key, $event)">
+            </lib-checkbox>
+
+            <!-- Radio -->
+            <lib-radio *ngSwitchCase="'radio'" [config]="item.radioConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (selectionChange)="onValueChange(item.key, $event)">
+            </lib-radio>
+
+            <!-- Toggle -->
+            <lib-toggle *ngSwitchCase="'toggle'" [config]="item.toggleConfig" [label]="item.label"
+                [checked]="filters[item.key]" (toggleChange)="onValueChange(item.key, $event)">
+            </lib-toggle>
+
+            <!-- Datepicker -->
+            <lib-datepicker *ngSwitchCase="'datepicker'" [config]="item.datepickerConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (dateChange)="onValueChange(item.key, $event)">
+            </lib-datepicker>
+
+            <!-- Search -->
+            <lib-search *ngSwitchCase="'active-search'" [config]="item.searchConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (search)="onValueChange(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-sidebar/components/filter-sidebar/filter-sidebar.component.scss

@@ -0,0 +1,186 @@
+@use '../../filter-sidebar.theme' as theme;
+
+:host {
+    display: block;
+    height: 100%;
+
+    @include theme.filter-sidebar-theme();
+}
+
+.cc-filter-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: var(--cc-filter-sidebar-width, 280px);
+    background-color: var(--cc-filter-sidebar-bg, #FEFEFE);
+    padding: var(--cc-filter-sidebar-padding, 1.5rem);
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--cc-filter-sidebar-border-radius, 0);
+    transition: width 0.3s ease, padding 0.3s ease;
+
+    &.collapsed {
+        width: 60px !important;
+        padding: 1.5rem 0.5rem;
+
+        .cc-filter-header {
+            justify-content: center;
+            margin-bottom: 0;
+
+            .cc-header-content {
+                display: none;
+            }
+
+            .cc-close-btn {
+                display: none;
+            }
+        }
+
+        .cc-filter-content {
+            display: none;
+        }
+    }
+}
+
+.cc-filter-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: var(--cc-filter-header-height, 3rem);
+    margin-bottom: 1rem;
+    flex-shrink: 0;
+
+    .cc-header-content {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex: 1;
+    }
+
+    .cc-header-title {
+        font-size: var(--cc-filter-header-title-size, 1.125rem);
+        font-weight: var(--cc-filter-header-title-weight, 500);
+        color: var(--cc-filter-header-title-color, #202124);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+}
+
+.cc-filter-content {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cc-filter-sidebar-gap, 1.5rem);
+    padding-right: 0.25rem; // Space for scrollbar
+
+    // Custom Scrollbar
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #E0E0E0;
+        border-radius: 3px;
+    }
+}
+
+.cc-filter-item {}
+
+// 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;
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.cc-group-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.cc-filter-divider {
+    height: 1px;
+    background-color: #E0E0E0;
+    margin: 0.5rem 0;
+}
+
+.cc-filter-footer {
+    display: flex;
+    gap: var(--cc-filter-footer-gap, 1rem);
+    padding: var(--cc-filter-footer-padding, 1rem 0 0 0);
+    margin-top: auto;
+    flex-shrink: 0;
+
+    button {
+        flex: 1;
+    }
+}
+
+.cc-icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #5F6368;
+    padding: 0.5rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+    }
+}
+
+.cc-close-btn {
+    margin-right: -0.5rem;
+}

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

@@ -0,0 +1,163 @@
+import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FilterItem } from '../../filter-sidebar.models';
+
+@Component({
+    selector: 'lib-filter-sidebar',
+    templateUrl: './filter-sidebar.component.html',
+    styleUrls: ['./filter-sidebar.component.scss'],
+    standalone: false,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FilterSidebarComponent),
+            multi: true
+        }
+    ]
+})
+export class FilterSidebarComponent implements OnInit, ControlValueAccessor {
+    @Input() config!: FilterSidebarConfig;
+    @Input() initialFilters: FilterSidebarOutput = {};
+
+    @Output() filterChange = new EventEmitter<FilterSidebarChangeEvent>();
+    @Output() filterApply = new EventEmitter<FilterSidebarOutput>();
+    @Output() filterClear = new EventEmitter<void>();
+    @Output() showCodeSnippet = new EventEmitter<void>();
+    @Output() close = new EventEmitter<void>();
+
+    filters: FilterSidebarOutput = {};
+
+    // ControlValueAccessor callbacks
+    onChange: any = () => { };
+    onTouched: any = () => { };
+
+    isCollapsed = false;
+
+    toggleCollapse(): void {
+        this.isCollapsed = !this.isCollapsed;
+    }
+
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute
+    ) { }
+
+    ngOnInit(): void {
+        if (this.initialFilters) {
+            this.filters = { ...this.initialFilters };
+        }
+
+        // Initialize from URL query params if persistent
+        if (this.config.settings?.persistent !== false) {
+            this.route.queryParams.subscribe(params => {
+                if (Object.keys(params).length > 0) {
+                    // Start with existing filters to preserve defaults not in URL
+                    const newFilters = { ...this.filters };
+
+                    Object.keys(params).forEach(key => {
+                        // Try to parse arrays or numbers if possible, otherwise string
+                        // This is a naive implementation, ideally config should dictate type
+                        const val = params[key];
+                        // If comma separated and looked like array? For now keep simple
+                        newFilters[key] = val;
+                    });
+
+                    this.filters = newFilters;
+                }
+            });
+        }
+    }
+
+    // ControlValueAccessor Implementation
+    writeValue(value: any): void {
+        if (value) {
+            this.filters = { ...value };
+        } else {
+            this.filters = {};
+        }
+    }
+
+    registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this.onTouched = fn;
+    }
+
+    // Component Logic
+    onValueChange(key: string | undefined, value: any): void {
+        if (!key) return;
+
+        this.filters[key] = value;
+        this.notifyChanges(key, value);
+    }
+
+    private notifyChanges(key: string, value: any): void {
+        this.onChange(this.filters);
+
+        // Update URL if persistent
+        if (this.config.settings?.persistent !== false) {
+            this.updateUrl();
+        }
+
+        this.filterChange.emit({
+            key,
+            value,
+            allFilters: this.filters
+        });
+    }
+
+    private updateUrl(): void {
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: this.filters,
+            queryParamsHandling: 'merge',
+            replaceUrl: true
+        });
+    }
+
+    applyFilters(): void {
+        this.filterApply.emit(this.filters);
+    }
+
+    clearFilters(): void {
+        this.filters = {};
+        this.onChange(this.filters);
+
+        if (this.config.settings?.persistent !== false) {
+            this.router.navigate([], {
+                relativeTo: this.route,
+                queryParams: {},
+            });
+        }
+
+        this.filterClear.emit();
+    }
+
+    onClose(): void {
+        this.close.emit();
+    }
+
+    onShowCodeSnippet(): void {
+        this.showCodeSnippet.emit();
+    }
+
+    get sidebarStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config?.styles) {
+            if (this.config.styles.width) styles['--cc-filter-sidebar-width'] = this.config.styles.width;
+            if (this.config.styles.padding) styles['--cc-filter-sidebar-padding'] = this.config.styles.padding;
+            if (this.config.styles.gap) styles['--cc-filter-sidebar-gap'] = this.config.styles.gap;
+            if (this.config.styles.backgroundColor) styles['--cc-filter-sidebar-bg'] = this.config.styles.backgroundColor;
+            if (this.config.styles.headerHeight) styles['--cc-filter-header-height'] = this.config.styles.headerHeight;
+            if (this.config.styles.borderRadius) styles['--cc-filter-sidebar-border-radius'] = this.config.styles.borderRadius;
+        }
+        return styles;
+    }
+
+    trackByFn(index: number, item: FilterItem): any {
+        return item.key || index;
+    }
+}

package/src/lib/modules/filter-sidebar/filter-sidebar.models.ts

@@ -0,0 +1,95 @@
+import { InputConfig } from '../form-components/components/input/input.models';
+import { DropdownConfig } from '../form-components/components/dropdown/dropdown.models';
+import { CheckboxConfig } from '../form-components/components/checkbox/checkbox.models';
+import { RadioConfig } from '../form-components/components/radio/radio.models';
+import { ToggleConfig } from '../form-components/components/toggle/toggle.models';
+import { DatePickerConfig } from '../form-components/components/datepicker/datepicker.models';
+import { FilterSearchConfig } from '../form-components/components/search/search.models';
+
+export type FilterItemType = 'input' | 'dropdown' | 'checkbox' | 'radio' | 'toggle' | 'datepicker' | 'active-search' | 'group' | 'custom' | 'divider';
+
+export interface FilterItem {
+    key?: string; // Optional for dividers or purely layout groups
+    type: FilterItemType;
+    label?: string;
+    visible?: boolean;
+
+    // Component Configs
+    inputConfig?: InputConfig;
+    dropdownConfig?: DropdownConfig;
+    checkboxConfig?: CheckboxConfig;
+    radioConfig?: RadioConfig;
+    toggleConfig?: ToggleConfig;
+    datepickerConfig?: DatePickerConfig;
+    searchConfig?: FilterSearchConfig;
+
+    // Layout / Grouping
+    children?: FilterItem[]; // For groups/accordions
+    expanded?: boolean; // For accordions
+
+    // Customization
+    styles?: { [key: string]: string }; // Container styles override
+}
+
+export interface FilterSidebarConfig {
+    items: FilterItem[];
+
+    // Global Sidebar Styling
+    styles?: {
+        width?: string;
+        padding?: string;
+        gap?: string;
+        backgroundColor?: string;
+        headerHeight?: string;
+        borderRadius?: string;
+    };
+
+    header?: {
+        title?: string;
+        icon?: string;
+        visible?: boolean;
+        showClose?: boolean;
+    };
+
+    footer?: {
+        visible?: boolean;
+        applyButton?: {
+            label?: string;
+            visible?: boolean;
+            disabled?: boolean;
+        };
+        clearButton?: {
+            label?: string;
+            visible?: boolean;
+        };
+    };
+
+    settings?: {
+        collapsible?: boolean; // If the whole sidebar is collapsible
+        persistent?: boolean; // URL sync
+        showCodeSnippet?: boolean;
+    };
+
+    // i18n Labels
+    labels?: {
+        collapseAriaLabel?: string;
+        expandAriaLabel?: string;
+        closeAriaLabel?: string;
+        codeSnippetAriaLabel?: string;
+    };
+}
+
+export interface FilterSidebarOutput {
+    [key: string]: any;
+}
+
+export interface FilterSidebarChangeEvent {
+    key: string;
+    value: any;
+    allFilters: FilterSidebarOutput;
+}
+
+// Backward compatibility aliases
+export type FilterConfig = FilterSidebarConfig;
+export type FilterChangeEvent = FilterSidebarChangeEvent;
+export type FilterOutput = FilterSidebarOutput;

package/src/lib/modules/filter-sidebar/filter-sidebar.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FilterSidebarComponent } from './components/filter-sidebar/filter-sidebar.component';
+import { FormComponentsModule } from '../form-components/form-components.module';
+import { ButtonModule } from '../button/button.module';
+
+@NgModule({
+    declarations: [
+        FilterSidebarComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FormComponentsModule,
+        ButtonModule
+    ],
+    exports: [
+        FilterSidebarComponent
+    ]
+})
+export class FilterSidebarModule { }