commons-shared-web-ui 0.0.55 → 0.0.56

package/src/lib/modules/form-components/components/dropdown/dropdown.component.ts

@@ -1,377 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnChanges, SimpleChanges, HostListener, ViewChild, ElementRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { DropdownOption, DropdownConfig, DropdownLabels } from './dropdown.models';
-
-@Component({
-    selector: 'lib-dropdown',
-    templateUrl: './dropdown.component.html',
-    styleUrls: ['./dropdown.component.scss'],
-    standalone: false,
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => DropdownComponent),
-            multi: true
-        }
-    ]
-})
-export class DropdownComponent implements ControlValueAccessor, OnInit, OnChanges {
-    @Input() config?: DropdownConfig;
-    @Input() labels?: DropdownLabels;
-    @Input() options: DropdownOption[] = [];
-    @Input() selectedValue?: any;
-    @Input() placeholder: string = '';
-    @Input() label: string = '';
-    @Input() multiple: boolean = false;
-    @Input() searchable: boolean = false;
-    @Input() clearable: boolean = false;
-    @Input() disabled: boolean = false;
-    @Input() required: boolean = false;
-    @Input() errorMessage: string = '';
-
-    // Configurable styles
-    @Input() width?: string;
-    @Input() height?: string;
-    @Input() borderRadius?: string;
-    @Input() fontSize?: string;
-
-    // Additional style inputs inferred from template/getters
-    @Input() gap?: string;
-    @Input() fontFamily?: string;
-    @Input() labelColor?: string;
-    @Input() labelFontSize?: string;
-    @Input() labelFontWeight?: string;
-
-    @Input() backgroundColor?: string;
-    @Input() borderColor?: string;
-    @Input() borderWidth?: string;
-    @Input() padding?: string;
-    @Input() fontWeight?: string;
-    @Input() color?: string;
-    @Input() placeholderColor?: string;
-    @Input() focusBorderColor?: string;
-    @Input() errorColor?: string;
-    @Input() disabledBackgroundColor?: string;
-    @Input() disabledColor?: string;
-    @Input() boxShadow?: string;
-
-    @Output() selectionChange = new EventEmitter<any>();
-
-    @ViewChild(CdkVirtualScrollViewport) viewport?: CdkVirtualScrollViewport;
-    @ViewChild('searchInput') searchInput?: ElementRef;
-    @ViewChild('triggerEl') triggerEl?: ElementRef;
-
-    filteredOptions: DropdownOption[] = [];
-    searchTerm: string = '';
-    value: any = null;
-    isOpen = false;
-    focusedIndex = -1;
-    menuPosition = { top: 0, left: 0, width: 0 };
-
-    onChange: (value: any) => void = () => { };
-    onTouched: () => void = () => { };
-
-    constructor(private el: ElementRef) { }
-
-    ngOnInit(): void {
-        this.updateFromConfig();
-        this.updateFromLabels();
-        this.filteredOptions = this.validOptions;
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes['config']) {
-            this.updateFromConfig();
-        }
-        if (changes['labels']) {
-            this.updateFromLabels();
-        }
-        if (changes['config'] || changes['options']) {
-            this.filteredOptions = this.validOptions;
-        }
-        if (changes['selectedValue']) {
-            const incoming = changes['selectedValue'].currentValue;
-            if (incoming !== undefined && incoming !== this.value) {
-                this.value = incoming ?? null;
-            }
-        }
-    }
-
-    private get validOptions(): DropdownOption[] {
-        return this.options.filter(o => o.label != null && o.label !== '');
-    }
-
-    private updateFromConfig(): void {
-        if (this.config) {
-            this.options = this.config.options || this.options;
-            this.placeholder = this.config.placeholder ?? this.placeholder;
-            this.label = this.config.label ?? this.label;
-            this.multiple = this.config.multiple ?? this.multiple;
-            this.searchable = this.config.searchable ?? this.searchable;
-            this.clearable = this.config.clearable ?? this.clearable;
-            this.disabled = this.config.disabled ?? this.disabled;
-            this.required = this.config.required ?? this.required;
-            this.errorMessage = this.config.errorMessage ?? this.errorMessage;
-            this.width = this.config.width ?? this.width;
-            this.height = this.config.height ?? this.height;
-            this.borderRadius = this.config.borderRadius ?? this.borderRadius;
-            this.fontSize = this.config.fontSize ?? this.fontSize;
-            this.gap = this.config.gap ?? this.gap;
-            this.fontFamily = this.config.fontFamily ?? this.fontFamily;
-            this.labelColor = this.config.labelColor ?? this.labelColor;
-            this.labelFontSize = this.config.labelFontSize ?? this.labelFontSize;
-            this.labelFontWeight = this.config.labelFontWeight ?? this.labelFontWeight;
-            this.backgroundColor = this.config.backgroundColor ?? this.backgroundColor;
-            this.borderColor = this.config.borderColor ?? this.borderColor;
-            this.borderWidth = this.config.borderWidth ?? this.borderWidth;
-            this.padding = this.config.padding ?? this.padding;
-            this.fontWeight = this.config.fontWeight ?? this.fontWeight;
-            this.color = this.config.color ?? this.color;
-            this.placeholderColor = this.config.placeholderColor ?? this.placeholderColor;
-            this.focusBorderColor = this.config.focusBorderColor ?? this.focusBorderColor;
-            this.errorColor = this.config.errorColor ?? this.errorColor;
-            this.disabledBackgroundColor = this.config.disabledBackgroundColor ?? this.disabledBackgroundColor;
-            this.disabledColor = this.config.disabledColor ?? this.disabledColor;
-            this.boxShadow = this.config.boxShadow ?? this.boxShadow;
-        }
-    }
-
-    private updateFromLabels(): void {
-        if (this.labels) {
-            this.label = this.labels.label || this.label;
-            this.placeholder = this.labels.placeholder || this.placeholder;
-            this.errorMessage = this.labels.errorMessage || this.errorMessage;
-        }
-    }
-
-    get resolvedLabels() {
-        return {
-            requiredMarker:   this.labels?.requiredMarker   || '*',
-            searchPlaceholder: this.labels?.searchPlaceholder || 'Search...',
-            selectedSuffix:   this.labels?.selectedSuffix   || 'selected',
-            clearAriaLabel:   this.labels?.clearAriaLabel   || 'Clear selection',
-            noResultsFound:   this.labels?.noResultsFound   || 'No results found',
-        };
-    }
-
-    writeValue(value: any): void {
-        this.value = value;
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-
-    toggle(): void {
-        if (this.disabled) return;
-        if (!this.isOpen && this.triggerEl) {
-            const rect: DOMRect = this.triggerEl.nativeElement.getBoundingClientRect();
-            const optCount = this.filteredOptions.length || 1;
-            const menuH = Math.min(optCount * 40, 240) + (this.searchable ? 50 : 0) + 8;
-            const spaceBelow = window.innerHeight - rect.bottom;
-            const top = spaceBelow < menuH + 8 ? rect.top - menuH - 4 : rect.bottom + 2;
-            this.menuPosition = { top, left: rect.left, width: rect.width };
-            const closeOnScroll = (e: Event) => {
-                if (this.el.nativeElement.contains(e.target as Node)) return;
-                this.close();
-                document.removeEventListener('scroll', closeOnScroll, true);
-            };
-            document.addEventListener('scroll', closeOnScroll, true);
-        }
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            this.focusedIndex = -1;
-            setTimeout(() => {
-                if (this.searchable && this.searchInput) {
-                    this.searchInput.nativeElement.focus();
-                } else if (this.viewport) {
-                    this.viewport.elementRef.nativeElement.focus();
-                }
-            });
-        } else {
-            this.onTouched();
-        }
-    }
-
-    close(): void {
-        if (this.isOpen) {
-            this.isOpen = false;
-            this.onTouched();
-        }
-    }
-
-    selectOption(option: DropdownOption): void {
-        if (option.disabled) return;
-
-        if (this.multiple) {
-            const currentValues = Array.isArray(this.value) ? [...this.value] : [];
-            const index = currentValues.indexOf(option.value);
-            if (index > -1) {
-                currentValues.splice(index, 1);
-            } else {
-                currentValues.push(option.value);
-            }
-            this.value = currentValues;
-        } else {
-            this.value = option.value;
-            this.close();
-        }
-
-        this.onChange(this.value);
-        this.selectionChange.emit(this.value);
-    }
-
-    isSelected(option: DropdownOption): boolean {
-        if (this.multiple) {
-            return Array.isArray(this.value) && this.value.includes(option.value);
-        }
-        return this.value === option.value;
-    }
-
-    onSearch(term: string): void {
-        this.searchTerm = term;
-        if (!term) {
-            this.filteredOptions = this.validOptions;
-        } else {
-            this.filteredOptions = this.validOptions.filter(option =>
-                option.label.toLowerCase().includes(term.toLowerCase())
-            );
-        }
-        this.focusedIndex = -1;
-    }
-
-    clearSelection(event?: Event): void {
-        if (event) {
-            event.stopPropagation();
-        }
-        this.value = this.multiple ? [] : null;
-        this.onChange(this.value);
-        this.selectionChange.emit(this.value);
-    }
-
-    getIconType(icon: any): 'material' | 'fontawesome' | 'img' | 'none' {
-        if (!icon) return 'none';
-        if (typeof icon === 'string') {
-            if (icon.includes('/') || icon.includes('.') || icon.startsWith('http')) {
-                return 'img';
-            }
-            return 'material';
-        }
-        return icon.type || 'material';
-    }
-
-    getIconValue(icon: any): string {
-        if (typeof icon === 'string') return icon;
-        return icon?.value || '';
-    }
-
-    getSelectedLabel(): string {
-        if (this.multiple) {
-            const count = Array.isArray(this.value) ? this.value.length : 0;
-            return count > 0 ? `${count} ${this.resolvedLabels.selectedSuffix}` : '';
-        }
-
-        if (!this.value) return '';
-        const selected = this.options.find(opt => opt.value === this.value);
-        return selected?.label || '';
-    }
-
-    hasValue(): boolean {
-        if (this.multiple) {
-            return Array.isArray(this.value) && this.value.length > 0;
-        }
-        return this.value !== null && this.value !== undefined && this.value !== '';
-    }
-
-    @HostListener('keydown', ['$event'])
-    handleKeyboardEvent(event: KeyboardEvent): void {
-        if (this.disabled) return;
-
-        if (event.key === 'Escape') {
-            this.close();
-            return;
-        }
-
-        if (!this.isOpen && (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown')) {
-            this.toggle();
-            event.preventDefault();
-            return;
-        }
-
-        if (!this.isOpen) return;
-
-        switch (event.key) {
-            case 'ArrowDown':
-                this.focusedIndex = Math.min(this.focusedIndex + 1, this.filteredOptions.length - 1);
-                this.scrollToIndex(this.focusedIndex);
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
-                this.scrollToIndex(this.focusedIndex);
-                event.preventDefault();
-                break;
-            case 'Enter':
-                if (this.focusedIndex > -1) {
-                    this.selectOption(this.filteredOptions[this.focusedIndex]);
-                }
-                event.preventDefault();
-                break;
-        }
-    }
-
-    scrollToIndex(index: number): void {
-        if (this.viewport) {
-            this.viewport.scrollToIndex(index);
-        }
-    }
-
-    private getStyleValue(value: string | undefined): string | undefined {
-        return value ? `${value}` : undefined;
-    }
-
-    get wrapperStyles(): { [key: string]: string | undefined } {
-        return {
-            'width': this.getStyleValue(this.width),
-            '--cc-dropdown-label-gap': this.getStyleValue(this.gap),
-            '--cc-dropdown-font-family': this.getStyleValue(this.fontFamily)
-        };
-    }
-
-    get labelStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-dropdown-label-color': this.getStyleValue(this.labelColor),
-            '--cc-dropdown-font-size': this.getStyleValue(this.labelFontSize),
-            '--cc-dropdown-font-weight': this.getStyleValue(this.labelFontWeight)
-        };
-    }
-
-    get fieldStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-dropdown-bg': this.getStyleValue(this.backgroundColor),
-            '--cc-dropdown-border-radius': this.getStyleValue(this.borderRadius),
-            '--cc-dropdown-border-color': this.getStyleValue(this.borderColor),
-            '--cc-dropdown-border-width': this.getStyleValue(this.borderWidth),
-            '--cc-dropdown-height': this.getStyleValue(this.height),
-            '--cc-dropdown-padding': this.getStyleValue(this.padding),
-            '--cc-dropdown-font-size': this.getStyleValue(this.fontSize),
-            '--cc-dropdown-font-weight': this.getStyleValue(this.fontWeight),
-            '--cc-dropdown-color': this.getStyleValue(this.color),
-            '--cc-dropdown-placeholder-color': this.getStyleValue(this.placeholderColor),
-            '--cc-dropdown-focus-border-color': this.getStyleValue(this.focusBorderColor),
-            '--cc-dropdown-error-color': this.getStyleValue(this.errorColor),
-            '--cc-dropdown-disabled-bg': this.getStyleValue(this.disabledBackgroundColor),
-            '--cc-dropdown-disabled-color': this.getStyleValue(this.disabledColor),
-            'box-shadow': this.getStyleValue(this.boxShadow)
-        };
-    }
-}

