platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,77 @@
+@use 'sass:map';
+
+$default-input-config: (
+    // Layout
+    height: 2.5rem,
+    padding: 0.375rem 1rem,
+    label-gap: 0.5rem,
+
+    // Borders
+    border-radius: 0.4375rem,
+    border-color: #BDC1C6,
+    border-width: 1px,
+
+    // Colors
+    bg: #FEFEFE,
+    color: #202124,
+    placeholder-color: #80868B,
+
+    // Typography
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+
+    // Label
+    label-font-size: 0.875rem,
+    label-font-weight: 500,
+    label-color: #202124,
+
+    // States
+    focus-border-color: #1A73E8,
+    error-color: #D93025,
+    disabled-bg: #F1F3F4,
+    disabled-color: #80868B,
+    required-color: #D93025,
+
+    // Icon
+    icon-color: #5F6368
+);
+
+@mixin input-theme($user-config: ()) {
+    $config: map.merge($default-input-config, $user-config);
+
+    // Layout
+    --cc-input-height: #{map.get($config, height)};
+    --cc-input-padding: #{map.get($config, padding)};
+    --cc-input-label-gap: #{map.get($config, label-gap)};
+
+    // Borders
+    --cc-input-border-radius: #{map.get($config, border-radius)};
+    --cc-input-border-color: #{map.get($config, border-color)};
+    --cc-input-border-width: #{map.get($config, border-width)};
+
+    // Colors
+    --cc-input-bg: #{map.get($config, bg)};
+    --cc-input-color: #{map.get($config, color)};
+    --cc-input-placeholder-color: #{map.get($config, placeholder-color)};
+
+    // Typography
+    --cc-input-font-size: #{map.get($config, font-size)};
+    --cc-input-font-weight: #{map.get($config, font-weight)};
+    --cc-input-font-family: #{map.get($config, font-family)};
+
+    // Label
+    --cc-input-label-font-size: #{map.get($config, label-font-size)};
+    --cc-input-label-font-weight: #{map.get($config, label-font-weight)};
+    --cc-input-label-color: #{map.get($config, label-color)};
+
+    // States
+    --cc-input-focus-border-color: #{map.get($config, focus-border-color)};
+    --cc-input-error-color: #{map.get($config, error-color)};
+    --cc-input-disabled-bg: #{map.get($config, disabled-bg)};
+    --cc-input-disabled-color: #{map.get($config, disabled-color)};
+    --cc-input-required-color: #{map.get($config, required-color)};
+
+    // Icon
+    --cc-input-icon-color: #{map.get($config, icon-color)};
+}

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

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

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

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

