commons-shared-web-ui 0.0.55 → 0.0.57

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

@@ -1,267 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DatePickerConfig, DatepickerLabels } from './datepicker.models';
-
-@Component({
-    selector: 'lib-datepicker',
-    templateUrl: './datepicker.component.html',
-    styleUrls: ['./datepicker.component.scss'],
-    standalone: false,
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => DatepickerComponent),
-            multi: true
-        }
-    ]
-})
-export class DatepickerComponent implements ControlValueAccessor, OnInit, OnChanges {
-    @Input() config?: DatePickerConfig;
-    @Input() labels?: DatepickerLabels;
-    @Input() label: string = '';
-    @Input() placeholder: string = '';
-    @Input() disabled: boolean = false;
-    @Input() required: boolean = false;
-    @Input() minDate?: string | Date; // Support string for native input
-    @Input() maxDate?: string | Date; // Support string for native input
-    @Input() isRange: boolean = false;
-    @Input() startView: 'month' | 'year' | 'multi-year' = 'month';
-    @Input() value: any = null;
-    @Input() startDate?: string | Date;
-    @Input() endDate?: string | Date;
-    @Input() errorMessage: string = '';
-
-    // Style inputs
-    @Input() width?: string;
-    @Input() height?: string;
-    @Input() borderRadius?: string;
-    @Input() fontSize?: string;
-
-    @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() dateChange = new EventEmitter<any>();
-
-    onChange: (value: any) => void = () => { };
-    onTouched: () => void = () => { };
-
-    focused = false;
-
-    ngOnInit(): void {
-        this.updateFromConfig();
-        this.updateFromLabels();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes['config']) {
-            this.updateFromConfig();
-        }
-        if (changes['labels']) {
-            this.updateFromLabels();
-        }
-    }
-
-    private updateFromConfig(): void {
-        if (this.config) {
-            this.label = this.config.label ?? this.label;
-            this.placeholder = this.config.placeholder ?? this.placeholder;
-            this.disabled = this.config.disabled ?? this.disabled;
-            this.required = this.config.required ?? this.required;
-            this.minDate = this.config.minDate ?? this.minDate;
-            this.maxDate = this.config.maxDate ?? this.maxDate;
-            this.isRange = this.config.isRange ?? this.isRange;
-            this.width = this.config.width ?? this.width;
-            this.borderRadius = this.config.borderRadius ?? this.borderRadius;
-            this.fontSize = this.config.fontSize ?? this.fontSize;
-            this.errorMessage = this.config.errorMessage ?? this.errorMessage;
-            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;
-            this.height = this.config.height ?? this.height;
-
-            if (this.config.value !== undefined) {
-                this.value = this.config.value;
-            }
-            if (this.config.startDate) {
-                this.startDate = this.config.startDate;
-            }
-            if (this.config.endDate) {
-                this.endDate = this.config.endDate;
-            }
-        }
-    }
-
-    private updateFromLabels(): void {
-        if (this.labels) {
-            this.label = this.labels.label || this.label;
-            this.placeholder = this.labels.placeholder || this.placeholder;
-        }
-    }
-
-    get requiredMarker(): string {
-        return this.labels?.requiredMarker || '*';
-    }
-
-    get startDateLabel(): string {
-        return this.labels?.startDateLabel || 'Start Date';
-    }
-
-    get endDateLabel(): string {
-        return this.labels?.endDateLabel || 'End Date';
-    }
-
-    // Helper to format Date or string to YYYY-MM-DD for native input
-    private formatDate(date: Date | string | undefined | null): string {
-        if (!date) return '';
-        if (typeof date === 'string') return date; // Assume already formatted or ISO
-        try {
-            return date.toISOString().split('T')[0];
-        } catch (e) {
-            return '';
-        }
-    }
-
-    get formattedValue(): string {
-        return this.formatDate(this.value);
-    }
-
-    get formattedStartDate(): string {
-        return this.formatDate(this.startDate);
-    }
-
-    get formattedEndDate(): string {
-        return this.formatDate(this.endDate);
-    }
-
-    get formattedMin(): string {
-        return this.formatDate(this.minDate);
-    }
-
-    get formattedMax(): string {
-        return this.formatDate(this.maxDate);
-    }
-
-
-    writeValue(value: any): void {
-        if (this.isRange && value && typeof value === 'object' && 'start' in value) {
-            this.startDate = value.start;
-            this.endDate = value.end;
-        } else {
-            this.value = value;
-        }
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-
-    onDateInput(event: any): void {
-        const value = event.target.value;
-        this.value = value; // Keep as string or convert if needed
-        this.onChange(this.value);
-        this.dateChange.emit(this.value);
-    }
-
-    onBlur(): void {
-        this.focused = false;
-        this.onTouched();
-    }
-
-    onFocus(): void {
-        this.focused = true;
-    }
-
-    onRangeStartInput(event: any): void {
-        this.startDate = event.target.value;
-        this.updateRangeValue();
-    }
-
-    onRangeEndInput(event: any): void {
-        this.endDate = event.target.value;
-        this.updateRangeValue();
-    }
-
-    private updateRangeValue(): void {
-        const rangeValue = { start: this.startDate, end: this.endDate };
-        this.onChange(rangeValue);
-        this.dateChange.emit(rangeValue);
-    }
-
-    private getStyleValue(value: string | undefined): string | undefined {
-        return value ? `${value}` : undefined;
-    }
-
-    get wrapperStyles(): { [key: string]: string | undefined } {
-        return {
-            'width': this.getStyleValue(this.width),
-            '--cc-datepicker-label-gap': this.getStyleValue(this.gap),
-            '--cc-datepicker-font-family': this.getStyleValue(this.fontFamily)
-        };
-    }
-
-    get labelStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-datepicker-label-color': this.getStyleValue(this.labelColor),
-            '--cc-datepicker-label-font-size': this.getStyleValue(this.labelFontSize),
-            '--cc-datepicker-label-font-weight': this.getStyleValue(this.labelFontWeight)
-        };
-    }
-
-    get fieldStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-datepicker-bg': this.getStyleValue(this.backgroundColor),
-            '--cc-datepicker-border-radius': this.getStyleValue(this.borderRadius),
-            '--cc-datepicker-border-color': this.getStyleValue(this.borderColor),
-            '--cc-datepicker-border-width': this.getStyleValue(this.borderWidth),
-            '--cc-datepicker-height': this.getStyleValue(this.height),
-            '--cc-datepicker-padding': this.getStyleValue(this.padding),
-            '--cc-datepicker-font-size': this.getStyleValue(this.fontSize),
-            '--cc-datepicker-font-weight': this.getStyleValue(this.fontWeight),
-            '--cc-datepicker-color': this.getStyleValue(this.color),
-            '--cc-datepicker-placeholder-color': this.getStyleValue(this.placeholderColor),
-            '--cc-datepicker-focus-border-color': this.getStyleValue(this.focusBorderColor),
-            '--cc-datepicker-error-color': this.getStyleValue(this.errorColor),
-            '--cc-datepicker-disabled-bg': this.getStyleValue(this.disabledBackgroundColor),
-            '--cc-datepicker-disabled-color': this.getStyleValue(this.disabledColor),
-            'box-shadow': this.getStyleValue(this.boxShadow)
-        };
-    }
-}

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