package/src/lib/modules/form-components/components/dropdown/dropdown.models.ts

@@ -1,53 +0,0 @@
-export interface DropdownOption {
-    value: any;
-    label: string;
-    disabled?: boolean;
-    icon?: string | { type: 'material' | 'fontawesome' | 'img'; value: string };
-}
-
-export interface DropdownLabels {
-    label?: string;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    errorMessage?: string;
-    selectedSuffix?: string;
-    clearAriaLabel?: string;
-    noResultsFound?: string;
-    requiredMarker?: string;
-}
-
-export interface DropdownConfig {
-    options: DropdownOption[];
-    placeholder?: string;
-    label?: string;
-    multiple?: boolean;
-    searchable?: boolean;
-    clearable?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    errorMessage?: string;
-    // Customization
-    width?: string;
-    height?: string;
-    borderRadius?: string;
-    fontSize?: string;
-
-    // Additional Style Props
-    gap?: string;
-    fontFamily?: string;
-    labelColor?: string;
-    labelFontSize?: string;
-    labelFontWeight?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    borderWidth?: string;
-    padding?: string;
-    fontWeight?: string;
-    color?: string;
-    placeholderColor?: string;
-    focusBorderColor?: string;
-    errorColor?: string;
-    disabledBackgroundColor?: string;
-    disabledColor?: string;
-    boxShadow?: string;
-}

