commons-shared-web-ui 0.0.55 → 0.0.56

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

@@ -1,87 +0,0 @@
-.cc-search-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cc-search-label-gap, 0.5rem);
-    width: 100%;
-    font-family: var(--cc-search-font-family, inherit);
-}
-
-.cc-search-label {
-    font-size: var(--cc-search-label-font-size, 0.875rem);
-    font-weight: var(--cc-search-label-font-weight, 500);
-    color: var(--cc-search-label-color, #202124);
-    margin: 0;
-    line-height: 1.4;
-}
-
-.cc-search-field {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    box-sizing: border-box;
-    background-color: var(--cc-search-bg, #FEFEFE);
-    border: var(--cc-search-border-width, 1px) solid var(--cc-search-border-color, #BDC1C6);
-    border-radius: var(--cc-search-border-radius, 0.4375rem);
-    padding: var(--cc-search-padding, 0.5rem 0.75rem);
-    min-height: var(--cc-search-height, 2.5rem);
-    transition: border-color 0.2s, box-shadow 0.2s;
-
-    &.focused {
-        border-color: var(--cc-search-focus-border-color, #1A73E8);
-    }
-
-    &.disabled {
-        background-color: var(--cc-search-disabled-bg, #F1F3F4);
-        cursor: not-allowed;
-
-        .cc-search-input {
-            cursor: not-allowed;
-            color: var(--cc-search-disabled-color, #80868B);
-        }
-
-        .cc-search-icon,
-        .cc-clear-btn {
-            color: var(--cc-search-disabled-color, #80868B);
-        }
-    }
-}
-
-.cc-search-icon {
-    margin-right: 0.5rem;
-    color: var(--cc-search-icon-color, #5F6368);
-    display: flex;
-    align-items: center;
-}
-
-.cc-search-input {
-    flex: 1;
-    border: none;
-    background: none;
-    outline: none;
-    font-family: inherit;
-    font-size: var(--cc-search-font-size, 0.875rem);
-    font-weight: var(--cc-search-font-weight, 400);
-    color: var(--cc-search-color, #202124);
-    padding: 0;
-    margin: 0;
-    width: 100%;
-
-    &::placeholder {
-        color: var(--cc-search-placeholder-color, #80868B);
-    }
-}
-
-.cc-clear-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    margin-left: 0.5rem;
-    display: flex;
-    align-items: center;
-    color: var(--cc-search-icon-color, #5F6368);
-
-    &:focus {
-        outline: none;
-    }
-}

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

@@ -1,213 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { FilterSearchConfig, SearchLabels } from './search.models';
-
-@Component({
-    selector: 'lib-search',
-    templateUrl: './search.component.html',
-    styleUrls: ['./search.component.scss'],
-    standalone: false,
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => SearchComponent),
-            multi: true
-        }
-    ]
-})
-export class SearchComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges {
-    @Input() config?: FilterSearchConfig;
-    @Input() labels?: SearchLabels;
-    @Input() placeholder: string = '';
-    @Input() label: string = '';
-    @Input() disabled: boolean = false;
-    @Input() debounceMs: number = 300;
-    @Input() clearable: boolean = true;
-    @Input() value: any = '';
-
-    // 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() border?: string; // Shorthand
-    @Input() padding?: string;
-    @Input() fontWeight?: string;
-    @Input() color?: string;
-    @Input() textColor?: string; // Alias for color or specific text color
-    @Input() iconColor?: string;
-    @Input() placeholderColor?: string;
-    @Input() focusBorderColor?: string;
-    @Input() disabledBackgroundColor?: string;
-    @Input() disabledColor?: string;
-    @Input() boxShadow?: string;
-
-    @Output() search = new EventEmitter<string>();
-    @Output() clear = new EventEmitter<void>();
-
-    private searchSubject = new Subject<string>();
-    focused = false;
-    onChange: (value: any) => void = () => { };
-    onTouched: () => void = () => { };
-
-    ngOnInit(): void {
-        this.updateFromConfig();
-        this.updateFromLabels();
-        this.searchSubject.pipe(
-            debounceTime(this.debounceMs),
-            distinctUntilChanged()
-        ).subscribe(value => {
-            this.search.emit(value);
-        });
-    }
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes['config']) {
-            this.updateFromConfig();
-        }
-        if (changes['labels']) {
-            this.updateFromLabels();
-        }
-    }
-
-    private updateFromConfig(): void {
-        if (this.config) {
-            this.placeholder = this.config.placeholder ?? this.placeholder;
-            this.label = this.config.label ?? this.label;
-            this.disabled = this.config.disabled ?? this.disabled;
-            this.debounceMs = this.config.debounceTime ?? this.debounceMs;
-            this.clearable = this.config.clearable ?? this.clearable;
-            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.border = this.config.border ?? this.border;
-            this.padding = this.config.padding ?? this.padding;
-            this.fontWeight = this.config.fontWeight ?? this.fontWeight;
-            this.color = this.config.color ?? this.color;
-            this.textColor = this.config.textColor ?? this.textColor;
-            this.iconColor = this.config.iconColor ?? this.iconColor;
-            this.placeholderColor = this.config.placeholderColor ?? this.placeholderColor;
-            this.focusBorderColor = this.config.focusBorderColor ?? this.focusBorderColor;
-            this.disabledBackgroundColor = this.config.disabledBackgroundColor ?? this.disabledBackgroundColor;
-            this.disabledColor = this.config.disabledColor ?? this.disabledColor;
-            this.boxShadow = this.config.boxShadow ?? this.boxShadow;
-            if (this.config.value) {
-                this.value = this.config.value;
-            }
-        }
-    }
-
-    private updateFromLabels(): void {
-        if (this.labels) {
-            this.label = this.labels.label || this.label;
-            this.placeholder = this.labels.placeholder || this.placeholder;
-        }
-    }
-
-    ngOnDestroy(): void {
-        this.searchSubject.complete();
-    }
-
-    get clearAriaLabel(): string {
-        return this.labels?.clearAriaLabel || 'Clear search';
-    }
-
-    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;
-    }
-
-    onInputChange(event: any): void {
-        this.value = event.target.value;
-        this.onChange(this.value);
-        this.searchSubject.next(this.value);
-    }
-
-    onClear(): void {
-        this.value = '';
-        this.onChange(this.value);
-        this.searchSubject.next(this.value);
-        this.clear.emit();
-    }
-
-    onBlur(): void {
-        this.focused = false;
-        this.onTouched();
-    }
-
-    onFocus(): void {
-        this.focused = true;
-    }
-
-    private getStyleValue(value: string | undefined): string | undefined {
-        return value ? `${value}` : undefined;
-    }
-
-    get wrapperStyles(): { [key: string]: string | undefined } {
-        return {
-            'width': this.getStyleValue(this.width),
-            '--cc-search-label-gap': this.getStyleValue(this.gap),
-            '--cc-search-font-family': this.getStyleValue(this.fontFamily)
-        };
-    }
-
-    get labelStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-search-label-color': this.getStyleValue(this.labelColor),
-            '--cc-search-label-font-size': this.getStyleValue(this.labelFontSize),
-            '--cc-search-label-font-weight': this.getStyleValue(this.labelFontWeight)
-        };
-    }
-
-    get fieldStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-search-bg': this.getStyleValue(this.backgroundColor),
-            '--cc-search-border-radius': this.getStyleValue(this.borderRadius),
-            '--cc-search-border-color': this.getStyleValue(this.borderColor),
-            '--cc-search-border-width': this.getStyleValue(this.borderWidth),
-            '--cc-search-border': this.getStyleValue(this.border),
-            '--cc-search-height': this.getStyleValue(this.height),
-            '--cc-search-padding': this.getStyleValue(this.padding),
-            '--cc-search-font-size': this.getStyleValue(this.fontSize),
-            '--cc-search-font-weight': this.getStyleValue(this.fontWeight),
-            '--cc-search-color': this.getStyleValue(this.color || this.textColor),
-            '--cc-search-icon-color': this.getStyleValue(this.iconColor),
-            '--cc-search-placeholder-color': this.getStyleValue(this.placeholderColor),
-            '--cc-search-focus-border-color': this.getStyleValue(this.focusBorderColor),
-            '--cc-search-disabled-bg': this.getStyleValue(this.disabledBackgroundColor),
-            '--cc-search-disabled-color': this.getStyleValue(this.disabledColor),
-            'box-shadow': this.getStyleValue(this.boxShadow)
-        };
-    }
-}

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

