platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,252 @@
+.cc-dropdown-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative; // Context for absolute menu
+    font-family: var(--cc-dropdown-font-family, inherit);
+    gap: var(--cc-dropdown-label-gap, 0.5rem);
+}
+
+.cc-dropdown-label {
+    font-size: var(--cc-dropdown-font-size, 0.875rem);
+    font-weight: var(--cc-dropdown-font-weight, 500);
+    color: var(--cc-dropdown-label-color, #202124);
+    margin: 0;
+    line-height: 1.4;
+}
+
+.cc-required {
+    color: var(--cc-dropdown-required-color, #D93025);
+    margin-left: 0.25rem;
+}
+
+.cc-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: var(--cc-dropdown-height, 2.5rem);
+    padding: var(--cc-dropdown-padding, 0.5rem 0.75rem);
+    background-color: var(--cc-dropdown-bg, #FEFEFE);
+    border: var(--cc-dropdown-border-width, 1px) solid var(--cc-dropdown-border-color, #BDC1C6);
+    border-radius: var(--cc-dropdown-border-radius, 0.4375rem);
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    transition: all 0.2s;
+
+    &:focus {
+        outline: none;
+        border-color: var(--cc-dropdown-focus-border-color, #1A73E8);
+    }
+
+    &.open {
+        border-color: var(--cc-dropdown-focus-border-color, #1A73E8);
+    }
+
+    &.error {
+        border-color: var(--cc-dropdown-error-color, #D93025);
+    }
+
+    &.disabled {
+        background-color: var(--cc-dropdown-disabled-bg, #F1F3F4);
+        cursor: not-allowed;
+        color: var(--cc-dropdown-disabled-color, #80868B);
+
+        .cc-arrow,
+        .cc-clear-btn {
+            color: var(--cc-dropdown-disabled-color, #80868B);
+        }
+    }
+}
+
+.cc-selected-value {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--cc-dropdown-color, #202124);
+    font-size: var(--cc-dropdown-font-size, 0.875rem);
+    font-weight: var(--cc-dropdown-font-weight, 400);
+}
+
+.cc-placeholder {
+    flex: 1;
+    color: var(--cc-dropdown-placeholder-color, #80868B);
+    font-size: var(--cc-dropdown-font-size, 0.875rem);
+}
+
+.cc-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.cc-arrow {
+    color: var(--cc-dropdown-arrow-color, #5F6368);
+    transition: transform 0.2s;
+    font-size: 1.25rem;
+}
+
+.cc-dropdown-trigger.open .cc-arrow {
+    transform: rotate(180deg);
+}
+
+.cc-clear-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cc-dropdown-arrow-color, #5F6368);
+    cursor: pointer;
+
+    &:hover {
+        color: #202124;
+    }
+
+    .material-icons {
+        font-size: 1.125rem;
+    }
+}
+
+// Dropdown Menu
+.cc-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: #FFF;
+    border: 1px solid #BDC1C6; // Default border
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    margin-top: 2px;
+    overflow: hidden;
+    animation: fadeIn 0.1s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.cc-search-container {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--cc-dropdown-divider-color, #E0E0E0);
+}
+
+.cc-dropdown-search-input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #BDC1C6;
+    border-radius: 4px;
+    outline: none;
+    box-sizing: border-box;
+    font-size: 0.875rem;
+
+    &:focus {
+        border-color: var(--cc-dropdown-focus-border-color, #1A73E8);
+    }
+}
+
+.cc-virtual-scroll {
+    width: 100%;
+    // Height set dynamically in template but max-height fallback here
+    max-height: 240px;
+}
+
+.cc-option {
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem;
+    height: 40px; // Match itemSize
+    cursor: pointer;
+    color: var(--cc-dropdown-color, #202124);
+    font-size: var(--cc-dropdown-font-size, 0.875rem);
+    transition: background-color 0.1s;
+    box-sizing: border-box;
+
+    &:hover,
+    &.focused {
+        background-color: #F1F3F4;
+    }
+
+    &.selected {
+        background-color: #E8F0FE;
+        color: #1A73E8;
+    }
+
+    &.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        background-color: transparent;
+    }
+}
+
+.cc-multi-check {
+    margin-right: 0.5rem;
+    color: var(--cc-dropdown-arrow-color, #5F6368);
+    display: flex;
+    align-items: center;
+
+    .material-icons {
+        font-size: 1.25rem;
+    }
+}
+
+.cc-option.selected .cc-multi-check {
+    color: #1A73E8;
+}
+
+.cc-option-icon-wrapper {
+    margin-right: 0.5rem;
+    display: flex;
+    align-items: center;
+
+    .material-icons {
+        font-size: 1.25rem;
+    }
+}
+
+.cc-option-img {
+    width: 1.25rem;
+    height: 1.25rem;
+    object-fit: contain;
+}
+
+.cc-option-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.cc-single-check {
+    margin-left: 0.5rem;
+    color: #1A73E8;
+    display: flex;
+    align-items: center;
+
+    .material-icons {
+        font-size: 1.125rem;
+    }
+}
+
+.cc-no-results {
+    padding: 0.75rem;
+    color: #80868B;
+    text-align: center;
+    font-size: 0.875rem;
+}
+
+.cc-error-message {
+    font-size: 0.75rem;
+    color: var(--cc-dropdown-error-color, #D93025);
+    margin-top: 0.25rem;
+}

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

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

@@ -0,0 +1,53 @@
+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;
+}