commons-shared-web-ui 0.0.50 → 0.0.51

package/src/lib/modules/summary-card/components/summary-card/summary-card.component.scss

@@ -1,199 +0,0 @@
-:host {
-    display: block;
-    width: 100%;
-}
-
-.cc-summary-card {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    box-sizing: border-box;
-    font-family: var(--cc-sc-font-family, 'Inter', sans-serif);
-    background-color: var(--cc-sc-bg-color, #ffffff);
-    border-radius: var(--cc-sc-border-radius, 8px);
-    border: var(--cc-sc-border, 1px solid #e0e0e0);
-    padding: var(--cc-sc-padding, 16px);
-    box-shadow: var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, 0.05));
-    transition: all var(--cc-sc-transition-duration, 0.2s) ease;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    gap: var(--cc-sc-icon-margin, 1rem);
-
-    &.clickable {
-        cursor: pointer;
-
-        &:hover {
-            transform: var(--cc-sc-hover-transform);
-            box-shadow: var(--cc-sc-hover-shadow);
-        }
-    }
-
-    &.disabled {
-        opacity: var(--cc-sc-disabled-opacity);
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    // Icon Section (Left Side)
-    .icon-section {
-        width: var(--cc-sc-icon-box-size);
-        height: var(--cc-sc-icon-box-size);
-        min-width: var(--cc-sc-icon-box-size);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--cc-sc-icon-radius);
-        background-color: var(--cc-sc-icon-bg);
-        color: var(--cc-sc-icon-color);
-        flex-shrink: 0;
-        align-self: center;
-
-        mat-icon {
-            width: var(--cc-sc-icon-size);
-            height: var(--cc-sc-icon-size);
-            font-size: var(--cc-sc-icon-size);
-            line-height: var(--cc-sc-icon-size);
-        }
-
-        img {
-            width: var(--cc-sc-icon-size);
-            height: var(--cc-sc-icon-size);
-            object-fit: contain;
-        }
-    }
-
-    // Right Section (Header + Value/Meta)
-    .right-section {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        min-width: 0;
-        gap: var(--cc-sc-content-gap, 0.5rem);
-
-        .header {
-            font-size: var(--cc-sc-header-size);
-            font-weight: var(--cc-sc-header-weight);
-            text-transform: var(--cc-sc-header-transform);
-            color: var(--cc-sc-header-color);
-            letter-spacing: var(--cc-sc-header-letter-spacing);
-            line-height: var(--cc-sc-header-line-height);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            width: 100%;
-        }
-
-        // Value and Meta Row
-        .value-meta-row {
-            display: flex;
-            flex-direction: row;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 1rem;
-            flex: 1;
-
-            // Content Section
-            .content-section {
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-start;
-                flex: 1;
-                min-width: 0;
-
-                .value-row {
-                    display: flex;
-                    flex-direction: column;
-                    gap: var(--cc-sc-value-desc-gap);
-
-                    &.inline-layout {
-                        flex-direction: row;
-                        align-items: baseline;
-                        flex-wrap: wrap;
-                    }
-
-                    .value {
-                        font-size: var(--cc-sc-value-size);
-                        font-weight: var(--cc-sc-value-weight);
-                        color: var(--cc-sc-value-color);
-                        line-height: var(--cc-sc-value-line-height);
-                        white-space: nowrap;
-
-                        .value-subtext {
-                            font-size: var(--cc-sc-desc-size);
-                            font-weight: var(--cc-sc-desc-weight);
-                            color: var(--cc-sc-desc-color);
-                            margin-left: 4px;
-                        }
-                    }
-
-                    .description {
-                        font-size: var(--cc-sc-desc-size);
-                        font-weight: var(--cc-sc-desc-weight);
-                        color: var(--cc-sc-desc-color);
-                        line-height: var(--cc-sc-desc-line-height);
-                    }
-                }
-            }
-
-            // Meta Section (Aligned with Value)
-            .meta-section {
-                display: flex;
-                flex-direction: column;
-                align-items: flex-end;
-                justify-content: flex-start;
-                flex-shrink: 0;
-                gap: 6px;
-
-                .meta-item {
-                    font-size: 0.8125rem; // ~13px
-                    line-height: 1.4;
-                    white-space: nowrap;
-                    text-align: right;
-                    flex-shrink: 0;
-
-                    &.meta-text {
-                        color: var(--cc-sc-desc-color, #64748b);
-                        font-weight: 500;
-                    }
-
-                    &.meta-pill {
-                        display: inline-flex;
-                        align-items: center;
-                        justify-content: center;
-                        padding: var(--cc-sc-meta-pill-padding, 4px 12px);
-                        border-radius: var(--cc-sc-meta-pill-radius, 20px);
-                        font-size: var(--cc-sc-meta-pill-font-size, 0.75rem);
-                        font-weight: var(--cc-sc-meta-pill-font-weight, 600);
-                        line-height: 1.2;
-                        background-color: var(--cc-sc-meta-pill-bg, #f1f5f9);
-                        color: var(--cc-sc-meta-pill-color, #475569);
-                    }
-                }
-            }
-        }
-    }
-
-    // Responsive Design
-    @media (max-width: 600px) {
-        .icon-section {
-            margin-right: var(--cc-sc-icon-margin-mobile, 0.75rem);
-        }
-
-        .content-section {
-            .header {
-                font-size: var(--cc-sc-header-size-mobile, 0.7rem);
-            }
-
-            .value-row {
-                .value {
-                    font-size: var(--cc-sc-value-size-mobile, 1.25rem);
-                }
-
-                .description {
-                    font-size: var(--cc-sc-desc-size-mobile, 0.7rem);
-                }
-            }
-        }
-    }
-}

package/src/lib/modules/summary-card/components/summary-card/summary-card.component.ts

@@ -1,126 +0,0 @@
-import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
-
-export interface SummaryCardConfig {
-    header: string;
-    value: string;
-    description?: string;
-
-    // Icon or Image (mutually exclusive)
-    icon?: string; // Material icon name
-    iconImage?: string; // URL for image icon
-
-    // Layout configurations
-    descriptionPosition?: 'bottom' | 'inline'; // 'bottom' (default) or 'inline' (right side of value)
-
-    // Extended Content
-    valueSubtext?: string; // Text displayed next to the value (e.g. "/ 15 Target")
-    metaData?: SummaryCardMeta[]; // Right-aligned meta information
-
-    // Color configurations
-    valueColor?: string; // Color for the value text
-    headerColor?: string; // Color for the header text
-    descriptionColor?: string; // Color for the description text
-    iconColor?: string; // Color for the icon
-    iconBackgroundColor?: string; // Background color for the icon container
-
-    // Additional styling
-    iconClass?: string; // Additional CSS classes for icon
-    valueClass?: string; // Additional CSS classes for value
-    headerClass?: string; // Additional CSS classes for header
-    descriptionClass?: string; // Additional CSS classes for description
-
-    // Interaction
-    isDisabled?: boolean; // Disable click interaction
-    isClickable?: boolean; // Whether card is clickable (default: true)
-}
-
-export interface SummaryCardMeta {
-    text: string;
-    type?: 'text' | 'pill'; // 'text' (default) or 'pill' (badge style)
-    color?: string; // Text color
-    backgroundColor?: string; // Background color for pill
-    cssClass?: string; // Custom CSS class
-}
-
-export interface SummaryCardLabels {
-    iconAlt: string;
-}
-
-@Component({
-    selector: 'lib-summary-card',
-    templateUrl: './summary-card.component.html',
-    styleUrls: ['./summary-card.component.scss'],
-    standalone: false
-})
-export class SummaryCardComponent {
-    @Input() config!: SummaryCardConfig;
-    @Input() theme?: 'theme-1' | 'theme-2';
-    @Input() labels: any;
-    @Output() cardClick = new EventEmitter<void>();
-
-    constructor() { }
-
-    onCardClick(): void {
-        if (this.config?.isDisabled || this.config?.isClickable === false) {
-            return;
-        }
-        this.cardClick.emit();
-    }
-
-    get cardClasses(): { [key: string]: boolean } {
-        return {
-            'disabled': !!this.config?.isDisabled,
-            'clickable': this.config?.isClickable !== false && !this.config?.isDisabled
-        };
-    }
-
-    get iconStyles(): { [key: string]: string } {
-        const styles: { [key: string]: string } = {};
-        if (this.config.iconBackgroundColor) {
-            styles['backgroundColor'] = this.config.iconBackgroundColor;
-        }
-        if (this.config.iconColor) {
-            styles['color'] = this.config.iconColor;
-        }
-        return styles;
-    }
-
-    get headerStyles(): { [key: string]: string } {
-        const styles: { [key: string]: string } = {};
-        if (this.config.headerColor) {
-            styles['color'] = this.config.headerColor;
-        }
-        return styles;
-    }
-
-    get valueStyles(): { [key: string]: string } {
-        const styles: { [key: string]: string } = {};
-        if (this.config.valueColor) {
-            styles['color'] = this.config.valueColor;
-        }
-        return styles;
-    }
-
-    get descriptionStyles(): { [key: string]: string } {
-        const styles: { [key: string]: string } = {};
-        if (this.config.descriptionColor) {
-            styles['color'] = this.config.descriptionColor;
-        }
-        return styles;
-    }
-
-    get isDescriptionInline(): boolean {
-        return this.config.descriptionPosition === 'inline';
-    }
-
-    getMetaStyles(meta: SummaryCardMeta): { [key: string]: string } {
-        const styles: { [key: string]: string } = {};
-        if (meta.color) {
-            styles['color'] = meta.color;
-        }
-        if (meta.backgroundColor && meta.type === 'pill') {
-            styles['backgroundColor'] = meta.backgroundColor;
-        }
-        return styles;
-    }
-}

package/src/lib/modules/summary-card/summary-card.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { SummaryCardComponent } from './components/summary-card/summary-card.component';
-
-@NgModule({
-    declarations: [
-        SummaryCardComponent
-    ],
-    imports: [
-        CommonModule,
-        MatIconModule
-    ],
-    exports: [
-        SummaryCardComponent
-    ]
-})
-export class SummaryCardModule { }

package/src/lib/shared-ui.module.ts

@@ -1,44 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MaterialModule } from './modules/material/material.module';
-import { AlertModule } from './modules/alert/alert.module';
-import { ButtonModule } from './modules/button/button.module';
-import { ButtonDropdownModule } from './modules/button-dropdown/button-dropdown.module';
-import { ConfirmationModalModule } from './modules/confirmation-modal/confirmation-modal.module';
-import { FilterSidebarModule } from './modules/filter-sidebar/filter-sidebar.module';
-import { SummaryCardModule } from './modules/summary-card/summary-card.module';
-import { ConfigurableFormModule } from './modules/configurable-form/configurable-form.module';
-import { FormComponentsModule } from './modules/form-components/form-components.module';
-import { SmartFormModule } from './modules/smart-form/smart-form.module';
-import { FilterModule } from './modules/filter/filter.module';
-import { SideNavModule } from './modules/side-nav/side-nav.module';
-import { FormBuilderModule } from './modules/form-builder/form-builder.module';
-import { FilterTableSelectorModule } from './modules/filter-table-selector/filter-table-selector.module';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule,
-    MaterialModule,
-    AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-    SummaryCardModule,
-    ConfigurableFormModule,
-    FormComponentsModule,
-    SmartFormModule,
-    SideNavModule,
-    FormBuilderModule,
-    FilterTableSelectorModule
-  ],
-  exports: [
-    MaterialModule,
-    AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-    SummaryCardModule,
-    ConfigurableFormModule,
-    FormComponentsModule,
-    SmartFormModule,
-    SideNavModule,
-    FormBuilderModule,
-    FilterTableSelectorModule
-  ],
-})
-export class SharedUiModule { }

