platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,107 @@
+/* Radio Component - Alternative Approach with Native Fallback */
+
+.cc-radio-wrapper {
+    display: block;
+    width: 100%;
+    font-family: var(--cc-radio-font-family, inherit);
+}
+
+.cc-radio-group-label {
+    display: block;
+    font-size: var(--cc-radio-group-label-font-size, 14px);
+    font-weight: var(--cc-radio-group-label-font-weight, 500);
+    color: var(--cc-radio-group-label-color, #202124);
+    margin-bottom: 8px;
+}
+
+.cc-radio-group {
+    display: flex;
+    gap: var(--cc-radio-group-gap, 12px);
+}
+
+.cc-radio-group.vertical {
+    flex-direction: column;
+}
+
+.cc-radio-group.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.cc-radio-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: var(--cc-radio-font-size, 14px);
+    color: var(--cc-radio-label-color, #202124);
+    user-select: none;
+    padding: 4px 0;
+}
+
+/* APPROACH 1: Custom Circle (Primary) */
+.cc-native-radio {
+    /* Completely hide but keep accessible */
+    position: absolute;
+    left: -9999px;
+}
+
+.cc-radio-circle {
+    width: var(--cc-radio-size, 20px);
+    height: var(--cc-radio-size, 20px);
+    border: 2px solid var(--cc-radio-unchecked-color, #5F6368);
+    border-radius: var(--cc-radio-border-radius, 50%);
+    margin-right: 8px;
+    flex-shrink: 0;
+    position: relative;
+    background: white;
+    box-sizing: border-box;
+}
+
+.cc-radio-circle::after {
+    content: '';
+    width: calc(var(--cc-radio-size, 20px) * 0.5);
+    height: calc(var(--cc-radio-size, 20px) * 0.5);
+    background: var(--cc-radio-checked-color, #1A73E8);
+    border-radius: var(--cc-radio-border-radius, 50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.2s;
+}
+
+.cc-native-radio:checked+.cc-radio-circle {
+    border-color: var(--cc-radio-checked-color, #1A73E8);
+}
+
+.cc-native-radio:checked+.cc-radio-circle::after {
+    transform: translate(-50%, -50%) scale(1);
+}
+
+/* APPROACH 2: Visible Native Radio (Fallback - uncomment if custom doesn't work) */
+/*
+.cc-native-radio {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    cursor: pointer;
+    flex-shrink: 0;
+    appearance: auto;
+    -webkit-appearance: radio;
+    -moz-appearance: radio;
+}
+
+.cc-radio-circle {
+    display: none;
+}
+*/
+
+.cc-text {
+    line-height: 1.5;
+}
+
+/* Disabled states */
+.cc-radio-label.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

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

@@ -0,0 +1,181 @@
+import { Component, Input, Output, EventEmitter, forwardRef, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { RadioConfig, RadioOption, RadioLabels } from './radio.models';
+
+@Component({
+    selector: 'lib-radio',
+    templateUrl: './radio.component.html',
+    styleUrls: ['./radio.component.scss'],
+    standalone: false,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RadioComponent),
+            multi: true
+        }
+    ]
+})
+export class RadioComponent implements ControlValueAccessor, OnInit {
+    @Input() config?: RadioConfig;
+    @Input() label: string = '';
+    @Input() options: RadioOption[] = [];
+    @Input() disabled: boolean = false;
+    @Input() required: boolean = false;
+    @Input() labelPosition: 'before' | 'after' = 'after';
+    @Input() color: 'primary' | 'warning' | 'danger' | 'success' | 'accent' | 'warn' | string = 'primary';
+    @Input() layout: 'vertical' | 'horizontal' = 'vertical';
+
+    // i18n Labels
+    @Input() labels: RadioLabels = {};
+
+    // Customization — Layout
+    @Input() gap?: string;
+
+    // Customization — Colors
+    @Input() labelColor?: string;
+    @Input() checkedColor?: string;
+    @Input() uncheckedColor?: string;
+
+    // Customization — Typography
+    @Input() fontSize?: string;
+    @Input() fontWeight?: string;
+    @Input() fontFamily?: string;
+
+    // Customization — Group label
+    @Input() groupLabelColor?: string;
+    @Input() groupLabelFontSize?: string;
+    @Input() groupLabelFontWeight?: string;
+
+    // Customization — States
+    @Input() disabledColor?: string;
+    @Input() errorColor?: string;
+
+    // Customization — Size
+    @Input() size?: string;
+    @Input() borderRadius?: string;
+
+    // Customization — Synonyms for Playground
+    @Input() labelFontSize?: string;
+    @Input() labelFontWeight?: string;
+
+    @Output() selectionChange = new EventEmitter<any>();
+
+    value: any;
+    uuid = `radio-group-${Math.random().toString(36).substr(2, 9)}`;
+
+    private onChange: (value: any) => void = () => { };
+    private onTouched: () => void = () => { };
+
+    ngOnInit(): void {
+        this.updateFromConfig();
+        // i18n labels override
+        if (this.labels) {
+            this.label = this.labels.label || this.label;
+        }
+    }
+
+    ngOnChanges(changes: any): void {
+        if (changes.config) {
+            this.updateFromConfig();
+        }
+    }
+
+    private updateFromConfig(): void {
+        if (this.config) {
+            this.label = this.config.label ?? this.label;
+            this.options = this.config.options || this.options;
+            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.layout = this.config.layout ?? this.layout;
+            this.value = this.config.value;
+
+            // Style mappings
+            this.gap = this.config.gap ?? this.gap;
+            this.labelColor = this.config.labelColor ?? this.labelColor;
+            this.checkedColor = this.config.checkedColor ?? this.checkedColor;
+            this.uncheckedColor = this.config.uncheckedColor ?? this.uncheckedColor;
+            this.fontSize = this.config.fontSize ?? this.fontSize;
+            this.fontWeight = this.config.fontWeight ?? this.fontWeight;
+            this.fontFamily = this.config.fontFamily ?? this.fontFamily;
+            this.groupLabelColor = this.config.groupLabelColor ?? this.groupLabelColor;
+            this.groupLabelFontSize = this.config.groupLabelFontSize ?? this.groupLabelFontSize;
+            this.groupLabelFontWeight = this.config.groupLabelFontWeight ?? this.groupLabelFontWeight;
+            this.disabledColor = this.config.disabledColor ?? this.disabledColor;
+            this.errorColor = this.config.errorColor ?? this.errorColor;
+            this.size = this.config.size ?? this.size;
+            this.borderRadius = this.config.borderRadius ?? this.borderRadius;
+            this.labelFontSize = this.config.labelFontSize ?? this.labelFontSize;
+            this.labelFontWeight = this.config.labelFontWeight ?? this.labelFontWeight;
+        }
+    }
+
+
+    get requiredMarker(): string {
+        return this.labels?.requiredMarker || '*';
+    }
+
+    get visibleOptions(): RadioOption[] {
+        return this.options.filter(o => o.label != null && o.label !== '');
+    }
+
+    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;
+    }
+
+    onRadioChange(option: RadioOption): void {
+        this.value = option.value;
+        this.onChange(this.value);
+        this.onTouched();
+        this.selectionChange.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-radio-primary-bg, var(--cc-btn-primary-bg, #1A73E8))',
+            'warning': 'var(--cc-radio-warning-bg, var(--cc-btn-warning-bg, #F9C80E))',
+            'danger': 'var(--cc-radio-danger-bg, var(--cc-btn-danger-bg, #dc3545))',
+            'success': 'var(--cc-radio-success-bg, var(--cc-btn-success-bg, #28a745))',
+            'warn': 'var(--cc-radio-danger-bg, var(--cc-btn-danger-bg, #dc3545))',
+            'accent': 'var(--cc-radio-accent-bg, #ff4081)'
+        };
+        return themeColors[colorStr] || colorStr;
+    }
+
+    get wrapperStyles(): { [key: string]: string | undefined } {
+        return {
+            '--cc-radio-font-family': this.getStyleValue(this.fontFamily),
+            '--cc-radio-font-size': this.getStyleValue(this.fontSize || this.labelFontSize),
+            '--cc-radio-font-weight': this.getStyleValue(this.fontWeight || this.labelFontWeight),
+            '--cc-radio-label-color': this.getStyleValue(this.labelColor),
+            '--cc-radio-size': this.getStyleValue(this.size),
+            '--cc-radio-border-radius': this.getStyleValue(this.borderRadius),
+            '--cc-radio-checked-color': this.getStyleValue(this.getThemeColor(this.checkedColor || this.color)),
+            '--cc-radio-unchecked-color': this.getStyleValue(this.uncheckedColor),
+            '--cc-radio-disabled-color': this.getStyleValue(this.disabledColor),
+            '--cc-radio-error-color': this.getStyleValue(this.errorColor),
+            '--cc-radio-group-gap': this.getStyleValue(this.gap),
+            '--cc-radio-group-label-color': this.getStyleValue(this.groupLabelColor),
+            '--cc-radio-group-label-font-size': this.getStyleValue(this.groupLabelFontSize),
+            '--cc-radio-group-label-font-weight': this.getStyleValue(this.groupLabelFontWeight)
+        };
+    }
+}

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

@@ -0,0 +1,39 @@
+export interface RadioOption {
+    value: any;
+    label: string;
+    disabled?: boolean;
+}
+
+export interface RadioLabels {
+    label?: string;
+    requiredMarker?: string;
+}
+
+export interface RadioConfig {
+    label?: string;
+    options: RadioOption[];
+    value?: any;
+    disabled?: boolean;
+    required?: boolean;
+    labelPosition?: 'before' | 'after';
+    color?: 'primary' | 'warning' | 'danger' | 'success' | 'accent' | 'warn' | string;
+    layout?: 'vertical' | 'horizontal';
+
+    // Customization
+    gap?: string;
+    labelColor?: string;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fontFamily?: string;
+    groupLabelColor?: string;
+    groupLabelFontSize?: string;
+    groupLabelFontWeight?: string;
+    disabledColor?: string;
+    errorColor?: string;
+    size?: string;
+    borderRadius?: string;
+    labelFontSize?: string;
+    labelFontWeight?: string;
+}

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

@@ -0,0 +1,73 @@
+@use 'sass:map';
+
+$default-search-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,
+    disabled-bg: #F1F3F4,
+    disabled-color: #80868B,
+
+    // Icon
+    icon-color: #5F6368
+);
+
+@mixin search-theme($user-config: ()) {
+    $config: map.merge($default-search-config, $user-config);
+
+    // Layout
+    --cc-search-height: #{map.get($config, height)};
+    --cc-search-padding: #{map.get($config, padding)};
+    --cc-search-label-gap: #{map.get($config, label-gap)};
+
+    // Borders
+    --cc-search-border-radius: #{map.get($config, border-radius)};
+    --cc-search-border-color: #{map.get($config, border-color)};
+    --cc-search-border-width: #{map.get($config, border-width)};
+
+    // Colors
+    --cc-search-bg: #{map.get($config, bg)};
+    --cc-search-color: #{map.get($config, color)};
+    --cc-search-placeholder-color: #{map.get($config, placeholder-color)};
+
+    // Typography
+    --cc-search-font-size: #{map.get($config, font-size)};
+    --cc-search-font-weight: #{map.get($config, font-weight)};
+    --cc-search-font-family: #{map.get($config, font-family)};
+
+    // Label
+    --cc-search-label-font-size: #{map.get($config, label-font-size)};
+    --cc-search-label-font-weight: #{map.get($config, label-font-weight)};
+    --cc-search-label-color: #{map.get($config, label-color)};
+
+    // States
+    --cc-search-focus-border-color: #{map.get($config, focus-border-color)};
+    --cc-search-disabled-bg: #{map.get($config, disabled-bg)};
+    --cc-search-disabled-color: #{map.get($config, disabled-color)};
+
+    // Icon
+    --cc-search-icon-color: #{map.get($config, icon-color)};
+}

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

@@ -0,0 +1,15 @@
+<div class="cc-search-wrapper" [ngStyle]="wrapperStyles">
+    <label *ngIf="label" class="cc-search-label" [ngStyle]="labelStyles">{{ label }}</label>
+
+    <div class="cc-search-field" [class.focused]="focused" [class.disabled]="disabled" [ngStyle]="fieldStyles">
+        <span class="cc-search-icon material-icons">search</span>
+
+        <input type="text" class="cc-search-input" [value]="value" [placeholder]="placeholder" [disabled]="disabled"
+            (input)="onInputChange($event)" (blur)="onBlur()" (focus)="onFocus()" />
+
+        <button *ngIf="clearable && value && !disabled" type="button" class="cc-clear-btn" (click)="onClear()"
+            [attr.aria-label]="clearAriaLabel">
+            <span class="material-icons">close</span>
+        </button>
+    </div>
+</div>

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

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