commons-shared-web-ui 0.0.55 → 0.0.56

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

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

@@ -1,55 +0,0 @@
-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/radio.component.html

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

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

@@ -1,107 +0,0 @@
-/* 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

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

@@ -1,39 +0,0 @@
-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/search.component.html

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