Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-7340 - updated details radio component to have an option input when is needed

Browse Source
This commit is contained in:
Valentin Mihai 2024-09-27 16:41:59 +03:00
parent 304657d259
commit 34387d49d2
4 changed files with 72 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/inputs/details-radio/details-radio-option.ts
View File

@ -1,9 +1,17 @@
interface ExtraOption {
interface AdditionalField {
label: string;
checked: boolean;
description?: string;
}
interface AdditionalCheck extends AdditionalField {
checked?: boolean;
hidden?: boolean;
disabled?: boolean;
description?: string;
}
interface AdditionalInput extends AdditionalField {
value: string;
placeholder?: string;
}
export interface DetailsRadioOption<I> {
@ -15,5 +23,6 @@ export interface DetailsRadioOption<I> {
value: I;
disabled?: boolean;
tooltip?: string;
extraOption?: ExtraOption;
additionalCheck?: AdditionalCheck;
additionalInput?: AdditionalInput;
}

56
src/lib/inputs/details-radio/details-radio.component.html
View File

@ -20,25 +20,45 @@
<span class="hint">{{ option.description | translate: option.descriptionParams | replaceNbsp }}</span>
@if (option.extraOption && !option.extraOption.hidden && isSelected(option)) {
<div class="iqser-input-group">
<mat-checkbox
(change)="emitExtraOption()"
[(ngModel)]="option.extraOption.checked"
[checked]="option.extraOption.checked"
[disabled]="!!option.extraOption.disabled"
color="primary"
>
{{ option.extraOption.label | translate | replaceNbsp }}
</mat-checkbox>
@if (isSelected(option)) {
@if (option.additionalCheck && !option.additionalCheck.hidden) {
<div class="iqser-input-group w-300">
<mat-checkbox
(change)="emitExtraOption()"
[(ngModel)]="option.additionalCheck.checked"
[checked]="option.additionalCheck.checked"
[disabled]="!!option.additionalCheck.disabled"
color="primary"
>
{{ option.additionalCheck.label | translate | replaceNbsp }}
</mat-checkbox>
@if (option.extraOption.description) {
<span
[innerHTML]="option.extraOption.description | translate"
class="hint extra-option-description"
></span>
}
</div>
@if (option.additionalCheck.description) {
<span
[innerHTML]="option.additionalCheck.description | translate"
class="hint additional-check-description"
></span>
}
</div>
}
@if (option.additionalInput) {
<div class="iqser-input-group w-300 additional-input">
<span class="label"> {{ option.additionalInput.label | translate }} </span>
<div class="flex-column">
<input
[(ngModel)]="option.additionalInput.value"
[placeholder]="
option.additionalInput.placeholder ? (option.additionalInput.placeholder | translate) : ''
"
(keydown)="emitExtraOption()"
/>
@if (option.additionalInput.description) {
<span class="hint" [innerHTML]="option.additionalInput.description | translate"></span>
}
</div>
</div>
}
}
</div>

21
src/lib/inputs/details-radio/details-radio.component.scss
View File

@ -43,10 +43,29 @@ label {
}
}
.extra-option-description {
.additional-check-description {
margin-left: 23px;
opacity: 0.49;
}
.additional-input {
display: flex;
flex-direction: row;
gap: 10px;
span {
margin-top: 10px;
}
div {
display: flex;
span {
font-size: 10px;
margin-top: 4px;
}
}
}
}
.row {

3
src/lib/inputs/details-radio/details-radio.component.ts
View File

@ -1,5 +1,5 @@
import { NgClass } from '@angular/common';
import { booleanAttribute, Component, input, output } from '@angular/core';
import { booleanAttribute, Component, input, OnChanges, output, SimpleChanges } from '@angular/core';
import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
@ -42,7 +42,6 @@ import { DetailsRadioOption } from './details-radio-option';
export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
readonly options = input.required<DetailsRadioOption<I>[]>();
readonly displayInRow = input(false, { transform: booleanAttribute });
readonly extraOptionChanged = output<DetailsRadioOption<I>>();
toggleOption(option: DetailsRadioOption<I>) {