@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.9

package/form/src/form.component.ts

@@ -0,0 +1,110 @@
+import { Component, inject, OnInit, Output, EventEmitter, input, model, InputSignal, effect } from '@angular/core';
+import { FormGroup, FormControl, ValidatorFn, Validators } from '@angular/forms';
+import { BaseComponent } from '@updevs/sdk/layout';
+import { TextModel, TextService } from '@updevs/sdk';
+import { HorizontalVerticalType } from '@updevs/components';
+import { OptionalType } from '@updevs/sdk/types';
+
+import { FormRowModel } from './models/form-row.model';
+
+@Component({
+    selector: 'upd-form',
+    templateUrl: './form.component.html',
+    styleUrl: './form.component.scss'
+})
+export class FormComponent<T> extends BaseComponent implements OnInit {
+    @Output() readonly initialized = new EventEmitter<void>();
+    @Output() readonly dataLoaded = new EventEmitter<T>(); // TODO: implementar
+    @Output() readonly submitted = new EventEmitter<T>();
+
+    /**
+     * Rows to generate the form.
+     */
+    rows: InputSignal<FormRowModel[]> = input.required();
+    /**
+     * Form's layout.
+     */
+    layout: InputSignal<HorizontalVerticalType> = input<HorizontalVerticalType>('vertical');
+    /**
+     * Title of the form.
+     * Optional.
+     */
+    title: InputSignal<OptionalType<TextModel>> = input<OptionalType<TextModel>>(undefined);
+    /**
+     * Whether the actions section will be displayed.
+     */
+    hasActionsSection = input(true);
+    /**
+     * Whether the form is contained in a card.
+     * If true, it'll display a card as a form wrapper.
+     */
+    isCard = input(false);
+    /**
+     * Whether the form is in read only mode, which means no fields can be edited.
+     */
+    isDisabled = input(false, { transform: (val: boolean | string) => typeof val === 'string' ? val === '' : val });
+    /**
+     * Whether the form is loading.
+     */
+    isLoading = input(false); // TODO: implementar
+    /**
+     * Whether the form is saving.
+     */
+    isSaving = input(false); // TODO: implementar
+    /**
+     * Current form data.
+     */
+    formData = model({} as T);
+    formGroup = model(new FormGroup({}));
+    get titleText(): string {
+        return this.textService.getText(this.title());
+    }
+
+    private readonly textService = inject(TextService);
+
+    constructor() {
+        super();
+
+        effect(() => {
+            this.rows();
+            this.setupFormGroup();
+        });
+    }
+
+    ngOnInit(): void {
+        this.setupFormGroup();
+        this.initialized.emit();
+
+        const valueChangesSub = this.formGroup().valueChanges.subscribe(() => this.formData.set(this.formGroup().getRawValue() as T));
+
+        this.addSubscriptions(valueChangesSub);
+    }
+
+    submit(): void {
+        this.formGroup().markAllAsTouched();
+        this.formGroup().updateValueAndValidity();
+        Object.values(this.formGroup().controls).forEach(control => (control as FormControl).updateValueAndValidity());
+
+        if (this.formGroup().valid) {
+            this.submitted.emit(this.formGroup().value as T);
+        }
+    }
+
+    private setupFormGroup(): void {
+        const allFields = this.rows().map(r => r.fields).reduce((acc, fields) => acc.concat(fields), []);
+
+        allFields.forEach(field => {
+            const validators: ValidatorFn[] = field.validators || [];
+
+            if (field.isRequired && !validators.includes(Validators.required)) {
+                validators.push(Validators.required);
+            }
+
+            // TODO: handle specific cases, when ready. DateRange, DateTimeRange, TimeRange and FileUpload
+            this.formGroup().addControl(
+                field.name,
+                new FormControl({ value: field.initValue, disabled: field.isDisabled || this.isDisabled() }, { validators: validators })
+            );
+        });
+    }
+}

package/form/src/models/checkbox-field.model.ts

@@ -0,0 +1,5 @@
+import { RadioFieldModel } from './radio-field.model';
+
+export interface CheckboxFieldModel extends RadioFieldModel {
+    isSwitch?: boolean;
+}

package/form/src/models/checkbox-group-field.model.ts

@@ -0,0 +1,8 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { TextModel } from '@updevs/sdk';
+
+import { CheckboxFieldModel } from './checkbox-field.model';
+
+export interface CheckboxGroupFieldModel extends CheckboxFieldModel {
+    options: DictionaryType<TextModel>;
+}

