platformcommons-web-lib 1.0.0

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/confirmation-modal/confirmation-modal.theme.scss

@@ -0,0 +1,87 @@
+@use 'sass:map';
+
+$default-confirmation-modal-config: (
+    bg: #FFFFFF,
+    radius: 0.75rem,
+    // 12px
+    shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.15),
+    // 0 4px 24px
+    border: none,
+
+    // Header
+    header-padding: 0.5rem 1rem,
+    // 24px
+    header-border-bottom: 0.0625rem solid #E5E7EB,
+    // 1px
+    title-font-size: 0.875rem,
+    // 20px
+    title-font-weight: 600,
+    title-color: #111827,
+    icon-size: 1.5rem,
+    // 24px
+    close-icon-size: 1.25rem,
+    // 20px
+
+    // Body
+    body-padding: 1.5rem,
+    // 24px
+    body-text-color: #374151,
+
+    // Inputs (Defaults)
+    input-padding: 0.625rem 0.75rem,
+    // 10px 12px
+    input-radius: 0.375rem,
+    // 6px
+    input-font-size: 0.875rem,
+    // 14px
+    label-margin-bottom: 0.5rem,
+    // 8px
+    textarea-min-height: 6.25rem,
+    // 100px
+
+    // Footer
+    footer-bg: #F9FAFB,
+    footer-padding: 1rem 1.5rem,
+    // 24px
+    footer-border-top: 0.0625rem solid #E5E7EB,
+    // 1px
+
+    // Spinner
+    spinner-size: 1rem // 16px
+);
+
+@mixin confirmation-modal-theme($user-config: ()) {
+    $config: map.merge($default-confirmation-modal-config, $user-config);
+
+    --cc-modal-bg: #{map.get($config, bg)};
+    --cc-modal-radius: #{map.get($config, radius)};
+    --cc-modal-shadow: #{map.get($config, shadow)};
+    --cc-modal-border: #{map.get($config, border)};
+
+    // Header Themes
+    --cc-modal-header-bg-dark: #262125;
+    --cc-modal-header-title-color-dark: #FFFFFF;
+
+    --cc-modal-header-padding: #{map.get($config, header-padding)};
+    --cc-modal-header-border-bottom: #{map.get($config, header-border-bottom)};
+    --cc-modal-title-size: #{map.get($config, title-font-size)};
+    --cc-modal-title-weight: #{map.get($config, title-font-weight)};
+    --cc-modal-title-color: #{map.get($config, title-color)};
+    --cc-modal-icon-size: #{map.get($config, icon-size)};
+    --cc-modal-close-icon-size: #{map.get($config, close-icon-size)};
+
+    --cc-modal-body-padding: #{map.get($config, body-padding)};
+    --cc-modal-body-color: #{map.get($config, body-text-color)};
+
+    --cc-modal-input-padding: #{map.get($config, input-padding)};
+    --cc-modal-input-radius: #{map.get($config, input-radius)};
+    --cc-modal-input-font-size: #{map.get($config, input-font-size)};
+    --cc-modal-label-margin-bottom: #{map.get($config, label-margin-bottom)};
+    --cc-modal-textarea-min-height: #{map.get($config, textarea-min-height)};
+
+    --cc-modal-footer-bg: #{map.get($config, footer-bg)};
+    --cc-modal-footer-padding: #{map.get($config, footer-padding)};
+    --cc-modal-footer-border-top: #{map.get($config, footer-border-top)};
+
+    --cc-modal-spinner-size: #{map.get($config, spinner-size)};
+}

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;
+    }
+}