src/app/shared/soft-select/soft-select.component.ts
| encapsulation | ViewEncapsulation.None |
| selector | app-soft-select |
| styleUrls | ./soft-select.component.scss |
| templateUrl | ./soft-select.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor()
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
| disableSoftselect | |
Type : boolean
|
|
Default value : false
|
|
| emitOnlySelected | |
Type : boolean
|
|
Default value : false
|
|
| enableLoadMore | |
Type : boolean
|
|
Default value : false
|
|
| inputId | |
Type : string
|
|
Default value : ''
|
|
| label | |
Type : string | undefined
|
|
| secondLabel | |
Type : string | undefined
|
|
| type | |
Type : string
|
|
Default value : 'text'
|
|
| value | |
Type : Date | string | null
|
|
Default value : ''
|
|
| focusinInput | |
Type : EventEmitter<any>
|
|
| onAutocompleteLoadingMore | |
Type : EventEmitter<OnLoadingMoreEvent>
|
|
| onInputEvent | |
Type : EventEmitter<any>
|
|
| selectedLabelChange | |
Type : EventEmitter<string>
|
|
| valueChange | |
Type : EventEmitter<string>
|
|
| autocompleteLoadingMore | ||||||
autocompleteLoadingMore(event: OnLoadingMoreEvent)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onChangeLabel | ||||||
onChangeLabel(label: LabelTypes)
|
||||||
|
Parameters :
Returns :
void
|
| onDateInputFired | ||||||
onDateInputFired(value: any)
|
||||||
|
Parameters :
Returns :
void
|
| onFocusinInput | ||||||
onFocusinInput(event: any)
|
||||||
|
Parameters :
Returns :
void
|
| onInputFired | ||||||
onInputFired(event: any)
|
||||||
|
Parameters :
Returns :
void
|
| onInputMouseOut |
onInputMouseOut()
|
|
Returns :
void
|
| onInputMouseOver |
onInputMouseOver()
|
|
Returns :
void
|
| inputElement |
Type : any
|
Decorators :
@ViewChild('input')
|
| inputFocused |
Type : boolean
|
Default value : false
|
| labelSelected |
Type : LabelTypes
|
Default value : 'first'
|
| temp |
Type : Date | string | null
|
Default value : ''
|
import {
Component,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
ViewChild,
ViewEncapsulation
} from '@angular/core'
import { OnLoadingMoreEvent } from '../autocomplete/autocomplete.component'
@Component({
selector: 'app-soft-select',
templateUrl: './soft-select.component.html',
styleUrls: ['./soft-select.component.scss'],
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class SoftSelectComponent implements OnInit, OnChanges {
@Input() inputId: string = ''
@Input() label: string | undefined
@Input() secondLabel: string | undefined
@Input() value: Date | string | null = ''
@Input() disabled: boolean = false
@Input() type: string = 'text'
@Input() disableSoftselect: boolean = false
@Input() emitOnlySelected: boolean = false
@Input() enableLoadMore: boolean = false
@Output() valueChange: EventEmitter<string> = new EventEmitter()
@Output() onInputEvent: EventEmitter<any> = new EventEmitter()
@Output() focusinInput: EventEmitter<any> = new EventEmitter()
@Output() onAutocompleteLoadingMore: EventEmitter<OnLoadingMoreEvent> =
new EventEmitter()
@Output() selectedLabelChange: EventEmitter<string> = new EventEmitter()
@ViewChild('input') inputElement: any
temp: Date | string | null = ''
inputFocused: boolean = false
labelSelected: LabelTypes = 'first'
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
if (
changes.value &&
changes.value.currentValue !== changes.value.previousValue
) {
this.valueChange.emit(changes.value.currentValue)
}
}
ngOnInit(): void {}
autocompleteLoadingMore(event: OnLoadingMoreEvent) {
this.onAutocompleteLoadingMore.emit(event)
}
onInputFired(event: any) {
const value = event.target.value
this.temp = value
this.valueChange.emit(value)
this.onInputEvent.emit(event)
}
onDateInputFired(value: any) {
this.temp = value
this.valueChange.emit(value)
this.onInputEvent.emit(value)
}
onInputMouseOut() {
if (this.disableSoftselect) return
this.value = this.temp
this.temp = ''
}
onInputMouseOver() {
if (this.disableSoftselect) return
this.temp = !!this.value ? this.value : ''
this.value = ''
}
onFocusinInput(event: any) {
this.focusinInput.emit(event)
}
onChangeLabel(label: LabelTypes) {
this.labelSelected = label
const selectedLabelText = label === 'first' ? this.label : this.secondLabel
this.selectedLabelChange.emit(selectedLabelText)
}
}
export type LabelTypes = 'first' | 'second'
@if (label) {
<label
[class.secondLabelActive]="secondLabel && secondLabel.length > 0"
class="clr-control-label"
>
<span
(click)="onChangeLabel('first')"
[class.value-type-selected]="labelSelected === 'first'"
>{{ label }}</span
>
@if (secondLabel) {
/
<span
(click)="onChangeLabel('second')"
[class.value-type-selected]="labelSelected === 'second'"
>{{ secondLabel }}</span
>
}
</label>
}
@switch (type) {
@case ('date') {
<clr-date-container>
<input
type="date"
clrDate
[id]="inputId"
[attr.list]="'datalist_' + inputId"
[placeholder]="this.temp! | dateTimeFormatter: 'date'"
[clrDate]="value!"
(clrDateChange)="onDateInputFired($event)"
(focus)="this.inputFocused = true"
(focusout)="this.inputFocused = false"
(focusin)="onFocusinInput($event)"
(mouseover)="onInputMouseOver()"
(mouseout)="onInputMouseOut()"
[disabled]="this.disabled"
/>
</clr-date-container>
}
@case ('time') {
<input
type="time"
step="1"
class="input-val"
[value]="value"
(input)="onInputFired($event)"
[id]="inputId"
[attr.list]="'datalist_' + inputId"
(focus)="this.inputFocused = true"
(focusout)="this.inputFocused = false"
(focusin)="onFocusinInput($event)"
(mouseover)="onInputMouseOver()"
(mouseout)="onInputMouseOut()"
[disabled]="this.disabled"
/>
}
@case ('text') {
<app-autocomplete
#input
class="input-val"
type="text"
autocomplete="off"
[inputId]="inputId"
autofocus
[value]="value?.toString() || ''"
(onInputChange)="onInputFired($event)"
(onLoadingMore)="autocompleteLoadingMore($event)"
[enableLoadMore]="enableLoadMore"
[emitOnlySelected]="emitOnlySelected"
[disabled]="this.disabled"
>
<ng-content></ng-content>
</app-autocomplete>
}
}
./soft-select.component.scss