package/form/src/models/dynamic-field.model.ts

@@ -0,0 +1,32 @@
+import { ValidatorFn } from '@angular/forms';
+import { TextModel } from '@updevs/sdk';
+import { RowColumnSize } from '@updevs/components';
+import { InputType } from '@updevs/components/form-controls/input';
+import { RequiredPermissionsModel } from '@updevs/sdk/security';
+
+import { DynamicFieldType } from './enums/dynamic-field.type';
+
+export interface DynamicFieldModel {
+    type: DynamicFieldType;
+    name: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    shouldValidateOnBlur?: boolean;
+    /**
+     * If the field is valid it will be marked as such, instead of just maintaining the default state.
+     */
+    showValidStatus?: boolean;
+    /**
+     * Initial value.
+     */
+    initValue?: any;
+    placeholder?: TextModel;
+    label?: TextModel;
+    hint?: TextModel;
+    hintAsTooltip?: boolean;
+    inputType?: InputType;
+    colSize?: RowColumnSize;
+    labelColSize?: RowColumnSize;
+    validators?: ValidatorFn[];
+    requiredPermissions?: RequiredPermissionsModel;
+}

package/form/src/models/enums/dynamic-field.type.ts

@@ -0,0 +1,12 @@
+export enum DynamicFieldType {
+    Input = 1,
+    Select = 2,
+    SelectMultiple = 3,
+    Label = 4,
+    Checkbox = 5,
+    CheckboxGroup = 6,
+    Radio = 7,
+    RadioGroup = 8,
+    TextArea = 9,
+    FileUpload = 10
+}

package/form/src/models/enums/public-api.ts

@@ -0,0 +1 @@
+export * from './dynamic-field.type';

package/form/src/models/form-config.ts

@@ -0,0 +1,3 @@
+export interface FormConfig {
+
+}

package/form/src/models/form-row.model.ts

@@ -0,0 +1,10 @@
+import { RequiredPermissionsModel } from '@updevs/sdk/security';
+
+import { DynamicFieldModel } from './dynamic-field.model';
+
+export interface FormRowModel {
+    fields: DynamicFieldModel[];
+    isCompact?: boolean;
+    isHidden?: boolean;
+    requiredPermissions?: RequiredPermissionsModel;
+}

package/form/src/models/public-api.ts

@@ -0,0 +1,5 @@
+export * from './enums/public-api';
+export * from './checkbox-field.model';
+export * from './dynamic-field.model';
+export * from './form-row.model';
+export * from './radio-field.model';

package/form/src/models/radio-field.model.ts

@@ -0,0 +1,5 @@
+import { DynamicFieldModel } from './dynamic-field.model';
+
+export interface RadioFieldModel extends DynamicFieldModel {
+    isInline?: boolean;
+}

package/form/src/models/radio-group-field.model.ts

@@ -0,0 +1,8 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { TextModel } from '@updevs/sdk';
+
+import { RadioFieldModel } from './radio-field.model';
+
+export interface RadioGroupFieldModel extends RadioFieldModel {
+    options: DictionaryType<TextModel>;
+}

package/form/src/models/select-field.model.ts

@@ -0,0 +1,30 @@
+import { SelectItem } from '@updevs/components/form-controls/select';
+import { BaseSearchStore, ObservableSearchType } from '@updevs/sdk/stores';
+
+import { DynamicFieldModel } from './dynamic-field.model';
+
+export interface SelectFieldModel extends DynamicFieldModel {
+    items?: SelectItem[];
+    store?: BaseSearchStore<any>;
+    /**
+     * Observable used to load/filter the items.
+     */
+    observable?: ObservableSearchType;
+    /**
+     * Name of the property in the object that represents the ID/key of the option.
+     * **Note:** used only for remote data.
+     */
+    itemKey?: string;
+    /**
+     * Name of the property in the object that represents the value/description of the option.
+     * **Note:** used only for remote data.
+     */
+    itemValue?: string;
+    /**
+     * Maximum height of the dropdown.
+     */
+    dropdownMaxHeight?: number;
+    typeaheadDebounce?: number;
+    shouldAutoSearch?: boolean;
+    shouldCloseOnOutsideClick?: boolean;
+}

package/form/src/models/single-select-field.model.ts