@@ -0,0 +1,250 @@
+import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InputConfig, InputType, InputLabels } from './input.models';
+
+@Component({
+    selector: 'lib-input',
+    templateUrl: './input.component.html',
+    styleUrls: ['./input.component.scss'],
+    standalone: false,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => InputComponent),
+            multi: true
+        }
+    ]
+})
+export class InputComponent implements ControlValueAccessor, OnInit, OnChanges {
+    @Input() config?: InputConfig;
+    @Input() labels?: InputLabels;
+    @Input() type: InputType = 'text';
+    @Input() label: string = '';
+    @Input() placeholder: string = '';
+    @Input() disabled: boolean = false;
+    @Input() required: boolean = false;
+    @Input() readonly: boolean = false;
+    @Input() clearable: boolean = true;
+    @Input() maxLength?: number;
+    @Input() minLength?: number;
+    @Input() min?: number | string;
+    @Input() max?: number | string;
+    @Input() pattern?: string;
+    @Input() errorMessage: string = '';
+    @Input() helperText: string = '';
+    @Input() rows: number = 3;
+    @Input() prefixIcon?: any;
+    @Input() suffixIcon?: any;
+    @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() 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() valueChange = new EventEmitter<any>();
+    @Output() inputBlur = new EventEmitter<void>();
+    @Output() inputFocus = new EventEmitter<void>();
+
+    showPassword = false;
+    focused = false;
+    onChange: (value: any) => void = () => { };
+    onTouched: () => void = () => { };
+
+    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.type = this.config.type ?? this.type;
+            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.readonly = this.config.readonly ?? this.readonly;
+            this.maxLength = this.config.maxLength ?? this.maxLength;
+            this.minLength = this.config.minLength ?? this.minLength;
+            this.min = this.config.min ?? this.min;
+            this.max = this.config.max ?? this.max;
+            this.pattern = this.config.pattern ?? this.pattern;
+            this.errorMessage = this.config.errorMessage ?? this.errorMessage;
+            this.helperText = this.config.helperText ?? this.helperText;
+            this.rows = this.config.rows ?? this.rows;
+            this.prefixIcon = this.config.prefixIcon ?? this.prefixIcon;
+            this.suffixIcon = this.config.suffixIcon ?? this.suffixIcon;
+
+            // Style inputs
+            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;
+
+            if (this.config.value !== undefined) {
+                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;
+            this.errorMessage = this.labels.errorMessage || this.errorMessage;
+            this.helperText = this.labels.helperText || this.helperText;
+        }
+    }
+
+    get requiredMarker(): string {
+        return this.labels?.requiredMarker || '*';
+    }
+
+    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 {
+        const value = event.target.value;
+        this.value = this.type === 'number' ? (value ? Number(value) : null) : value;
+        this.onChange(this.value);
+        this.valueChange.emit(this.value);
+    }
+
+    onBlur(): void {
+        this.focused = false;
+        this.onTouched();
+        this.inputBlur.emit();
+    }
+
+    onFocus(): void {
+        this.focused = true;
+        this.inputFocus.emit();
+    }
+
+    togglePasswordVisibility(): void {
+        this.showPassword = !this.showPassword;
+    }
+
+    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 || '';
+    }
+
+    get inputType(): string {
+        if (this.type === 'password' && this.showPassword) {
+            return 'text';
+        }
+        return this.type === 'textarea' ? 'text' : this.type;
+    }
+
+    private getStyleValue(value: string | undefined): string | undefined {
+        return value ? `${value}` : undefined;
+    }
+
+    get wrapperStyles(): { [key: string]: string | undefined } {
+        return {
+            'width': this.getStyleValue(this.width),
+            '--cc-input-label-gap': this.getStyleValue(this.gap),
+            '--cc-input-font-family': this.getStyleValue(this.fontFamily)
+        };
+    }
+
+    get labelStyles(): { [key: string]: string | undefined } {
+        return {
+            '--cc-input-label-color': this.getStyleValue(this.labelColor),
+            '--cc-input-label-font-size': this.getStyleValue(this.labelFontSize),
+            '--cc-input-label-font-weight': this.getStyleValue(this.labelFontWeight)
+        };
+    }
+
+    get fieldStyles(): { [key: string]: string | undefined } {
+        return {
+            '--cc-input-bg': this.getStyleValue(this.backgroundColor),
+            '--cc-input-border-radius': this.getStyleValue(this.borderRadius),
+            '--cc-input-border-color': this.getStyleValue(this.borderColor),
+            '--cc-input-border-width': this.getStyleValue(this.borderWidth),
+            '--cc-input-height': this.getStyleValue(this.height),
+            '--cc-input-padding': this.getStyleValue(this.padding),
+            '--cc-input-font-size': this.getStyleValue(this.fontSize),
+            '--cc-input-font-weight': this.getStyleValue(this.fontWeight),
+            '--cc-input-color': this.getStyleValue(this.color),
+            '--cc-input-placeholder-color': this.getStyleValue(this.placeholderColor),
+            '--cc-input-focus-border-color': this.getStyleValue(this.focusBorderColor),
+            '--cc-input-error-color': this.getStyleValue(this.errorColor),
+            '--cc-input-disabled-bg': this.getStyleValue(this.disabledBackgroundColor),
+            '--cc-input-disabled-color': this.getStyleValue(this.disabledColor),
+            'box-shadow': this.getStyleValue(this.boxShadow)
+        };
+    }
+}
+

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

