libs/upp-wdgt/src/components/upp-select/upp-select.ts
The main upp-select component.
Implements ControlValueAccessor for form control integration.
ControlValueAccessor
OnInit
AfterViewInit
OnChanges
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UppSelectComponent), multi: true
}
|
| selector | upp-select |
| styleUrls | ./upp-select.scss |
| templateUrl | ./upp-select.html |
Properties |
|
Methods |
Inputs |
Outputs |
Accessors |
constructor(controlContainer: ControlContainer, change: ChangeDetectorRef)
|
||||||||||||
|
Constructor for dependency injection.
Parameters :
|
| disabled |
Type : boolean
|
Default value : false
|
|
Disables the input when set to true. |
| formControlName |
Type : string
|
Default value : ''
|
|
The name of the form control this input is bound to. |
| value |
Type : string
|
|
/ |
| Changed |
Type : EventEmitter
|
|
Emits the current value when it changes. |
| Focus |
Type : EventEmitter
|
|
Emits an event when the input gains focus. |
| ngAfterViewInit |
ngAfterViewInit()
|
|
Lifecycle hook that runs after the component’s view has been initialized. It sets up listeners for child components.
Returns :
void
|
| ngOnChanges |
ngOnChanges()
|
|
Lifecycle hook that detects changes to the input's properties.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Lifecycle hook that cleans up resources on component destruction. Unsubscribes from form control value changes.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Lifecycle hook that initializes the component. Sets up form control integration and initializes the value.
Returns :
void
|
| onChange |
onChange()
|
|
Handles value change events and triggers UI updates.
Returns :
void
|
| onFocus |
onFocus()
|
|
Emits a focus event when the input gains focus.
Returns :
void
|
| registerOnChange | ||||||||
registerOnChange(fn: any)
|
||||||||
|
Registers a callback function to be called when the input value changes.
Required by
Parameters :
Returns :
void
|
| registerOnTouched | ||||||||
registerOnTouched(fn: any)
|
||||||||
|
Registers a callback function to be called when the input is touched.
Required by
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(value: string)
|
||||||
|
Writes a value to the input. Required by
Parameters :
Returns :
void
|
| Public formControl |
Type : AbstractControl | null
|
Default value : null
|
| Public formGroup |
Type : FormGroup | null
|
Default value : null
|
|
optional FromGroup |
| items |
Type : QueryList<UppSelectItemComponent>
|
Decorators :
@ContentChildren(UppSelectItemComponent)
|
|
Query list of child |
| lists |
Type : QueryList<UppSelectListComponent>
|
Decorators :
@ContentChildren(UppSelectListComponent)
|
|
Query list of child |
| _disabled |
get_disabled()
|
|
Determines whether the input is disabled.
Returns :
boolean
|
| value | ||||||||
getvalue()
|
||||||||
|
/
Returns :
string
|
||||||||
setvalue(v: string)
|
||||||||
|
Sets a new value for the input. Updates the internal value, notifies Angular Forms, and triggers value change events.
Parameters :
Returns :
void
|
<ng-content select="upp-select-item"></ng-content>
<ng-content select="upp-select-list"></ng-content>
./upp-select.scss
:host {
.item-box {
position: relative;
margin: 0px 6px;
ion-icon {
font-size: 40px;
position: absolute;
top: 6px;
right: 10px;
}
::ng-deep ion-item {
--border-style: none;
--inner-padding-start: 10px;
}
}
.list-sep {
position: absolute;
width: 100%;
z-index: 4;
clear: both;
height: 40px;
background: linear-gradient(180deg, var(--ion-background-color) 30%, transparent 100%);
transition: all ease-in .3s;
top: 0px;
visibility: hidden;
&.visible {
visibility: visible;
top: calc(25vh - 10px);
}
}
.list-box {
position: absolute;
height: 100vh;
top: 0px;
left: 10px;
right: 10px;
overflow: hidden;
background: var(--ion-color-light);
border-radius: 8px;
z-index: 5;
transition: all ease-in .3s;
max-height: 0px;
&.visible {
max-height: 25vh;
}
.inner {
height: 25vh;
ion-list {
margin: 0px !important;
border-radius: 0px !important;
background: transparent !important;
}
upp-scrollable {
::ng-deep .content {
background: transparent !important;
}
}
}
}
/*
.options-box {
position: absolute;
top: 0px;
bottom: 0px;
left: 10px;
right: 10px;
height: 100vh;
background: var(--ion-color-light);
border-radius: 8px;
overflow: hidden;
z-index: 5;
.list-box {
transition: all ease-in .3s;
max-height: 0px;
&.visible {
max-height: 20vh;
}
}
}
*/
}