package/src/lib/modules/form-components/components/input/input.component.html

@@ -1,51 +0,0 @@
-<div class="cc-input-container" [ngStyle]="wrapperStyles">
-    <label *ngIf="label" class="cc-input-label" [ngStyle]="labelStyles">
-        {{ label }}
-        <span *ngIf="required" class="cc-required">{{ requiredMarker }}</span>
-    </label>
-
-    <div class="cc-input-wrapper" [class.focused]="focused" [class.disabled]="disabled" [class.error]="errorMessage"
-        [ngStyle]="fieldStyles">
-
-        <!-- Prefix Icon -->
-        <span class="cc-input-prefix" *ngIf="prefixIcon">
-            <span class="material-icons" *ngIf="getIconType(prefixIcon) === 'material'">{{ getIconValue(prefixIcon)
-                }}</span>
-            <i *ngIf="getIconType(prefixIcon) === 'fontawesome'" [class]="getIconValue(prefixIcon)"></i>
-            <img *ngIf="getIconType(prefixIcon) === 'img'" [src]="getIconValue(prefixIcon)" class="cc-icon-img"
-                [attr.alt]="labels?.prefixAltText || 'prefix'" />
-        </span>
-
-        <!-- Input -->
-        <input *ngIf="type !== 'textarea'" class="cc-input-element" [type]="inputType" [value]="value"
-            [placeholder]="placeholder" [disabled]="disabled" [required]="required" [readonly]="readonly"
-            [maxLength]="maxLength || 524288" [minLength]="minLength || 0" [min]="min" [max]="max" [pattern]="pattern"
-            (input)="onInputChange($event)" (blur)="onBlur()" (focus)="onFocus()" [attr.aria-invalid]="!!errorMessage"
-            [attr.aria-describedby]="helperText ? 'helper-text' : null" />
-
-        <!-- Textarea -->
-        <textarea *ngIf="type === 'textarea'" class="cc-input-element cc-textarea" [value]="value"
-            [placeholder]="placeholder" [disabled]="disabled" [required]="required" [readonly]="readonly"
-            [maxLength]="maxLength || 524288" [minLength]="minLength || 0" [rows]="rows" (input)="onInputChange($event)"
-            (blur)="onBlur()" (focus)="onFocus()" [attr.aria-invalid]="!!errorMessage"></textarea>
-
-        <!-- Suffix Icon / Password Toggle -->
-        <span class="cc-input-suffix">
-            <button *ngIf="type === 'password'" type="button" class="cc-icon-btn" (click)="togglePasswordVisibility()"
-                [attr.aria-label]="labels?.passwordToggleAriaLabel">
-                <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
-            </button>
-
-            <ng-container *ngIf="suffixIcon && type !== 'password'">
-                <span class="material-icons" *ngIf="getIconType(suffixIcon) === 'material'">{{ getIconValue(suffixIcon)
-                    }}</span>
-                <i *ngIf="getIconType(suffixIcon) === 'fontawesome'" [class]="getIconValue(suffixIcon)"></i>
-                <img *ngIf="getIconType(suffixIcon) === 'img'" [src]="getIconValue(suffixIcon)" class="cc-icon-img"
-                    [attr.alt]="labels?.suffixAltText || 'suffix'" />
-            </ng-container>
-        </span>
-    </div>
-
-    <div class="cc-helper-text" *ngIf="helperText" id="helper-text">{{ helperText }}</div>
-    <div class="cc-error-message" *ngIf="errorMessage">{{ errorMessage }}</div>
-</div>

