All files / components/upp-search upp-search.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Component, OnInit } from '@angular/core';
import { Input, forwardRef } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, } from "@angular/forms";
 
/**
 * UppSearchComponent provides a reusable search bar component that
 * implements ControlValueAccessor for form integration.
 * 
 * This component can be used in both template-driven and reactive forms,
 * and provides customization options for placeholder text, color, and disabled state.
 *
 * @example
 * Basic usage:
 * <upp-searchbar placeholder="Search..." (Changed)="onSearchChange($event)"></upp-searchbar>
 *
 * @example
 * Reactive form usage:
 * <upp-searchbar formControlName="searchTerm" [disabled]="isDisabled"></upp-searchbar>
 */
@Component({
    selector: 'upp-search',
    templateUrl:'./upp-search.html',
    styleUrls: [ 
        './upp-search.scss'
    ],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => UppSearchComponent),
            multi: true
        }            
    ]
})
export class UppSearchComponent implements ControlValueAccessor, OnInit {
    /** Placeholder text for the input. */
    @Input() placeholder = '';
    /** Color for this item */
    @Input() color = 'default';
    /** Disabled status for the text entry */
    @Input() disabled = false;
    /** Enables od disabled the kiosk input */
    @Input() kiosk = true;    
 
    /* eslint-disable @typescript-eslint/no-unused-vars */
    private _onChangeCallback = (_v:any) => {
        // nothing to do (required by angular)
    };
 
    private _onTouchCallback = () => {
        // nothing to do (required by angular)
    };
    /* eslint-enable @typescript-eslint/no-unused-vars */
 
    /** Internal value of the input. */
    private _innerValue: string | null = null;
 
    /**
     * Constructs an instance of `UppSearchComponent`.
     */        
    constructor() {
        // nothing to do
    }
 
    /**
     * Lifecycle hook. Initializes the component and configures initial values.
     */       
    ngOnInit() {
        this._innerValue = this.value;
    }
    
    /**
     * Clears the search value
     */      
    OnClear(){
        this.value = '';
    }
 
    /** Emits the current value when it changes. */
    @Output() Changed = new EventEmitter<string | null>(); 
 
    /********************************************/
    /* get/set accesors                         */
    /********************************************/
       
    @Input()
 
    /**
     * Gets the current value of the input.
     * @returns {string | null} The current value of the input.
     */       
    get value(): string | null {
        return this._innerValue;
    }
 
    /**
     * Sets a new value for the input.
     * Updates the internal value, notifies Angular Forms, and triggers value change events.
     * @param {string | null} v - The new value to set.
     */     
    set value(v: string | null) {
        Iif (v !== this._innerValue) {
            this._innerValue = v;
 
            this._onChangeCallback(v);
            this._onTouchCallback();
            
            this.Changed.emit(v);
        }
    }     
    
    /********************************************/
    /* ControlValueAccessor                     */
    /********************************************/
    
    /**
     * Writes a value to the input. Required by `ControlValueAccessor`.
     * @param {string} value - The value to write.
     */      
    writeValue(value: any) {
        Iif (value !== this._innerValue) {
            this.value = value;
            this.Changed.emit(this.value);
        }
    }
 
    /**
     * Registers a callback function to be called when the input value changes.
     * Required by `ControlValueAccessor`.
     * @param {Function} fn - The callback function.
     */     
    registerOnChange(fn: any) {
        this._onChangeCallback = fn;
    }
 
    /**
     * Registers a callback function to be called when the input is touched.
     * Required by `ControlValueAccessor`.
     * @param {Function} fn - The callback function.
     */      
    registerOnTouched(fn: any) {
        this._onTouchCallback = fn;
    }    
 
    /**
     * Sets the disabled state of the search input.
     * Part of the ControlValueAccessor interface.
     * 
     * @param isDisabled Whether the control should be disabled
     */
    setDisabledState(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }    
}