@@ -0,0 +1,5 @@
+import { SelectFieldModel } from './select-field.model';
+
+export interface SingleSelectFieldModel extends SelectFieldModel {
+    useSystemStyle?: boolean;
+}

package/form/src/models/textarea-field.model.ts

@@ -0,0 +1,11 @@
+import { DynamicFieldModel } from './dynamic-field.model';
+
+export interface TextareaFieldModel extends DynamicFieldModel {
+    value?: string;
+    customClasses?: string;
+    wrapperClasses?: string;
+    maxLength?: number;
+    rows?: number;
+    isDisabled?: boolean;
+    displayCharactersCount?: boolean;
+}

package/form/src/models/validator-config.ts

@@ -0,0 +1,5 @@
+export interface ValidatorConfig {
+    text: string;
+    showLength?: boolean;
+    defaultErrorParamToShow?: string;
+}

package/form/src/public-api.ts

@@ -0,0 +1,3 @@
+export * from './models/public-api';
+export * from './form.component';
+export * from './upd-form.module';

package/form/src/tools/errors-helper.ts

@@ -0,0 +1,60 @@
+import { Injectable, inject } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { TextService } from '@updevs/sdk';
+import { DictionaryType, OptionalType } from '@updevs/sdk/types';
+import { HashMap } from '@jsverse/transloco';
+
+import { ValidatorConfig } from '../models/validator-config';
+
+@Injectable()
+export class ErrorsHelper {
+    private errors: DictionaryType<ValidatorConfig> = {
+        'required': { text: 'UpDevs.Form.ErrorMessages.Required' },
+        'requiredTrue': { text: 'UpDevs.Form.ErrorMessages.RequiredTrue' },
+        'generic': { text: 'UpDevs.Form.ErrorMessages.Generic' },
+        'email': { text: 'UpDevs.Form.ErrorMessages.Email' },
+        'max': { text: 'UpDevs.Form.ErrorMessages.Max', defaultErrorParamToShow: 'max' },
+        'min': { text: 'UpDevs.Form.ErrorMessages.Min', defaultErrorParamToShow: 'min' },
+        'maxlength': { text: 'UpDevs.Form.ErrorMessages.MaxLength', defaultErrorParamToShow: 'requiredLength' },
+        'minlength': { text: 'UpDevs.Form.ErrorMessages.MinLength', defaultErrorParamToShow: 'requiredLength' }
+    };
+    private readonly textService = inject(TextService);
+
+    getMessages(control: AbstractControl, customConfig?: DictionaryType<ValidatorConfig>): string[] {
+        if (!control.errors) {
+            return [];
+        }
+
+        const errorMessages: string[] = [];
+        const genericText = this.textService.getText({ text: this.errors['generic']!.text, isTranslated: false });
+        const combinedErrorMessagesList: DictionaryType<ValidatorConfig> = Object.assign({}, this.errors, customConfig || {});
+        const controlErrorKeys = Object.keys(control.errors);
+
+        controlErrorKeys.forEach(key => {
+            const customError = !!control.errors ? control.errors[key] : undefined;
+
+            if (!!customError?.errorText) {
+                errorMessages.push(this.textService.getText(customError.errorText));
+            } else if (key in combinedErrorMessagesList) {
+                const config = combinedErrorMessagesList[key]!;
+                let params: OptionalType<HashMap>;
+
+                if (config.showLength) {
+                    params = { value: control.value?.length || 0 };
+                }
+
+                if (!!config.defaultErrorParamToShow) {
+                    params = { value: control.errors![key][config.defaultErrorParamToShow] };
+                }
+
+                errorMessages.push(this.textService.getText({ text: config.text, isTranslated: false }, params));
+            }
+        });
+
+        if (controlErrorKeys.length > 0 && errorMessages.length < 1) {
+            errorMessages.push(genericText);
+        }
+
+        return errorMessages;
+    }
+}