package/src/lib/utils/constants.ts

@@ -1,11 +0,0 @@
-export const DEFAULT_ITEMS_PER_PAGE = 10;
-export const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, 100];
-export const PAGINATION_THEME_DEFAULT = 'theme-1';
-export const PAGINATION_THEME_DARK = 'theme-2';
-
-// Nav
-export const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills' = 'filled';
-export const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical' = 'horizontal';
-
-// Side Nav
-export const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = 'right';

package/src/lib/utils/storage.utils.ts

@@ -1,37 +0,0 @@
-/**
- * Utility functions for LocalStorage operations
- */
-export const getLocalStorageItem = (key: string): string | null => {
-  return localStorage.getItem(key);
-};
-
-export const setLocalStorageItem = (key: string, value: string): void => {
-  localStorage.setItem(key, value);
-};
-
-export const removeLocalStorageItem = (key: string): void => {
-  localStorage.removeItem(key);
-};
-
-export const clearLocalStorage = (): void => {
-  localStorage.clear();
-};
-
-/**
- * Utility functions for SessionStorage operations
- */
-export const getSessionStorageItem = (key: string): string | null => {
-  return sessionStorage.getItem(key);
-};
-
-export const setSessionStorageItem = (key: string, value: string): void => {
-  sessionStorage.setItem(key, value);
-};
-
-export const removeSessionStorageItem = (key: string): void => {
-  sessionStorage.removeItem(key);
-};
-
-export const clearSessionStorage = (): void => {
-  sessionStorage.clear();
-};