@@ -0,0 +1,55 @@
+export type InputType = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'textarea';
+
+export interface InputLabels {
+    label?: string;
+    placeholder?: string;
+    errorMessage?: string;
+    helperText?: string;
+    requiredMarker?: string;
+    passwordToggleAriaLabel?: string;
+    prefixAltText?: string;
+    suffixAltText?: string;
+}
+
+export interface InputConfig {
+    type?: InputType;
+    label?: string;
+    placeholder?: string;
+    value?: any;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    min?: number;
+    max?: number;
+    pattern?: string;
+    errorMessage?: string;
+    helperText?: string;
+    rows?: number; // For textarea
+    // Icons
+    prefixIcon?: string | { type: 'material' | 'fontawesome' | 'img'; value: string };
+    suffixIcon?: string | { type: 'material' | 'fontawesome' | 'img'; value: string };
+    // Customization
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    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/radio/_theme.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+
+$default-radio-config: (
+    // Layout
+    label-gap: 0.5rem,
+    group-gap: 0.75rem,
+
+    // Label
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+    label-color: #202124,
+
+    // Group label
+    group-label-font-size: 0.875rem,
+    group-label-font-weight: 500,
+    group-label-color: #202124,
+
+    // Size
+    size: 1.25rem,
+
+    // Colors
+    checked-color: #1A73E8,
+    unchecked-color: #BDC1C6,
+
+    // States
+    disabled-color: #80868B,
+    error-color: #D93025,
+    required-color: #D93025
+);
+
+@mixin radio-theme($user-config: ()) {
+    $config: map.merge($default-radio-config, $user-config);
+
+    // Layout
+    --cc-radio-label-gap: #{map.get($config, label-gap)};
+    --cc-radio-group-gap: #{map.get($config, group-gap)};
+
+    // Label
+    --cc-radio-font-size: #{map.get($config, font-size)};
+    --cc-radio-font-weight: #{map.get($config, font-weight)};
+    --cc-radio-font-family: #{map.get($config, font-family)};
+    --cc-radio-label-color: #{map.get($config, label-color)};
+
+    // Group label
+    --cc-radio-group-label-font-size: #{map.get($config, group-label-font-size)};
+    --cc-radio-group-label-font-weight: #{map.get($config, group-label-font-weight)};
+    --cc-radio-group-label-color: #{map.get($config, group-label-color)};
+
+    // Size
+    --cc-radio-size: #{map.get($config, size)};
+
+    // Colors
+    --cc-radio-checked-color: #{map.get($config, checked-color)};
+    --cc-radio-unchecked-color: #{map.get($config, unchecked-color)};
+
+    // States
+    --cc-radio-disabled-color: #{map.get($config, disabled-color)};
+    --cc-radio-error-color: #{map.get($config, error-color)};
+    --cc-radio-required-color: #{map.get($config, required-color)};
+}

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

@@ -0,0 +1,22 @@
+<div class="cc-radio-wrapper" [ngStyle]="wrapperStyles">
+    <label *ngIf="label" class="cc-radio-group-label" [class.disabled]="disabled">
+        {{ label }}
+        <span *ngIf="required" class="cc-required">{{ requiredMarker }}</span>
+    </label>
+
+    <div class="cc-radio-group" [class.horizontal]="layout === 'horizontal'" [class.vertical]="layout === 'vertical'"
+        role="radiogroup">
+
+        <label class="cc-radio-label" *ngFor="let option of visibleOptions; let i = index"
+            [class.disabled]="disabled || option.disabled" [class.checked]="value === option.value"
+            [class.label-before]="labelPosition === 'before'">
+
+            <input type="radio" [name]="uuid" [value]="option.value" [checked]="value === option.value"
+                [disabled]="disabled || option.disabled" (change)="onRadioChange(option)" class="cc-native-radio"
+                [id]="uuid + '-' + i">
+
+            <span class="cc-radio-circle"></span>
+            <span class="cc-text">{{ option.label }}</span>
+        </label>
+    </div>
+</div>