@@ -1,40 +0,0 @@
-export interface SearchLabels {
-    label?: string;
-    placeholder?: string;
-    clearAriaLabel?: string;
-}
-
-export interface FilterSearchConfig {
-    placeholder?: string;
-    label?: string;
-    value?: string;
-    disabled?: boolean;
-    debounceTime?: number;
-    clearable?: boolean;
-    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;
-    border?: string;
-    padding?: string;
-    fontWeight?: string;
-    color?: string;
-    textColor?: string;
-    iconColor?: string;
-    placeholderColor?: string;
-    focusBorderColor?: string;
-    errorColor?: string;
-    disabledBackgroundColor?: string;
-    disabledColor?: string;
-    boxShadow?: string;
-}

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

@@ -1,15 +0,0 @@
-<div class="cc-toggle-wrapper" [ngStyle]="wrapperStyles">
-    <label class="cc-toggle-label" [class.label-before]="labelPosition === 'before'" [class.disabled]="disabled">
-
-        <span class="cc-label-text" *ngIf="label && labelPosition === 'before'">{{ label }}</span>
-
-        <span class="cc-toggle-switch">
-            <input type="checkbox" class="cc-native-toggle" [checked]="checked" [disabled]="disabled"
-                (change)="onToggleChange($event)" />
-            <span class="cc-toggle-track"></span>
-            <span class="cc-toggle-thumb"></span>
-        </span>
-
-        <span class="cc-label-text" *ngIf="label && labelPosition === 'after'">{{ label }}</span>
-    </label>
-</div>

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