package/form/src/upd-form.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdInputModule } from '@updevs/components/form-controls/input';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+import { UpdRadioModule } from '@updevs/components/form-controls/radio';
+import { UpdDatePickerModule } from '@updevs/components/form-controls/date-picker';
+import { UpdSelectModule } from '@updevs/components/form-controls/select';
+import { UpdTextareaModule } from '@updevs/components/form-controls/textarea';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+
+import * as en from './assets/i18n/en.json';
+import * as pt from './assets/i18n/pt.json';
+import { FormComponent } from './form.component';
+import { DynamicFieldComponent } from './components/dynamic-field/dynamic-field.component';
+import { ErrorsHelper } from './tools/errors-helper';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        UpdButtonModule,
+        TranslocoDirective,
+        UpdInputModule,
+        UpdCheckboxModule,
+        UpdRadioModule,
+        UpdDatePickerModule,
+        UpdSelectModule,
+        UpdTextareaModule
+    ],
+    declarations: [
+        FormComponent,
+        DynamicFieldComponent
+    ],
+    exports: [
+        FormComponent
+    ],
+    providers: [
+        ErrorsHelper
+    ]
+})
+export class UpdFormModule {
+    constructor(translocoService: TranslocoService) {
+        translocoService.setTranslation(en, 'en');
+        translocoService.setTranslation(pt, 'pt');
+    }
+}

package/form-controls/abstractions/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

package/form-controls/abstractions/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form-controls/abstractions/src/base-control.ts

@@ -0,0 +1,34 @@
+import { Directive, inject, TemplateRef, input } from '@angular/core';
+import { TextModel, TextService } from '@updevs/sdk';
+import { BaseComponent } from '@updevs/sdk/layout';
+import { ValidationStatusType } from '@updevs/components';
+
+@Directive({})
+export abstract class BaseControl extends BaseComponent {
+    placeholder = input<TextModel>();
+    label = input<TextModel>();
+    description = input<TextModel>();
+    validationStatusDescriptions = input<TextModel[]>([]);
+    hint = input<TextModel>();
+    hintTemplate = input<TemplateRef<any>>();
+    hintAsTooltip = input(false);
+    validationStatus = input<ValidationStatusType>();
+
+    get placeholderText(): string {
+        return this._textService.getText(this.placeholder());
+    }
+    get labelText(): string {
+        return this._textService.getText(this.label());
+    }
+    get descriptionText(): string {
+        return this._textService.getText(this.description());
+    }
+    get validationStatusTexts(): string[] {
+        return this.validationStatusDescriptions().map(desc => this._textService.getText(desc));
+    }
+    get hintText(): string {
+        return this._textService.getText(this.hint());
+    }
+
+    protected readonly _textService = inject(TextService);
+}

package/form-controls/abstractions/src/public-api.ts

@@ -0,0 +1 @@
+export * from './base-control';

package/form-controls/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

package/form-controls/checkbox/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form-controls/checkbox/src/checkbox.component.html

@@ -0,0 +1,34 @@
+<label class="form-check" [class.form-check-inline]="isInline()" [class.form-switch]="isSwitch()" [ngClass]="customClasses()">
+    @if (!!hintText || !!hintTemplate()) {
+        <div class="row g-2">
+            <div class="col-auto">
+                <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
+            </div>
+            <div class="col-auto align-self-center">
+                <span class="form-help" [updPopover]="hintText" [updPopoverTemplate]="hintTemplate()"
+                    [updPopoverActAsTooltip]="hintAsTooltip()">
+                    ?
+                </span>
+            </div>
+        </div>
+    } @else {
+        <ng-template [ngTemplateOutlet]="contentTpl"></ng-template>
+    }
+</label>
+
+<ng-template #contentTpl>
+    <input #checkboxInput type="checkbox" [disabled]="isDisabled()" [ngClass]="classes()" [value]="value()" [attr.name]="name()"
+        [attr.readonly]="isDisabled() ? '' : undefined" [(ngModel)]="isChecked" (change)="onSelectChange($event)">
+
+    @if (!!labelText) {
+        <span class="form-check-label">{{ labelText }}</span>
+    }
+
+    @if (!!descriptionText) {
+        <span class="form-check-description">{{ descriptionText }}</span>
+    }
+
+    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {
+        <div class="invalid-feedback">{{ validationStatusTexts }}</div>
+    }
+</ng-template>

