platformcommons-web-lib 1.0.0

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

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

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

@@ -0,0 +1,45 @@
+@use 'sass:map';
+
+$default-toggle-config: (
+    // Label
+    font-size: 0.875rem,
+    font-weight: 400,
+    font-family: inherit,
+    label-color: #202124,
+
+    // Size
+    width: 2.25rem,
+    height: 1rem,
+
+    // Colors
+    track-color: #BDC1C6,
+    thumb-color: #FEFEFE,
+    checked-track-color: #1A73E8,
+    checked-thumb-color: #FEFEFE,
+
+    // States
+    disabled-color: #80868B
+);
+
+@mixin toggle-theme($user-config: ()) {
+    $config: map.merge($default-toggle-config, $user-config);
+
+    // Label
+    --cc-toggle-font-size: #{map.get($config, font-size)};
+    --cc-toggle-font-weight: #{map.get($config, font-weight)};
+    --cc-toggle-font-family: #{map.get($config, font-family)};
+    --cc-toggle-label-color: #{map.get($config, label-color)};
+
+    // Size
+    --cc-toggle-width: #{map.get($config, width)};
+    --cc-toggle-height: #{map.get($config, height)};
+
+    // Colors
+    --cc-toggle-track-color: #{map.get($config, track-color)};
+    --cc-toggle-thumb-color: #{map.get($config, thumb-color)};
+    --cc-toggle-checked-track-color: #{map.get($config, checked-track-color)};
+    --cc-toggle-checked-thumb-color: #{map.get($config, checked-thumb-color)};
+
+    // States
+    --cc-toggle-disabled-color: #{map.get($config, disabled-color)};
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+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();
+        }
+    }
+}

package/src/lib/modules/form-components/form-components.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { InputComponent } from './components/input/input.component';
+import { DropdownComponent } from './components/dropdown/dropdown.component';
+import { CheckboxComponent } from './components/checkbox/checkbox.component';
+import { RadioComponent } from './components/radio/radio.component';
+import { ToggleComponent } from './components/toggle/toggle.component';
+import { DatepickerComponent } from './components/datepicker/datepicker.component';
+import { SearchComponent } from './components/search/search.component';
+import { ClickOutsideDirective } from './directives/click-outside.directive';
+
+@NgModule({
+    declarations: [
+        InputComponent,
+        DropdownComponent,
+        CheckboxComponent,
+        RadioComponent,
+        ToggleComponent,
+        DatepickerComponent,
+        SearchComponent,
+        ClickOutsideDirective
+    ],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        ScrollingModule
+    ],
+    exports: [
+        InputComponent,
+        DropdownComponent,
+        CheckboxComponent,
+        RadioComponent,
+        ToggleComponent,
+        DatepickerComponent,
+        SearchComponent
+    ]
+})
+export class FormComponentsModule { }

package/src/lib/modules/form-components/form-components.theme.scss

@@ -0,0 +1,25 @@
+@use './components/input/_theme' as input;
+@use './components/dropdown/_theme' as dropdown;
+@use './components/checkbox/_theme' as checkbox;
+@use './components/radio/_theme' as radio;
+@use './components/toggle/_theme' as toggle;
+@use './components/datepicker/_theme' as datepicker;
+@use './components/search/_theme' as search;
+
+@forward './components/input/_theme';
+@forward './components/dropdown/_theme';
+@forward './components/checkbox/_theme';
+@forward './components/radio/_theme';
+@forward './components/toggle/_theme';
+@forward './components/datepicker/_theme';
+@forward './components/search/_theme';
+
+@mixin form-components-theme() {
+    @include input.input-theme();
+    @include dropdown.dropdown-theme();
+    @include checkbox.checkbox-theme();
+    @include radio.radio-theme();
+    @include toggle.toggle-theme();
+    @include datepicker.datepicker-theme();
+    @include search.search-theme();
+}