package/src/lib/utils/string.utils.ts

@@ -1,23 +0,0 @@
-/**
- * Utility functions for string manipulation
- */
-export class StringUtils {
-
-    /**
-     * Converts a string to camelCase.
-     * Example: "First Name" -> "firstName", "Profile Picture" -> "profilePicture"
-     */
-    static toCamelCase(str?: string): string {
-        if (!str) return '';
-        return str
-            .replace(/[^a-zA-Z0-9 ]/g, '')
-            .split(' ')
-            .filter(Boolean)
-            .map((word, i) =>
-                i === 0
-                    ? word.charAt(0).toLowerCase() + word.slice(1)
-                    : word.charAt(0).toUpperCase() + word.slice(1)
-            )
-            .join('');
-    }
-}

package/src/lib/utils/translation.utils.ts

@@ -1,87 +0,0 @@
-
-/**
- * Recursively translates the Configuration object using the provided labels map.
- * This function processes:
- * - Section Titles
- * - Field Labels
- * - Placeholders
- * - Help Texts
- * - Option Labels (for static options)
- * - Repeater Labels (addLabel, repeaterItemLabel)
- * 
- * @param config The FormConfig object to translate
- * @param labelsMap A map of key-value pairs for translation (Flattened JSON)
- * @returns A new FormConfig object with translated strings
- */
-export function translateConfig(config: any, labelsMap: any): any {
-    if (!config || !labelsMap) {
-        return config;
-    }
-
-    // Deep clone to avoid mutating original config, if not already cloned
-    // Note: Assuming config passed here is already a clone to be modified or we clone it.
-    // To be safe, let's clone it if it's the root call, but this function is helper.
-    // In component we do: processedConfig = JSON.parse(JSON.stringify(config)); -> translateConfig(processedConfig, map)
-    // So distinct reference is passed.
-
-    // Helper to translate a single key
-    const t = (key: string) => {
-        return labelsMap[key] || key;
-    };
-
-    if (config.sections) {
-        config.sections.forEach((section: any) => {
-            if (section.sectionTitle) {
-                section.sectionTitle = t(section.sectionTitle);
-            }
-            if (section.repeaterItemLabel) {
-                section.repeaterItemLabel = t(section.repeaterItemLabel);
-            }
-            if (section.addLabel) {
-                section.addLabel = t(section.addLabel);
-            }
-
-            if (section.fields) {
-                section.fields.forEach((field: any) => {
-                    translateField(field, t);
-                });
-            }
-        });
-    }
-
-    return config;
-}
-
-function translateField(field: any, t: (key: string) => string) {
-    if (field.label) {
-        field.label = t(field.label);
-    }
-    if (field.placeholder) {
-        field.placeholder = t(field.placeholder);
-    }
-    if (field.helpText) {
-        field.helpText = t(field.helpText);
-    }
-    if (field.suffixText) {
-        field.suffixText = t(field.suffixText);
-    }
-    if (field.prefixText) { // Assuming prefixText might exist or be added
-        field.prefixText = t(field.prefixText);
-    }
-
-    // Translate options if they exist
-    if (field.options) {
-        field.options.forEach((opt: any) => {
-            if (opt.label) {
-                opt.label = t(opt.label);
-            }
-        });
-    }
-
-    // Handle subFields for composite type
-    if (field.subFields) {
-        field.subFields.forEach((sub: any) => {
-            translateField(sub, t);
-        });
-    }
-}