package/form-controls/checkbox/src/checkbox.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckboxComponent } from './checkbox.component';
+
+describe('CheckboxComponent', () => {
+  let component: CheckboxComponent;
+  let fixture: ComponentFixture<CheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CheckboxComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/form-controls/checkbox/src/checkbox.component.ts

@@ -0,0 +1,60 @@
+import {
+    Component,
+    Input,
+    ViewEncapsulation,
+    HostBinding,
+    Output,
+    EventEmitter,
+    ViewChild,
+    ElementRef,
+    effect,
+    input,
+    model,
+    computed
+} from '@angular/core';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
+
+@Component({
+    selector: 'upd-checkbox',
+    templateUrl: './checkbox.component.html',
+    styleUrls: ['./checkbox.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CheckboxComponent extends BaseControl {
+    @HostBinding('class') @Input() wrapperClasses = '';
+    @ViewChild('checkboxInput', { read: ElementRef }) checkboxInput!: ElementRef;
+
+    @Output() readonly changed = new EventEmitter<boolean>();
+
+    value = input<any>();
+    customClasses = input<string>();
+    name = input<string>();
+    isDisabled = input<boolean>(false);
+    isChecked = model<boolean>(false);
+    isInline = input<boolean>(false);
+    isSwitch = input<boolean>(false);
+    isIndeterminate = model<boolean>(false);
+    classes = computed(() => {
+        const lClasses: string[] = ['form-check-input'];
+
+        if (!!this.validationStatus()) {
+            const statusCls = `is-${this.validationStatus()}`;
+            lClasses.push(statusCls);
+        }
+
+        return [...lClasses, ...(this.customClasses() || '').split(' ')];
+    });
+
+    constructor() {
+        super();
+
+        effect(() => {
+            this.checkboxInput.nativeElement.indeterminate = !!this.isIndeterminate();
+        });
+    }
+
+    onSelectChange(event: Event): void {
+        this.isIndeterminate.set(false);
+        this.changed.emit((event.target as HTMLInputElement).checked);
+    }
+}

package/form-controls/checkbox/{public-api.d.ts → src/public-api.ts}

@@ -1,2 +1,3 @@
 export * from './checkbox.component';
 export * from './upd-checkbox.module';
+

package/form-controls/checkbox/src/upd-checkbox.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { UpdPopoverModule } from '@updevs/components/popover';
+
+import { CheckboxComponent } from './checkbox.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        UpdPopoverModule
+    ],
+    declarations: [
+        CheckboxComponent
+    ],
+    exports: [
+        CheckboxComponent
+    ]
+})
+export class UpdCheckboxModule {}

package/form-controls/date-picker/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

package/form-controls/date-picker/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form-controls/date-picker/src/date-picker.component.html

@@ -0,0 +1,36 @@
+<div class="dropdown">
+    <div #componentBox class="input-group input-group-flat">
+        <div class="form-control" [class.remove-bottom-radius]="isDropdownOpen">
+            <div class="d-flex flex-row">
+                <upd-input [value]="startDate" (valueChange)="updateStartDate($event)" customClasses="date-input" class="px-1"
+                    [isPlainText]="true">
+                </upd-input>
+
+                @if (isRange) {
+                    <span class="px-1"> - </span>
+                    <upd-input [value]="endDate" (valueChange)="updateEndDate($event)" customClasses="date-input" class="px-1"
+                        [isPlainText]="true">
+                    </upd-input>
+                }
+            </div>
+        </div>
+        <div class="input-group-text" [class.remove-bottom-radius]="isDropdownOpen">
+            @if (hasSelectedData) {
+                <upd-button [shouldIgnoreBtnClass]="true" (clicked)="clearSelection()" customClasses="link-secondary">
+                    <upd-icon [model]="{tablerIcon:'x'}"></upd-icon>
+                </upd-button>
+            }
+            <upd-button [shouldIgnoreBtnClass]="true" (clicked)="openDropdown()" customClasses="link-secondary ms-2">
+                <upd-icon [model]="{tablerIcon:'calendar'}"></upd-icon>
+            </upd-button>
+        </div>
+    </div>
+    <div #calendar class="dropdown-content remove-top-radius" [style.display]="isDropdownOpen ? 'block' : 'none'">
+        <upd-calendar class="p-2" [id]="id" [startAt]="startAt" [startView]="startView" [minDate]="minDate" [maxDate]="maxDate"
+            [dateFilter]="dateFilter" [selected]="selectedData" [comparisonStart]="comparisonStart" [comparisonEnd]="comparisonEnd"
+            [startDateAccessibleName]="startDateAccessibleName" [endDateAccessibleName]="endDateAccessibleName" [isRange]="isRange"
+            (yearSelected)="yearSelected.emit($event)" (monthSelected)="monthSelected.emit($event)" (viewChanged)="viewChanged.emit($event)"
+            (userSelection)="handleUserSelection($event)" (userDragDrop)="handleUserDragDrop($event)">
+        </upd-calendar>
+    </div>
+</div>