@@ -1,81 +0,0 @@
-.cc-toggle-wrapper {
-    display: flex;
-    flex-direction: column;
-    font-family: var(--cc-toggle-font-family, inherit);
-}
-
-.cc-toggle-label {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    font-size: var(--cc-toggle-font-size, 0.875rem);
-    font-weight: var(--cc-toggle-font-weight, 400);
-    color: var(--cc-toggle-label-color, #202124);
-    gap: 0.5rem;
-
-    &.disabled {
-        cursor: not-allowed;
-        color: var(--cc-toggle-disabled-color, #80868B);
-
-        .cc-toggle-track {
-            background-color: var(--cc-toggle-disabled-color, #E0E0E0);
-            opacity: 0.5;
-        }
-
-        .cc-toggle-thumb {
-            background-color: #BDBDBD;
-        }
-    }
-}
-
-.cc-toggle-switch {
-    position: relative;
-    width: var(--cc-toggle-width, 2.25rem);
-    height: var(--cc-toggle-height, 1.25rem);
-}
-
-.cc-native-toggle {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-
-    // Checked State
-    &:checked~.cc-toggle-track {
-        background-color: var(--cc-toggle-checked-bg, #1A73E8);
-    }
-
-    &:checked~.cc-toggle-thumb {
-        // Move to the right: 100% of track width - thumb width - left offset
-        // left is 2px. So we want right to be 2px.
-        // translateX is relative to the element itself.
-        // Better approach: use left and calc.
-        left: calc(100% - var(--cc-toggle-height, 1.25rem) + 2px);
-        background-color: var(--cc-toggle-checked-thumb-color, #FEFEFE);
-    }
-}
-
-.cc-toggle-track {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--cc-toggle-unchecked-bg, #BDC1C6);
-    border-radius: 1rem;
-    transition: 0.2s;
-}
-
-.cc-toggle-thumb {
-    position: absolute;
-    top: 50%;
-    left: 2px;
-    width: calc(var(--cc-toggle-height, 1.25rem) - 4px);
-    height: calc(var(--cc-toggle-height, 1.25rem) - 4px);
-    transform: translateY(-50%);
-    background-color: var(--cc-toggle-thumb-color, #FEFEFE);
-    border-radius: 50%;
-    transition: 0.2s;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}

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

@@ -1,166 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ToggleConfig, ToggleLabels } from './toggle.models';
-
-@Component({
-    selector: 'lib-toggle',
-    templateUrl: './toggle.component.html',
-    styleUrls: ['./toggle.component.scss'],
-    standalone: false,
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => ToggleComponent),
-            multi: true
-        }
-    ]
-})
-export class ToggleComponent implements ControlValueAccessor, OnInit, OnChanges {
-    @Input() config?: ToggleConfig;
-    @Input() labels?: ToggleLabels;
-    @Input() label: string = '';
-    @Input() checked: boolean = false;
-    @Input() disabled: boolean = false;
-    @Input() required: boolean = false;
-    @Input() labelPosition: 'before' | 'after' = 'after';
-    @Input() color: string = '#1A73E8';
-
-    // Customization — Colors
-    @Input() labelColor?: string;
-    @Input() uncheckedColor?: string;
-    @Input() checkedColor?: string;
-    @Input() thumbColor?: string;
-    @Input() checkedThumbColor?: string;
-
-    // Customization — Typography
-    @Input() fontSize?: string;
-    @Input() fontWeight?: string;
-    @Input() fontFamily?: string;
-
-    // Customization — Size
-    @Input() toggleWidth?: string;
-    @Input() toggleHeight?: string;
-    @Input() gap?: string;
-
-    // Customization — Slider
-    @Input() sliderColor?: string;
-
-    // Customization — Label
-    @Input() labelFontSize?: string;
-    @Input() labelFontWeight?: string;
-
-    // Customization — States
-    @Input() disabledColor?: string;
-
-    @Output() toggleChange = new EventEmitter<boolean>();
-
-    value: boolean = false;
-
-    private onChange: (value: any) => void = () => { };
-    private onTouched: () => void = () => { };
-
-    ngOnInit(): void {
-        this.updateFromConfig();
-        this.updateFromLabels();
-        this.value = this.checked;
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes['config']) {
-            this.updateFromConfig();
-        }
-        if (changes['labels']) {
-            this.updateFromLabels();
-        }
-        if (changes['checked']) {
-            this.value = this.checked;
-        }
-    }
-
-    private updateFromConfig(): void {
-        if (this.config) {
-            this.label = this.config.label ?? this.label;
-            this.checked = this.config.checked ?? this.checked;
-            this.disabled = this.config.disabled ?? this.disabled;
-            this.required = this.config.required ?? this.required;
-            this.labelPosition = this.config.labelPosition ?? this.labelPosition;
-            this.color = this.config.color ?? this.color;
-            this.uncheckedColor = this.config.uncheckedColor ?? this.uncheckedColor;
-            this.checkedColor = this.config.checkedColor ?? this.checkedColor;
-            this.thumbColor = this.config.thumbColor ?? this.thumbColor;
-            this.checkedThumbColor = this.config.checkedThumbColor ?? this.checkedThumbColor;
-            this.fontSize = this.config.fontSize ?? this.fontSize;
-            this.fontWeight = this.config.fontWeight ?? this.fontWeight;
-            this.toggleWidth = this.config.toggleWidth ?? this.toggleWidth;
-            this.toggleHeight = this.config.toggleHeight ?? this.toggleHeight;
-            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;
-        }
-    }
-
-    private updateFromLabels(): void {
-        if (this.labels) {
-            this.label = this.labels.label || this.label;
-        }
-    }
-
-    writeValue(value: any): void {
-        this.value = !!value;
-        this.checked = this.value;
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-
-    onToggleChange(event: any): void {
-        this.value = event.target.checked;
-        this.checked = this.value;
-        this.onChange(this.value);
-        this.onTouched();
-        this.toggleChange.emit(this.value);
-    }
-
-    private getStyleValue(value: string | undefined): string | undefined {
-        return value ? `${value}` : undefined;
-    }
-
-    private getThemeColor(colorStr: string | undefined): string | undefined {
-        if (!colorStr) return undefined;
-        const themeColors: { [key: string]: string } = {
-            'primary': 'var(--cc-toggle-primary-bg, var(--cc-btn-primary-bg, #1A73E8))',
-            'warning': 'var(--cc-toggle-warning-bg, var(--cc-btn-warning-bg, #F9C80E))',
-            'danger': 'var(--cc-toggle-danger-bg, var(--cc-btn-danger-bg, #dc3545))',
-            'success': 'var(--cc-toggle-success-bg, var(--cc-btn-success-bg, #28a745))'
-        };
-        return themeColors[colorStr] || colorStr;
-    }
-
-    get wrapperStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-toggle-font-family': this.getStyleValue(this.fontFamily),
-            '--cc-toggle-font-size': this.getStyleValue(this.fontSize || this.labelFontSize),
-            '--cc-toggle-font-weight': this.getStyleValue(this.fontWeight || this.labelFontWeight),
-            '--cc-toggle-label-color': this.getStyleValue(this.labelColor),
-            '--cc-toggle-width': this.getStyleValue(this.toggleWidth),
-            '--cc-toggle-height': this.getStyleValue(this.toggleHeight),
-            '--cc-toggle-gap': this.getStyleValue(this.gap),
-            '--cc-toggle-unchecked-bg': this.getStyleValue(this.uncheckedColor),
-            '--cc-toggle-checked-bg': this.getStyleValue(this.getThemeColor(this.checkedColor || this.color)),
-            '--cc-toggle-thumb-color': this.getStyleValue(this.thumbColor || this.sliderColor),
-            '--cc-toggle-checked-thumb-color': this.getStyleValue(this.checkedThumbColor),
-            '--cc-toggle-disabled-color': this.getStyleValue(this.disabledColor)
-        };
-    }
-}

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