package/src/public-api.ts

@@ -1,104 +0,0 @@
-/*
- * Public API Surface of commons-shared-web-ui
- */
-
-export * from './lib/modules/form-builder/form-builder.module';
-export * from './lib/modules/form-builder/components/field-selection/field-selection.component';
-export * from './lib/modules/form-builder/components/field-configurator/field-configurator.component';
-export * from './lib/shared-ui.module';
-export * from './lib/modules/material/material.module';
-export * from './lib/utils/storage.utils';
-export * from './lib/utils/string.utils';
-export * from './lib/utils/translation.utils';
-export * from './lib/modules/summary-card/summary-card.module';
-export * from './lib/modules/summary-card/components/summary-card/summary-card.component';
-export * from './lib/modules/configurable-form/configurable-form.module';
-export * from './lib/modules/configurable-form/component/configurable-form.component';
-// Export Configurable Form resources namespaced to avoid collisions
-export * from './lib/modules/configurable-form/configurable-form.model';
-export * as ConfigurableFormExamples from './lib/modules/configurable-form/configurable-form.examples';
-
-export * from './lib/modules/pagination/pagination.module';
-export * from './lib/modules/pagination/components/pagination/pagination.component';
-export * from './lib/modules/nav/nav.module';
-export * from './lib/modules/nav/components/nav/nav.component';
-export * from './lib/modules/nav/nav.models';
-export * from './lib/modules/side-nav/side-nav.module';
-export * from './lib/modules/side-nav/components/side-nav/side-nav.component';
-export * from './lib/modules/side-nav/side-nav.models';
-export * from './lib/utils/constants';
-export * from './lib/modules/alert/alert.module';
-export * from './lib/modules/alert/alert.models';
-export * from './lib/modules/alert/components/alert/alert.component';
-export * from './lib/modules/button/button.module';
-export * from './lib/modules/button/button.models';
-export * from './lib/modules/button/components/button/button.component';
-export * from './lib/modules/button-dropdown/button-dropdown.module';
-export * from './lib/modules/button-dropdown/button-dropdown.models';
-export * from './lib/modules/button-dropdown/components/button-dropdown/button-dropdown.component';
-export * from './lib/modules/confirmation-modal/confirmation-modal.module';
-export * from './lib/modules/confirmation-modal/confirmation-modal.models';
-export * from './lib/modules/confirmation-modal/components/confirmation-modal/confirmation-modal.component';
-export * from './lib/modules/filter-sidebar/filter-sidebar.module';
-export * from './lib/modules/filter-sidebar/filter-sidebar.models';
-export * from './lib/modules/filter-sidebar/components/filter-sidebar/filter-sidebar.component';
-export * from './lib/modules/filter/filter.module';
-export * from './lib/modules/filter/filter.models';
-export * from './lib/modules/filter/components/filter/filter.component';
-export * from './lib/modules/form-components/form-components.module';
-export * from './lib/modules/form-components/components/input/input.component';
-export * from './lib/modules/form-components/components/input/input.models';
-export * from './lib/modules/form-components/components/dropdown/dropdown.component';
-export * from './lib/modules/form-components/components/dropdown/dropdown.models';
-export * from './lib/modules/form-components/components/checkbox/checkbox.component';
-export * from './lib/modules/form-components/components/checkbox/checkbox.models';
-export * from './lib/modules/form-components/components/radio/radio.component';
-export * from './lib/modules/form-components/components/radio/radio.models';
-export * from './lib/modules/form-components/components/toggle/toggle.component';
-export * from './lib/modules/form-components/components/toggle/toggle.models';
-export * from './lib/modules/form-components/components/datepicker/datepicker.component';
-export * from './lib/modules/form-components/components/datepicker/datepicker.models';
-export * from './lib/modules/form-components/components/search/search.component';
-export * from './lib/modules/form-components/components/search/search.models';
-export * from './lib/modules/smart-table/smart-table.module';
-export * from './lib/modules/smart-table/components/smart-table/smart-table.component';
-export * from './lib/modules/smart-table/models/table-config.model';
-export * from './lib/modules/smart-table/utils/smart-table.utils';
-export * from './lib/modules/smart-form/smart-form.module';
-export * from './lib/modules/smart-form/components/smart-form/smart-form.component';
-export {
-  FormSchema,
-  SubmitConfig,
-  FieldConfig,
-  SectionConfig,
-  StepperConfig,
-  TextConfig,
-  NumberConfig,
-  DateConfig,
-  EmailConfig,
-  PhoneConfig,
-  GeneratedConfig,
-  RangeConfig,
-  AttachmentConfig,
-  LocationConfig,
-  RatingConfig,
-  ValidationResult,
-  LengthConstraint,
-  OptionItem,
-  SuffixActionIcon
-} from './lib/modules/smart-form/models/form-schema.model';
-export * from './lib/modules/smart-form/models/hierarchy-config.model';
-export * from './lib/modules/smart-form/services/expression.service';
-export * from './lib/modules/smart-form/services/smart-form-controller.service';
-export * from './lib/modules/smart-form/utils/validation.utils';
-export * as SmartFormExamples from './lib/modules/smart-form/smart-form.examples';
-
-export * from './lib/modules/snackbar/snackbar.module';
-export * from './lib/modules/snackbar/components/snackbar.component';
-export * from './lib/modules/snackbar/models/snackbar.models';
-export * from './lib/modules/snackbar/services/snackbar.service';
-
-// ── FilterTableSelector ─────────────────────────────────────────────────────
-export * from './lib/modules/filter-table-selector/filter-table-selector.module';
-export * from './lib/modules/filter-table-selector/filter-table-selector.models';
-export * from './lib/modules/filter-table-selector/components/filter-table-selector/filter-table-selector.component';

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-{
-    "extends": "../../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "../../out-tsc/lib",
-        "target": "es2022",
-        "declaration": true,
-        "declarationMap": true,
-        "inlineSources": true,
-        "types": []
-    },
-    "exclude": [
-        "src/test.ts",
-        "**/*.spec.ts"
-    ]
-}