commons-shared-web-ui 0.0.62 → 0.0.63

package/src/lib/modules/form-builder/utils/constants.ts

@@ -1,43 +0,0 @@
-/** Available field types that users can switch to in the configurator. */
-export const SWITCHABLE_FIELD_TYPES = [
-  { label: 'Short Text',      value: 'shortText'      },
-  { label: 'Long Text',       value: 'longText'       },
-  { label: 'Email',           value: 'email'          },
-  { label: 'Phone',           value: 'phone'          },
-  { label: 'Password',        value: 'password'       },
-  { label: 'Number (Integer)',value: 'number'         },
-  { label: 'Number (Decimal)',value: 'decimal'        },
-  { label: 'Date',            value: 'date'           },
-  { label: 'Time',            value: 'time'           },
-  { label: 'Date & Time',     value: 'dateTime'       },
-  { label: 'Dropdown',        value: 'dropdown'       },
-  { label: 'Multi-Select',    value: 'multiSelect'    },
-  { label: 'Autocomplete',    value: 'autocomplete'   },
-  { label: 'Checkbox',        value: 'checkbox'       },
-  { label: 'Multi-Checkbox',  value: 'multiCheckbox'  },
-  { label: 'Radio',           value: 'radio'          },
-  { label: 'Toggle',          value: 'toggle'         },
-  { label: 'Chips',           value: 'chip'           },
-  { label: 'Rich Text',       value: 'richText'       },
-  { label: 'File Upload',     value: 'file'           },
-  { label: 'Rating',          value: 'rating'         },
-  { label: 'Location',        value: 'location'       },
-  { label: 'Formula (Auto)',  value: 'generated'      },
-];
-
-/**
- * Field types that are driven by option configurations (optionConfig).
- * When `hideToggleForOptionTypes` is true on the field-selection configurator,
- * these field types will not show the enable/disable toggle — they are
- * UI element types whose options are pre-filled by the developer.
- */
-export const OPTION_DRIVEN_FIELD_TYPES: ReadonlySet<string> = new Set([
-  'DROPDOWN',
-  'MULTI_SELECT',
-  'RADIO',
-  'AUTOCOMPLETE',
-  'CHECKBOX',
-  'MULTI_CHECKBOX',
-  'CHIP',
-]);
-

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

@@ -1,29 +0,0 @@
-<div class="cc-checkbox-wrapper" [ngStyle]="wrapperStyles">
-
-    <!-- Single Checkbox -->
-    <label *ngIf="!isGroup" class="cc-checkbox-label" [class.label-before]="labelPosition === 'before'"
-        [class.disabled]="disabled" [class.checked]="checked">
-        <input type="checkbox" class="cc-native-checkbox" [checked]="checked" [disabled]="disabled"
-            [required]="required" [indeterminate]="indeterminate" (change)="onCheckboxChange($event)" />
-        <span class="cc-checkmark"></span>
-        <span class="cc-text" *ngIf="label">{{ label }}</span>
-    </label>
-
-    <!-- Checkbox Group -->
-    <div *ngIf="isGroup" class="cc-checkbox-group">
-        <label *ngIf="label" class="cc-checkbox-group-label" [class.label-before]="labelPosition === 'before'">
-            {{ label }}
-            <span *ngIf="required" class="cc-required">{{ requiredMarker }}</span>
-        </label>
-
-        <label *ngFor="let option of visibleOptions" class="cc-checkbox-label" [class.disabled]="disabled || option.disabled"
-            [class.checked]="option.checked">
-            <input type="checkbox" class="cc-native-checkbox" [checked]="option.checked"
-                [disabled]="disabled || option.disabled" (change)="onGroupCheckboxChange(option, $event)" />
-            <span class="cc-checkmark"></span>
-            <span class="cc-text">{{ option.label }}</span>
-        </label>
-    </div>
-
-    <div class="cc-error-message" *ngIf="errorMessage">{{ errorMessage }}</div>
-</div>

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