package/src/lib/modules/form-components/components/input/input.component.scss

@@ -1,128 +0,0 @@
-.cc-input-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cc-input-label-gap, 0.5rem);
-    width: 100%;
-    font-family: var(--cc-input-font-family, inherit);
-}
-
-.cc-input-label {
-    font-size: var(--cc-input-label-font-size, 0.875rem);
-    font-weight: var(--cc-input-label-font-weight, 500);
-    color: var(--cc-input-label-color, #202124);
-    margin: 0;
-    line-height: 1.4;
-}
-
-.cc-required {
-    color: var(--cc-input-required-color, #D93025);
-    margin-left: 0.25rem;
-}
-
-.cc-input-wrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    box-sizing: border-box;
-    background-color: var(--cc-input-bg, #FEFEFE);
-    border: var(--cc-input-border-width, 1px) solid var(--cc-input-border-color, #BDC1C6);
-    border-radius: var(--cc-input-border-radius, 0.4375rem);
-    padding: var(--cc-input-padding, 0.5rem 0.75rem);
-    min-height: var(--cc-input-height, 2.5rem);
-    transition: border-color 0.2s, box-shadow 0.2s;
-
-    &.focused {
-        border-color: var(--cc-input-focus-border-color, #1A73E8);
-        // Optional: add box-shadow for better accessibility/focus ring
-    }
-
-    &.error {
-        border-color: var(--cc-input-error-color, #D93025);
-    }
-
-    &.disabled {
-        background-color: var(--cc-input-disabled-bg, #F1F3F4);
-        cursor: not-allowed;
-
-        .cc-input-element {
-            cursor: not-allowed;
-            color: var(--cc-input-disabled-color, #80868B);
-        }
-
-        .material-icons,
-        i,
-        img {
-            opacity: 0.5;
-        }
-    }
-}
-
-.cc-input-element {
-    flex: 1;
-    border: none;
-    background: none;
-    outline: none;
-    font-family: inherit;
-    font-size: var(--cc-input-font-size, 0.875rem);
-    font-weight: var(--cc-input-font-weight, 400);
-    color: var(--cc-input-color, #202124);
-    padding: 0;
-    margin: 0;
-    width: 100%;
-
-    &::placeholder {
-        color: var(--cc-input-placeholder-color, #80868B);
-    }
-
-    &.cc-textarea {
-        resize: vertical;
-        min-height: 4rem;
-    }
-}
-
-.cc-input-prefix,
-.cc-input-suffix {
-    display: flex;
-    align-items: center;
-    color: var(--cc-input-icon-color, #5F6368);
-}
-
-.cc-input-prefix {
-    margin-right: 0.5rem;
-}
-
-.cc-input-suffix {
-    margin-left: 0.5rem;
-}
-
-.cc-icon-img {
-    width: 1.25rem;
-    height: 1.25rem;
-    object-fit: contain;
-}
-
-.cc-icon-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    color: inherit;
-
-    &:focus {
-        outline: none;
-    }
-}
-
-.cc-helper-text {
-    font-size: 0.75rem;
-    color: #5F6368; // Default, can be variable if needed
-    margin-top: 0.25rem;
-}
-
-.cc-error-message {
-    font-size: 0.75rem;
-    color: var(--cc-input-error-color, #D93025);
-    margin-top: 0.25rem;
-}