libs/core/dynamic-form/circle-toggle-group/src/circle-toggle-group.component.ts
| selector | df-circle-toggle-group |
| styleUrls | ./circle-toggle-group.component.scss |
| templateUrl | ./circle-toggle-group.component.html |
Properties |
Methods |
| onBlur | ||||||
onBlur(event: FocusEvent)
|
||||||
|
Parameters :
Returns :
void
|
| circleToggles |
Type : DfCircleToggle[]
|
Default value : []
|
| control |
Type : InputSignal<UntypedFormControl> | InputSignal<UntypedFormGroup>
|
Default value : input(
new UntypedFormControl()
)
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:17
|
| responsive |
Default value : input(false)
|
| aclResource |
Type : string
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:56
|
| componentOrControlInitFinished |
Default value : new ReplaySubject<void>(1)
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:116
|
|
Additionally to the controlChanged EventEmitter a ReplaySubject is provided. In difference to the EventEmitter, this one always contains the last emitted value, which allows to check if a component was initialized after the initialization already happened. (An event will be gone at that point in time.) |
| config |
Type : InputSignal<C>
|
Default value : input.required<C>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:64
|
|
The configuration object for this formfield. Note that derived formfield components should extend the |
| Readonly controlChanged |
Default value : output<AbstractControl | undefined>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:101
|
|
Emits the Applications that need to further process this |
| Public deferSetupControl |
Default value : false
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:126
|
|
By default, the If this is set to true, the setup will not be run automatically. It is then
the derived component's responsibility to run call |
| formAclPath |
Default value : input<string>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:89
|
| Readonly formEvent |
Default value : output<DfEventPayload>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:108
|
|
Emits when events associated to the form control happen. The emitted object contains the data necessary to uniquely identify the event (field id and event type). It also contains the event data. |
| isRetailChannel |
Default value : input<boolean>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:91
|
| validationConfigs |
Default value : input<ValidationConfig[] | undefined>()
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:87
|
import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import { Component, ElementRef, inject, input, InputSignal, OnInit } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { DfCircleToggle, DfCircleToggleGroupConfig } from './circle-toggle-group.model';
@Component({
selector: 'df-circle-toggle-group',
templateUrl: './circle-toggle-group.component.html',
styleUrls: ['./circle-toggle-group.component.scss'],
standalone: false
})
export class DfCircleToggleGroupComponent
extends DfBaseComponent<DfCircleToggleGroupConfig>
implements OnInit
{
override control: InputSignal<UntypedFormControl> | InputSignal<UntypedFormGroup> = input(
new UntypedFormControl()
);
responsive = input(false);
circleToggles: DfCircleToggle[] = [];
private el = inject(ElementRef);
override ngOnInit() {
super.ngOnInit();
this.circleToggles = this.config().options;
this.emitFormControlEventOnValueChanges();
}
onBlur(event: FocusEvent) {
const circleToggleGroupHasFocus = this.el.nativeElement.contains(event.relatedTarget);
if (circleToggleGroupHasFocus) {
return;
}
this.emitFormEvent('onBlurEvent', this.control().value);
}
}
<ng-container *aclTag="aclResource">
<span
nxRow
nxRowJustify="center"
class="df-circle-toggle-group-label"
*ngIf="config().label || config().infoIcon"
[ngClass]="{
'is-centered': isRetailChannel()
}"
>
@if (config().label && isRetailChannel()) {
<p nxHeadline="subsection-xsmall" class="nx-font-weight-regular">
{{ config().label | interpolateFromStore | async }}
</p>
} @else if (config().label && !isRetailChannel()) {
<p nxCopytext class="nx-margin-bottom-s nx-font-weight-semibold">
{{ config().label | interpolateFromStore | async }}
</p>
}
<df-info-icon
*ngIf="config().infoIcon"
nxFormfieldAppendix
[config]="config().infoIcon?.config"
[modalConfig]="config().infoIcon?.modalConfig"
>
</df-info-icon>
</span>
<nx-circle-toggle-group
[formControl]="$any(control())"
[responsive]="responsive()"
[attr.data-testid]="config().testId"
(focusout)="onBlur($event)"
>
<div class="df-circle-toggle-container">
<nx-circle-toggle
*ngFor="let item of circleToggles"
[label]="(item.label | interpolateFromStore | async) ?? ''"
[value]="item.value"
id="{{ item.value }}"
data-testid="circleToggle"
[icon]="item.icon ?? ''"
[svg]="item.svg ?? '' | talyNormalizeUrl"
[svgChecked]="item.svgChecked ?? '' | talyNormalizeUrl"
[hint]="(item.hint | interpolateFromStore | async) ?? ''"
[circleText]="(item.circleText | interpolateFromStore | async) ?? ''"
>
</nx-circle-toggle>
</div>
<taly-validation-errors
ngProjectAs="nx-error"
nxFormfieldError
[errorMessages]="validationConfigs()"
[controlErrors]="control().errors"
>
</taly-validation-errors>
</nx-circle-toggle-group>
<nx-message *ngIf="config().note && !(control().touched && control().invalid)" context="info">
<span>{{ config().note }}</span>
</nx-message>
</ng-container>
./circle-toggle-group.component.scss
:host {
df-info-icon {
::ng-deep {
padding-left: 10px;
}
}
nx-circle-toggle {
flex: 1 1 0;
margin: 0;
}
}
.df-circle-toggle-group-label {
display: block;
margin-bottom: 16px;
&.is-centered {
text-align: center;
}
}
.df-circle-toggle-container {
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
taly-validation-errors {
width: 100%;
}