@@ -1,111 +0,0 @@
-.cc-checkbox-wrapper {
-    display: flex;
-    flex-direction: column;
-    font-family: var(--cc-checkbox-font-family, inherit);
-}
-
-.cc-checkbox-label {
-    display: inline-flex;
-    align-items: center; // Vertical center align
-    position: relative;
-    cursor: pointer;
-    font-size: var(--cc-checkbox-label-font-size, var(--cc-checkbox-font-size, 0.875rem));
-    font-weight: var(--cc-checkbox-label-font-weight, var(--cc-checkbox-font-weight, 400));
-    color: var(--cc-checkbox-label-color, #202124);
-    user-select: none;
-    margin-bottom: var(--cc-checkbox-margin-bottom, 0.5rem);
-
-    &.label-before {
-        flex-direction: row-reverse;
-
-        .cc-checkmark {
-            margin-right: 0;
-            margin-left: 0.5rem;
-        }
-    }
-
-    &.disabled {
-        cursor: not-allowed;
-        color: var(--cc-checkbox-disabled-color, #80868B);
-
-        .cc-checkmark {
-            border-color: var(--cc-checkbox-disabled-color, #80868B);
-            background-color: transparent;
-        }
-    }
-}
-
-.cc-native-checkbox {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-
-    // Checked State
-    &:checked~.cc-checkmark {
-        background-color: var(--cc-checkbox-checked-color, #1A73E8);
-        border-color: var(--cc-checkbox-checked-color, #1A73E8);
-    }
-
-    // Checkmark/Indicator
-    &:checked~.cc-checkmark:after {
-        display: block;
-    }
-
-    // Disabled & Checked
-    &:disabled:checked~.cc-checkmark {
-        background-color: var(--cc-checkbox-disabled-color, #80868B);
-        border-color: var(--cc-checkbox-disabled-color, #80868B);
-    }
-}
-
-.cc-checkmark {
-    position: relative;
-    height: var(--cc-checkbox-size, 1.125rem);
-    width: var(--cc-checkbox-size, 1.125rem);
-    background-color: transparent;
-    border: 2px solid var(--cc-checkbox-unchecked-color, #BDC1C6);
-    border-radius: var(--cc-checkbox-border-radius, 2px);
-    transition: all 0.2s ease-in-out;
-    margin-right: 0.5rem;
-    flex-shrink: 0; // Prevent shrinking
-
-    // The check icon (pure CSS arrow)
-    &:after {
-        content: "";
-        position: absolute;
-        display: none;
-        left: 50%;
-        top: 45%; // Optical centering
-        width: 30%;
-        height: 60%;
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        transform: translate(-50%, -50%) rotate(45deg);
-    }
-}
-
-.cc-checkbox-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cc-checkbox-group-gap, 0.75rem);
-}
-
-.cc-checkbox-group-label {
-    font-size: var(--cc-checkbox-group-label-font-size, 0.875rem);
-    font-weight: var(--cc-checkbox-group-label-font-weight, 500);
-    color: var(--cc-checkbox-group-label-color, #202124);
-    margin-bottom: 0.5rem;
-}
-
-.cc-required {
-    color: var(--cc-checkbox-required-color, #D93025);
-    margin-left: 0.25rem;
-}
-
-.cc-error-message {
-    font-size: 0.75rem;
-    color: var(--cc-checkbox-error-color, #D93025);
-    margin-top: 0.25rem;
-}

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

@@ -1,207 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CheckboxConfig, CheckboxOption, CheckboxLabels } from './checkbox.models';
-
-@Component({
-    selector: 'lib-checkbox',
-    templateUrl: './checkbox.component.html',
-    styleUrls: ['./checkbox.component.scss'],
-    standalone: false,
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => CheckboxComponent),
-            multi: true
-        }
-    ]
-})
-export class CheckboxComponent implements ControlValueAccessor, OnInit, OnChanges {
-    @Input() config: CheckboxConfig = {};
-    @Input() labels?: CheckboxLabels;
-    @Input() label: string = '';
-    @Input() checked: boolean = false;
-    @Input() disabled: boolean = false;
-    @Input() required: boolean = false;
-    @Input() indeterminate: boolean = false;
-    @Input() options: CheckboxOption[] = [];
-    @Input() labelPosition: 'before' | 'after' = 'after';
-    @Input() color: string = '#007bff';
-    @Input() borderRadius: string = '4px';
-    @Input() value: any = null;
-    @Input() errorMessage: string = '';
-
-    // Style inputs
-    @Input() width?: string;
-    @Input() height?: string;
-    @Input() fontSize?: string;
-    @Input() fontWeight?: string;
-    @Input() labelColor?: string;
-    @Input() labelFontSize?: string;
-    @Input() labelFontWeight?: string;
-    @Input() gap?: string;
-    @Input() fontFamily?: string;
-    @Input() backgroundColor?: string;
-    @Input() borderColor?: string;
-    @Input() borderWidth?: string;
-    @Input() padding?: string;
-    @Input() placeholderColor?: string;
-    @Input() focusBorderColor?: string;
-    @Input() errorColor?: string;
-    @Input() disabledBackgroundColor?: string;
-    @Input() disabledColor?: string;
-    @Input() boxShadow?: string;
-
-    @Input() size?: string;
-    @Input() checkedColor?: string;
-    @Input() uncheckedColor?: string;
-    @Input() groupLabelColor?: string;
-    @Input() groupLabelFontSize?: string;
-    @Input() groupLabelFontWeight?: string;
-
-    @Output() checkedChange = new EventEmitter<any>();
-
-    onChange: (value: any) => void = () => { };
-    onTouched: () => void = () => { };
-
-    ngOnInit(): void {
-        this.updateFromConfig();
-        this.updateFromLabels();
-
-        if (this.isGroup) {
-            this.value = this.options
-                .filter(opt => opt.checked)
-                .map(opt => opt.value);
-        } else {
-            this.value = this.checked;
-        }
-    }
-
-    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.checked = this.config.checked ?? this.checked;
-            this.disabled = this.config.disabled ?? this.disabled;
-            this.required = this.config.required ?? this.required;
-            this.indeterminate = this.config.indeterminate ?? this.indeterminate;
-            this.options = this.config.options || this.options;
-            this.labelPosition = this.config.labelPosition ?? this.labelPosition;
-            this.color = this.config.color ?? this.color;
-            this.borderRadius = this.config.borderRadius ?? this.borderRadius;
-            this.size = this.config.size ?? this.size;
-            this.checkedColor = this.config.checkedColor ?? this.checkedColor;
-            this.uncheckedColor = this.config.uncheckedColor ?? this.uncheckedColor;
-            this.groupLabelColor = this.config.groupLabelColor ?? this.groupLabelColor;
-            this.groupLabelFontSize = this.config.groupLabelFontSize ?? this.groupLabelFontSize;
-            this.groupLabelFontWeight = this.config.groupLabelFontWeight ?? this.groupLabelFontWeight;
-            this.labelFontSize = this.config.labelFontSize ?? this.labelFontSize;
-            this.labelFontWeight = this.config.labelFontWeight ?? this.labelFontWeight;
-            this.labelColor = this.config.labelColor ?? this.labelColor;
-            this.gap = this.config.gap ?? this.gap;
-            this.fontFamily = this.config.fontFamily ?? this.fontFamily;
-        }
-    }
-
-    private updateFromLabels(): void {
-        if (this.labels) {
-            this.label = this.labels.label || this.label;
-        }
-    }
-
-    get isGroup(): boolean {
-        return this.options && this.options.length > 0;
-    }
-
-    get visibleOptions(): CheckboxOption[] {
-        return this.options.filter(o => o.label != null && o.label !== '');
-    }
-
-    get requiredMarker(): string {
-        return this.labels?.requiredMarker || '*';
-    }
-
-    writeValue(value: any): void {
-        if (this.isGroup) {
-            this.value = Array.isArray(value) ? value : [];
-            this.options.forEach(opt => {
-                opt.checked = (this.value as any[]).includes(opt.value);
-            });
-        } else {
-            this.value = !!value;
-            this.checked = this.value as boolean;
-        }
-    }
-
-    registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
-
-    setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
-    }
-
-    onCheckboxChange(event: any): void {
-        const checked = event.target.checked;
-        this.value = checked;
-        this.checked = checked;
-        this.onChange(this.value);
-        this.onTouched();
-        this.checkedChange.emit(this.value);
-    }
-
-    onGroupCheckboxChange(option: CheckboxOption, event: any): void {
-        const checked = event.target.checked;
-        option.checked = checked;
-
-        const valueArray = this.value as any[];
-        if (checked) {
-            if (!valueArray.includes(option.value)) {
-                this.value = [...valueArray, option.value];
-            }
-        } else {
-            this.value = valueArray.filter(v => v !== option.value);
-        }
-
-        this.onChange(this.value);
-        this.onTouched();
-        this.checkedChange.emit(this.value);
-    }
-
-    private getStyleValue(value: string | undefined): string | undefined {
-        return value ? `${value}` : undefined;
-    }
-
-    get wrapperStyles(): { [key: string]: string | undefined } {
-        return {
-            '--cc-checkbox-font-family': this.getStyleValue(this.fontFamily),
-            '--cc-checkbox-font-size': this.getStyleValue(this.fontSize),
-            '--cc-checkbox-font-weight': this.getStyleValue(this.fontWeight),
-            '--cc-checkbox-label-color': this.getStyleValue(this.labelColor),
-            '--cc-checkbox-size': this.getStyleValue(this.size),
-            '--cc-checkbox-checked-color': this.getStyleValue(this.checkedColor),
-            '--cc-checkbox-unchecked-color': this.getStyleValue(this.uncheckedColor),
-            '--cc-checkbox-disabled-color': this.getStyleValue(this.disabledColor),
-            '--cc-checkbox-error-color': this.getStyleValue(this.errorColor),
-            '--cc-checkbox-group-gap': this.getStyleValue(this.gap),
-            '--cc-checkbox-group-label-color': this.getStyleValue(this.groupLabelColor),
-            '--cc-checkbox-group-label-font-size': this.getStyleValue(this.groupLabelFontSize),
-            '--cc-checkbox-group-label-font-weight': this.getStyleValue(this.groupLabelFontWeight),
-            '--cc-checkbox-label-font-size': this.getStyleValue(this.labelFontSize),
-            '--cc-checkbox-label-font-weight': this.getStyleValue(this.labelFontWeight),
-            '--cc-checkbox-border-radius': this.getStyleValue(this.borderRadius)
-        };
-    }
-}
-

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

@@ -1,35 +0,0 @@
-export interface CheckboxOption {
-    value: any;
-    label: string;
-    disabled?: boolean;
-    checked?: boolean;
-}
-
-export interface CheckboxLabels {
-    label?: string;
-    requiredMarker?: string;
-}
-
-export interface CheckboxConfig {
-    label?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    indeterminate?: boolean;
-    options?: CheckboxOption[];
-    labelPosition?: 'before' | 'after';
-    color?: 'primary' | 'accent' | 'warn';
-    borderRadius?: string;
-    size?: string;
-    checkedColor?: string;
-    uncheckedColor?: string;
-    groupLabelColor?: string;
-    groupLabelFontSize?: string;
-    groupLabelFontWeight?: string;
-    // Style props
-    labelFontSize?: string;
-    labelFontWeight?: string;
-    labelColor?: string;
-    gap?: string;
-    fontFamily?: string;
-}

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

@@ -1,42 +0,0 @@
-<div class="cc-datepicker-wrapper" [ngStyle]="wrapperStyles">
-    <label *ngIf="label" class="cc-datepicker-label" [ngStyle]="labelStyles">
-        {{ label }}
-        <span *ngIf="required" class="cc-required">{{ requiredMarker }}</span>
-    </label>
-
-    <!-- Single Date Picker -->
-    <div *ngIf="!isRange" class="cc-datepicker-field" [class.focused]="focused" [class.disabled]="disabled"
-        [class.error]="errorMessage" [ngStyle]="fieldStyles">
-
-        <input type="date" class="cc-datepicker-input" #dateInput [value]="formattedValue" [disabled]="disabled"
-            [required]="required" [min]="formattedMin" [max]="formattedMax" [placeholder]="placeholder"
-            (input)="onDateInput($event)" (blur)="onBlur()" (focus)="onFocus()" (click)="dateInput.showPicker()" />
-
-        <span class="cc-datepicker-icon material-icons" (click)="dateInput.showPicker()">calendar_today</span>
-    </div>
-
-    <!-- Range Date Picker -->
-    <div *ngIf="isRange" class="cc-datepicker-range">
-        <!-- Start Date -->
-        <div class="cc-datepicker-subfield">
-            <label class="cc-datepicker-sublabel">{{ startDateLabel }}</label>
-            <div class="cc-datepicker-field" [class.disabled]="disabled" [ngStyle]="fieldStyles">
-                <input type="date" class="cc-datepicker-input" [value]="formattedStartDate" [disabled]="disabled"
-                    [required]="required" [min]="formattedMin" [max]="formattedEndDate || formattedMax"
-                    (input)="onRangeStartInput($event)" />
-            </div>
-        </div>
-
-        <!-- End Date -->
-        <div class="cc-datepicker-subfield">
-            <label class="cc-datepicker-sublabel">{{ endDateLabel }}</label>
-            <div class="cc-datepicker-field" [class.disabled]="disabled" [ngStyle]="fieldStyles">
-                <input type="date" class="cc-datepicker-input" [value]="formattedEndDate" [disabled]="disabled"
-                    [required]="required" [min]="formattedStartDate || formattedMin" [max]="formattedMax"
-                    (input)="onRangeEndInput($event)" />
-            </div>
-        </div>
-    </div>
-
-    <div class="cc-error-message" *ngIf="errorMessage">{{ errorMessage }}</div>
-</div>

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

@@ -1,115 +0,0 @@
-.cc-datepicker-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cc-datepicker-label-gap, 0.5rem);
-    width: 100%;
-    font-family: var(--cc-datepicker-font-family, inherit);
-}
-
-.cc-datepicker-label {
-    font-size: var(--cc-datepicker-label-font-size, 0.875rem);
-    font-weight: var(--cc-datepicker-label-font-weight, 500);
-    color: var(--cc-datepicker-label-color, #202124);
-    margin: 0;
-    line-height: 1.4;
-}
-
-.cc-required {
-    color: var(--cc-datepicker-required-color, #D93025);
-    margin-left: 0.25rem;
-}
-
-.cc-datepicker-field {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    box-sizing: border-box;
-    background-color: var(--cc-datepicker-bg, #FEFEFE);
-    border: var(--cc-datepicker-border-width, 1px) solid var(--cc-datepicker-border-color, #BDC1C6);
-    border-radius: var(--cc-datepicker-border-radius, 0.4375rem);
-    padding: var(--cc-datepicker-padding, 0.5rem 0.75rem);
-    min-height: var(--cc-datepicker-height, 2.5rem);
-    transition: border-color 0.2s, box-shadow 0.2s;
-    position: relative;
-
-    &.focused {
-        border-color: var(--cc-datepicker-focus-border-color, #1A73E8);
-    }
-
-    &.error {
-        border-color: var(--cc-datepicker-error-color, #D93025);
-    }
-
-    &.disabled {
-        background-color: var(--cc-datepicker-disabled-bg, #F1F3F4);
-        cursor: not-allowed;
-
-        .cc-datepicker-input {
-            cursor: not-allowed;
-            color: var(--cc-datepicker-disabled-color, #80868B);
-        }
-
-        .cc-datepicker-icon {
-            color: var(--cc-datepicker-disabled-color, #80868B);
-        }
-    }
-}
-
-.cc-datepicker-input {
-    flex: 1;
-    border: none;
-    background: transparent;
-    outline: none;
-    font-family: inherit;
-    font-size: var(--cc-datepicker-font-size, 0.875rem);
-    font-weight: var(--cc-datepicker-font-weight, 400);
-    color: var(--cc-datepicker-color, #202124);
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    // Ensure text is visible
-    opacity: 1;
-
-    // Calendar icon override for native input
-    &::-webkit-calendar-picker-indicator {
-        opacity: 0; // Hide native icon so we can use custom one
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        width: 2.5rem; // Match icon width roughly
-        height: 100%;
-        cursor: pointer;
-        z-index: 10; // Ensure it's on top of the custom icon
-    }
-}
-
-.cc-datepicker-icon {
-    margin-left: 0.5rem;
-    color: var(--cc-datepicker-icon-color, #5F6368);
-    pointer-events: none; // Allow click through to input
-}
-
-.cc-datepicker-range {
-    display: flex;
-    gap: 1rem;
-    align-items: flex-start;
-
-    .cc-datepicker-subfield {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-    }
-
-    .cc-datepicker-sublabel {
-        font-size: 0.75rem;
-        color: #5F6368;
-    }
-}
-
-.cc-error-message {
-    font-size: 0.75rem;
-    color: var(--cc-datepicker-error-color, #D93025);
-    margin-top: 0.25rem;
-}