commons-shared-web-ui 0.0.50 → 0.0.52

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

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

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

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

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

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

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

@@ -1,24 +0,0 @@
-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 { }