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

package/form/src/form.component.ts

@@ -1,110 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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/tools/errors-helper.ts

@@ -1,60 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

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

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

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

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

@@ -1,34 +0,0 @@
-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

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

package/form-controls/checkbox/index.ts

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

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

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

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

@@ -1,34 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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/src/public-api.ts

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

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

@@ -1,21 +0,0 @@
-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

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

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

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

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

@@ -1,36 +0,0 @@
-<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>

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

@@ -1,26 +0,0 @@
-.dropdown-content {
-    position: absolute !important;
-    background-color: var(--upd-card-bg);
-    z-index: 1;
-    border: var(--upd-card-border-width) solid var(--upd-card-border-color) !important;
-    border-radius: var(--upd-card-border-radius) !important;
-    box-shadow: 0 1px 1px rgb(0 0 0 / 18%);
-    width: 350px !important;
-}
-
-.remove-bottom-radius {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-}
-
-.remove-top-radius {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-}
-
-::ng-deep .date-input {
-    padding: 0 !important;
-    width: 80px !important;
-}
-
-