@@ -1,45 +0,0 @@
-export interface DatepickerLabels {
-    label?: string;
-    placeholder?: string;
-    startDateLabel?: string;
-    endDateLabel?: string;
-    requiredMarker?: string;
-}
-
-export interface DatePickerConfig {
-    label?: string;
-    placeholder?: string;
-    value?: Date;
-    disabled?: boolean;
-    required?: boolean;
-    minDate?: Date;
-    maxDate?: Date;
-    startView?: 'month' | 'year' | 'multi-year';
-    isRange?: boolean;
-    startDate?: Date;
-    endDate?: Date;
-    width?: string;
-    borderRadius?: string;
-    fontSize?: string;
-    errorMessage?: 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;
-    height?: string;
-}

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

@@ -1,74 +0,0 @@
-<div class="cc-dropdown-wrapper" [ngStyle]="wrapperStyles" libClickOutside (libClickOutside)="close()">
-    <!-- Label -->
-    <label *ngIf="label" class="cc-dropdown-label" [ngStyle]="labelStyles">
-        {{ label }}
-        <span *ngIf="required" class="cc-required">{{ resolvedLabels.requiredMarker }}</span>
-    </label>
-
-    <!-- Trigger -->
-    <div #triggerEl class="cc-dropdown-trigger" [class.disabled]="disabled" [class.open]="isOpen" [class.error]="errorMessage"
-        (click)="toggle()" tabindex="0" (keydown)="handleKeyboardEvent($event)" [ngStyle]="fieldStyles">
-
-        <div class="cc-selected-value" *ngIf="hasValue()">
-            {{ multiple ? value.length + ' ' + resolvedLabels.selectedSuffix : getSelectedLabel() }}
-        </div>
-        <div class="cc-placeholder" *ngIf="!hasValue()">{{ placeholder }}</div>
-
-        <div class="cc-actions">
-            <span *ngIf="clearable && hasValue() && !disabled" class="cc-clear-btn" (click)="clearSelection($event)"
-                [attr.aria-label]="resolvedLabels.clearAriaLabel">
-                <span class="material-icons">close</span>
-            </span>
-            <span class="cc-arrow material-icons">expand_more</span>
-        </div>
-    </div>
-
-    <!-- Dropdown Menu -->
-    <div class="cc-dropdown-menu" *ngIf="isOpen"
-         [ngStyle]="{ position: 'fixed', top: menuPosition.top + 'px', left: menuPosition.left + 'px', width: menuPosition.width + 'px', 'z-index': '9999' }"
-         (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()">
-        <!-- Search -->
-        <div class="cc-search-container" *ngIf="searchable">
-            <input type="text" #searchInput [placeholder]="resolvedLabels.searchPlaceholder"
-                (input)="onSearch($any($event.target).value)" (click)="$event.stopPropagation()"
-                class="cc-dropdown-search-input" />
-        </div>
-
-        <!-- Options Virtual Scroll -->
-        <cdk-virtual-scroll-viewport itemSize="40" class="cc-virtual-scroll"
-            [style.height.px]="filteredOptions.length * 40 > 240 ? 240 : (filteredOptions.length * 40 || 40)">
-
-            <div *cdkVirtualFor="let option of filteredOptions; let i = index" class="cc-option"
-                [class.selected]="isSelected(option)" [class.focused]="i === focusedIndex"
-                [class.disabled]="option.disabled" (click)="selectOption(option)">
-
-                <!-- Multi-select checkbox visual -->
-                <span class="cc-multi-check" *ngIf="multiple">
-                    <span class="material-icons" *ngIf="isSelected(option)">check_box</span>
-                    <span class="material-icons" *ngIf="!isSelected(option)">check_box_outline_blank</span>
-                </span>
-
-                <!-- Icon -->
-                <span class="cc-option-icon-wrapper" *ngIf="option.icon">
-                    <span class="material-icons" *ngIf="getIconType(option.icon) === 'material'">{{
-                        getIconValue(option.icon) }}</span>
-                    <i *ngIf="getIconType(option.icon) === 'fontawesome'" [class]="getIconValue(option.icon)"></i>
-                    <img *ngIf="getIconType(option.icon) === 'img'" [src]="getIconValue(option.icon)"
-                        class="cc-option-img" alt="icon" />
-                </span>
-
-                <span class="cc-option-label">{{ option.label }}</span>
-
-                <!-- Single-select check visual -->
-                <span class="cc-single-check" *ngIf="!multiple && isSelected(option)">
-                    <span class="material-icons">check</span>
-                </span>
-            </div>
-
-            <div *ngIf="filteredOptions.length === 0" class="cc-no-results">{{ resolvedLabels.noResultsFound }}</div>
-        </cdk-virtual-scroll-viewport>
-    </div>
-
-    <!-- Error Message -->
-    <div class="cc-error-message" *ngIf="errorMessage">{{ errorMessage }}</div>
-</div>

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

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