platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,43 @@
+/** 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/_theme.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+
+$default-checkbox-config: (
+    // Layout
+    margin-bottom: 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.125rem,
+    border-radius: 2px,
+
+    // Colors
+    checked-color: #1A73E8,
+    unchecked-color: #BDC1C6,
+
+    // States
+    disabled-color: #80868B,
+    error-color: #D93025,
+    required-color: #D93025
+);
+
+@mixin checkbox-theme($user-config: ()) {
+    $config: map.merge($default-checkbox-config, $user-config);
+
+    // Layout
+    --cc-checkbox-margin-bottom: #{map.get($config, margin-bottom)};
+    --cc-checkbox-group-gap: #{map.get($config, group-gap)};
+
+    // Label
+    --cc-checkbox-font-size: #{map.get($config, font-size)};
+    --cc-checkbox-font-weight: #{map.get($config, font-weight)};
+    --cc-checkbox-font-family: #{map.get($config, font-family)};
+    --cc-checkbox-label-color: #{map.get($config, label-color)};
+
+    // Group label
+    --cc-checkbox-group-label-font-size: #{map.get($config, group-label-font-size)};
+    --cc-checkbox-group-label-font-weight: #{map.get($config, group-label-font-weight)};
+    --cc-checkbox-group-label-color: #{map.get($config, group-label-color)};
+
+    // Size
+    --cc-checkbox-size: #{map.get($config, size)};
+    --cc-checkbox-border-radius: #{map.get($config, border-radius)};
+
+    // Colors
+    --cc-checkbox-checked-color: #{map.get($config, checked-color)};
+    --cc-checkbox-unchecked-color: #{map.get($config, unchecked-color)};
+
+    // States
+    --cc-checkbox-disabled-color: #{map.get($config, disabled-color)};
+    --cc-checkbox-error-color: #{map.get($config, error-color)};
+    --cc-checkbox-required-color: #{map.get($config, required-color)};
+}

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

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

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

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

@@ -0,0 +1,35 @@
+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/_theme.scss

@@ -0,0 +1,82 @@
+@use 'sass:map';
+
+$default-datepicker-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 datepicker-theme($user-config: ()) {
+    $config: map.merge($default-datepicker-config, $user-config);
+
+    // Layout
+    --cc-datepicker-height: #{map.get($config, height)};
+    --cc-datepicker-padding: #{map.get($config, padding)};
+    --cc-datepicker-label-gap: #{map.get($config, label-gap)};
+
+    // Borders
+    --cc-datepicker-border-radius: #{map.get($config, border-radius)};
+    --cc-datepicker-border-color: #{map.get($config, border-color)};
+    --cc-datepicker-border-width: #{map.get($config, border-width)};
+
+    // Colors
+    --cc-datepicker-bg: #{map.get($config, bg)};
+    --cc-datepicker-color: #{map.get($config, color)};
+    --cc-datepicker-placeholder-color: #{map.get($config, placeholder-color)};
+
+    // Typography
+    --cc-datepicker-font-size: #{map.get($config, font-size)};
+    --cc-datepicker-font-weight: #{map.get($config, font-weight)};
+    --cc-datepicker-font-family: #{map.get($config, font-family)};
+
+    // Label
+    --cc-datepicker-label-font-size: #{map.get($config, label-font-size)};
+    --cc-datepicker-label-font-weight: #{map.get($config, label-font-weight)};
+    --cc-datepicker-label-color: #{map.get($config, label-color)};
+
+    // States
+    --cc-datepicker-focus-border-color: #{map.get($config, focus-border-color)};
+    --cc-datepicker-error-color: #{map.get($config, error-color)};
+    --cc-datepicker-disabled-bg: #{map.get($config, disabled-bg)};
+    --cc-datepicker-disabled-color: #{map.get($config, disabled-color)};
+    --cc-datepicker-required-color: #{map.get($config, required-color)};
+
+    // Icon
+    --cc-datepicker-icon-color: #{map.get($config, icon-color)};
+
+    // MD3 Overrides or Missing Variables
+    --mat-datepicker-calendar-container-background-color: var(--cc-datepicker-bg, #FEFEFE);
+    --mat-datepicker-calendar-container-shape: var(--cc-datepicker-border-radius, 0.4375rem);
+    --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}

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

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