platformcommons-web-lib 1.0.0

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 { }

package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+
+$default-filter-sidebar-config: (
+    // Layout
+    width: 100%,
+    padding: 1.5rem,
+    gap: 1.5rem,
+    bg: #FEFEFE,
+    border-radius: 0,
+
+    // Header
+    header-height: 3rem,
+    header-title-size: 1.125rem,
+    header-title-weight: 500,
+    header-title-color: #202124,
+
+    // Footer
+    footer-padding: 1rem 0 0 0,
+    footer-gap: 1rem,
+);
+
+@mixin filter-sidebar-theme($user-config: ()) {
+    $config: map.merge($default-filter-sidebar-config, $user-config);
+
+    --cc-filter-sidebar-width: #{map.get($config, width)};
+    --cc-filter-sidebar-padding: #{map.get($config, padding)};
+    --cc-filter-sidebar-gap: #{map.get($config, gap)};
+    --cc-filter-sidebar-bg: #{map.get($config, bg)};
+    --cc-filter-sidebar-border-radius: #{map.get($config, border-radius)};
+
+    --cc-filter-header-height: #{map.get($config, header-height)};
+    --cc-filter-header-title-size: #{map.get($config, header-title-size)};
+    --cc-filter-header-title-weight: #{map.get($config, header-title-weight)};
+    --cc-filter-header-title-color: #{map.get($config, header-title-color)};
+
+    --cc-filter-footer-padding: #{map.get($config, footer-padding)};
+    --cc-filter-footer-gap: #{map.get($config, footer-gap)};
+}

package/src/lib/modules/filter-table-selector/components/filter-table-selector/filter-table-selector.component.html

@@ -0,0 +1,73 @@
+<div class="fts-container">
+
+  <!-- ── Modal Header ──────────────────────────────────────────────────────── -->
+  <div class="fts-header" *ngIf="config?.title">
+    <h2 class="fts-header__title">{{ titleLabel }}</h2>
+  </div>
+
+  <!-- ── Body: Filter Panel + Table Panel ──────────────────────────────────── -->
+  <div class="fts-body" *ngIf="config">
+
+    <!-- LEFT: Filter Panel -->
+    <aside class="fts-filter-panel" [class.fts-filter-panel--hidden]="!filterPanelVisible">
+
+      <div class="fts-filter-panel__header">
+        <span class="fts-filter-panel__title">{{ translate('COMMON.FILTER_TABLE.FILTER_BY') || 'Filter By' }}</span>
+      </div>
+
+      <div class="fts-filter-panel__content">
+        <!-- SmartForm renders the dynamic filter form. -->
+        <ng-container *ngIf="resolvedFormJson && formVersion >= 0">
+          <lib-smart-form [formJson]="resolvedFormJson" [labels]="labels" [initialValues]="resolvedInitialValues"
+            (valueChange)="onFormValueChange($event)">
+          </lib-smart-form>
+        </ng-container>
+      </div>
+
+    </aside>
+
+    <!-- RIGHT: Table Panel -->
+    <section class="fts-table-panel">
+
+      <!-- Table toolbar: selection count -->
+      <!-- <div class="fts-table-panel__toolbar">
+        <span class="fts-selection-count" *ngIf="config.selectionConfig?.selectionCountLabel">
+          {{ selectionCountText }}
+        </span>
+      </div> -->
+
+      <!-- SmartTable -->
+      <div class="fts-table-wrapper">
+        <lib-smart-table *ngIf="resolvedTableConfig" [config]="resolvedTableConfig" [selectedRows]="selectedRows"
+          (rowSelect)="onRowSelect($event)">
+        </lib-smart-table>
+      </div>
+
+    </section>
+
+  </div>
+
+  <!-- ── Footer Action Bar ─────────────────────────────────────────────────── -->
+  <div class="fts-footer">
+    <div class="fts-footer__left">
+      <lib-button id="fts-clear-filter-btn" variant="outline" (click)="onClearFilter()">
+        {{ clearFilterButtonLabel }}
+      </lib-button>
+
+      <lib-button id="fts-apply-filter-btn" variant="primary" (click)="applyCurrentFilter()">
+        {{ applyFilterButtonLabel }}
+      </lib-button>
+    </div>
+
+    <div class="fts-footer__right">
+      <lib-button id="fts-cancel-btn" variant="outline" (click)="handleCancel()">
+        {{ cancelButtonLabel }}
+      </lib-button>
+
+      <lib-button id="fts-submit-btn" variant="primary" (click)="handleSubmit()">
+        {{ submitButtonLabel }}
+      </lib-button>
+    </div>
+  </div>
+
+</div>