@@ -1,27 +0,0 @@
-export interface ToggleLabels {
-    label?: string;
-}
-
-export interface ToggleConfig {
-    label?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    labelPosition?: 'before' | 'after';
-    color?: 'primary' | 'warning' | 'danger' | 'success' | string;
-    uncheckedColor?: string;
-    checkedColor?: string;
-    thumbColor?: string;
-    checkedThumbColor?: string;
-    fontSize?: string;
-    fontWeight?: string;
-    toggleWidth?: string;
-    toggleHeight?: string;
-
-    // Additional Style Props
-    gap?: string;
-    fontFamily?: string;
-    labelColor?: string;
-    labelFontSize?: string;
-    labelFontWeight?: string;
-}

package/src/lib/modules/form-components/directives/click-outside.directive.ts

@@ -1,22 +0,0 @@
-import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';
-
-@Directive({
-    selector: '[libClickOutside]',
-    standalone: false
-})
-export class ClickOutsideDirective {
-    @Output() libClickOutside = new EventEmitter<void>();
-
-    constructor(private elementRef: ElementRef) { }
-
-    @HostListener('document:click', ['$event.target'])
-    public onClick(target: any): void {
-        // Skip if the target was removed from the DOM before the click event fired
-        // (happens with CDK virtual scroll which detaches nodes during rendering)
-        if (!document.documentElement.contains(target)) return;
-        const clickedInside = this.elementRef.nativeElement.contains(target);
-        if (!clickedInside) {
-            this.libClickOutside.emit();
-        }
-    }
-}